echarts折线图配置

246 阅读1分钟

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.本期的教程到了这里就结束啦,是不是很简单!让我们一起努力走向巅峰!