微信小程序 echarts 支持手指缩放

echarts yekong

uniapp微信小程序外包开发时,有一个需求,要求在小程序内,可以手动放大缩小图表。uniapp 微信小程序 使用Echarts

微信小程序 echarts 支持手指缩放

配置代码

dataZoom: {
	type: "inside"
},

实例代码

option: {
	tooltip: {
		show: true,
		trigger: 'axis',
		position: [10, 10]
	},
	dataZoom: {
		type: "inside"
	},
	color: ['#FC8B18', '#1890FF', '#2F53EB', '#52C41A'],
	legend: {
		icon: 'circle',
		top: 0,
		left: '20',
		itemWidth: 14,
		itemHeight: 14,
		itemGap: 14,
		show: false,
		textStyle: {
			color: 'rgba(146, 178, 215, 1)',
			fontSize: 14
		}
	},
	grid: {
		left: '30px',
		right: '30px',
		bottom: '30px',
		top: '40px',
		containLabel: true
	},
	xAxis: {
		data: [],
		axisLine: {
			lineStyle: {
				color: 'rgba(44, 53, 66, 0.45)',
			}
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			color: 'rgba(44, 53, 66, 0.45)',
			fontSize: 12
		}
	},
	yAxis: {
		splitNumber: 3,
		nameTextStyle: {
			color: 'rgba(44, 53, 66, 0.45)',
			fontSize: 11
		},
		axisLine: {
			show: false,
			lineStyle: {
				color: '#3d5269'
			}
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			color: 'rgba(44, 53, 66, 0.45)',
			fontSize: 11
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: 'rgba(44, 53, 66, 0.45)',
				type: 'dashed'
			}
		},
		yAxisIndex: 0
	},
	series: []
}

官方文档

官方文档说明

喜欢