uniapp微信小程序外包开发时,有一个需求,要求在小程序内,可以手动放大缩小图表。uniapp 微信小程序 使用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: []
}