echarts-line,根据数据控制颜色,绘制一条多颜色的线条

fn1(){

var myChart = echarts.init(document.getElementById(divId));

  var data = [];

  var timeData = [];

  var yMinData = -5;

  var yMaxData= 5

  for(var i =0 ; i < nowData.length ; i++){

  if(parseInt(nowData[i].ERROR) > parseInt(yMaxData)){

  yMaxData = parseInt(nowData[i].ERROR)

  }else if(parseInt(nowData[i].ERROR) < parseInt(yMinData)){

  yMinData = parseInt(nowData[i].ERROR)

  }

  data.push(nowData[i].ERROR);

  timeData.push(nowData[i].COLLECTINGTIME);

  }

  option = {

    toolbox: {                               //增加保存,切换图表功能

      show: true,

      right: '5%',

      feature: {

        saveAsImage: {

        show:true,

        excludeComponents :['toolbox'],

        pixelRatio: 2

        },

    magicType: {

            type: ['line', 'bar']

        }

      }

    },

    xAxis: {

        type: 'category',

        data: timeData,

        name: '时间'

    },

    title: {

    show: true,

    text: titleName,

    left: 'center',

    },

    tooltip: {

        trigger: 'axis'

    },

    legend:{

      data:[name],

      left:'middle',

      top:'bottom',

    },

    yAxis: {

        type: 'value',

        max: yMaxData,

        min: yMinData,

        name: '相对误差(%)',

    },

    series: [{

        name:name,

        lineStyle: {

            normal: {

                width: 2,

                type: 'dashed'

            }

        },

        itemStyle: {

            normal: {

                borderWidth: 3,

                color: 'red'

            }

        },

        data: data,

        type: 'line',

        symbol: 'triangle',

        symbolSize: 20,

          markLine: {

              lineStyle:{

              normal:{

              color:'red' 

              }

              },

                data: [

                    {yAxis: 5, name: '平均值'},

                    {yAxis: -5, name: '111'}

                ]

            },

    }],

    visualMap: [{           //改变线的颜色

        show: true,

        dimension: 1,

        type:'piecewise',

        right: '1%',

        top: '6%',

        pieces: [{min: 5, max: yMaxData, color: 'red', label: '不合格'}, {min: yMinData, max: -5, color: 'red', label: '不合格'}, {min: -5, max: 5, color: 'green', label: '合格'}],  //pieces的值由动态数据决定

        outOfRange: {

            color: 'green',

            symbol: 'triangle',

        }

    }],

};


  myChart.setOption(option);

}

你可能感兴趣的:(echarts-line,根据数据控制颜色,绘制一条多颜色的线条)