1.开发环境 vue+element+echarts
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到 echarts的折线图,根据项目,总会有各种奇葩的需求,要实现的效果如下:
4.项目要求,y轴只能显示三个值,中间的显示的值是 上面的值+下面的值/2,怎么实现这个效果呢?代码如下:
let Chente: any = {
grid: {
left: '0%',
right: '4%',
// bottom: '-3%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', ''],
show:false
},
yAxis: {
type: 'value',
max:Chentemax,
min:Chentemin,
interval:MAI, //设置中间值,
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
fontWeight:900,
fontSize:18
}
}
},
series: [{
// data: [820, 932, 901, 934, 1290, 1330, 1320],
data:ChenteArr,
type: 'line'
}]
};
//这个是通过传参的方法,实现的
5.本期的教程到了这里就结束啦,是不是很简单!让我们一起努力走向巅峰!