echarts的折线图动态分层

var xData = param.xData;

    var data = param.yData
    let option = [];
    let num =param.num ? param.num : 0;
    let max = num ? num *100 : 100;    //处理精度丢失问题  但不是最佳方案
    let startValue = param.startValue;
    visualMap: [{
            show: false,
            top: 20,
            right: 10,
            default:10,
            pieces:[{   //分层的实现主要是在里代码
                gt: 0,
                lte: num,
                color: '#ffde33'
            },{
                gt: num,
                lte: max,
                color: '#f00'
            }],
            outOfRange: {           // 超出范围
                color: '#f00'
            }
        }],
        title: [{
            top: '',
            left: 'center',
            text: param.title,
        }],
        tooltip: {
            trigger: 'axis',
            formatter: function(params){    
                var text_Unit ='';     
                for(var i = 0;i < params.length;i++){
                    text_Unit += params[i].value + param.Unit + "</br>"
                }    
                    return params[0].name + "</br>" + text_Unit;                      
            }
        },
        xAxis: [{
            data: xData,
            gridIndex: 1,
        }],
        yAxis: [{
            name: param.yName,
            splitLine: { show: false },
            gridIndex: 1,
        }],
        grid: [{
            bottom: '',
        }, {
            top: '20%',
        }],
        series: {
            type: 'line',
            showSymbol: false,
            data: data,
            markLine: {
                silent: true,
                data: [{
                    yAxis: num
                },]
            }
        }
        

《echarts的折线图动态分层》

    原文作者:啊衰
    原文地址: https://segmentfault.com/a/1190000019273339
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞