This echart library is used in this project
The dataZoom configuration item was added to the project but it did not take effect. Suddenly, I thought of the size limit of the WeChat applet code. The previous echarts.js was customized, and the dataZoom component may not have been added. Therefore, re-customize echarts.js. The echarts version I used before was 5.0.0, and this time I also customized the same version, but an error was reported. Judging from previous experience, it may be a version problem, so I improved a version. Then it will take effect! ! ! Last effective version 5.1.0.
If an error is reported:
Report t.addEventListener is not a function, delete t.addEventListener(e,n,i);
It is reported that t.preventDefault is not a function. I temporarily deleted the function execution statement in t.preventDefault, and then I can drag it, but I haven’t tried zooming.
The following is the option code
let option = {
grid: { //调整图与容器周围的间距
top: '14%',
left: '12%', //默认10%
right: '16%', //默认10%
// bottom: '8%', //默认60
containLabel: true
//grid区域是否包含坐标轴的刻度标签
},
xAxis: {
name: "日期", //x轴的单位
type: 'category',
// interval: 2, // 设置间距为2，表示每隔一个刻度显示一个刻度
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: this.xData,
axisTick: {
alignWithLabel: true,
interval: 0,
},
axisLabel: {
interval: 0,
rotate: that.totalData.title === '微策' ? 0 : 20,
textStyle: {
color: '#667286',
},
// formatter: '{M}-{d}\n{HH}-{mm}'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function(value, index) {
let label = value;
if (that.totalData.title === '硅基') {
label = `${label.slice(11, 19)}`
} else if (that.totalData.title === '微策') {
label = `${label.slice(5, 10)}\n${label.slice(11, 16)}`
} else {
label = `${label.slice(5, 10)}`
}
return label;
}
},
},
yAxis: {
type: 'value',
name: a[this.totalData.title], //y轴的单位
axisLabel: {
textStyle: {
color: '#667286',
},
// formatter: '{value} KG',//y轴每一个刻度加单位
},
},
dataZoom: [{
type: 'inside',
// show:this.dataZoomEnd===100?false:true,//当标签100%显示时候不显示滑块 type=slider时使用
start: 0,
end: this.dataZoomEnd,
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
// type: 'solid',//鼠标移入的基准线实线
color: '#53cdef',
},
},
// formatter: "日期 ：{b0}\<br\/\>{a0} : {c0}KG \<br\/\>",
},
series: [{
// showSymbol: false,//隐藏折线拐点，只有鼠标移入时候显示
name: b[this.totalData.title],
data: this.yData,
// data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
itemStyle: { //折线拐点标志的样式
normal: {
color: '#00875A',
}
},
// label:{
// show: true,
// position: 'bottom',
// textStyle: {
// fontSize: 20
// }
// },
lineStyle: {
normal: {
color: '#00875A',
width: 2,
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00875A'
},
{
offset: 1,
color: '#FFFFFF'
}
])
},
}]
};