关于echarts:echarts折线图配置

echarts 折线图配置

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