ECharts關於不同區間 區域填充實現

ECharts關於不同區間 區域填充實現

實現的是分區域填充不同顏色的折線圖，比如說 “0-50”區間顯示綠色，“50以上爲紅色””。廢話不多說，先上圖：

當然了，也可以設置多區間顯示， “0-50”區間顯示綠色，“50-100”顯示黃色，“100-200”顯示爲橘色，“200”以上顯示紅色。

主體說明

選用百度echarts模板 ，再此基礎上做增加

利用的是echarts中視覺映射（visualMap）功能

lt（小於），gt（大於），lte（小於等於），gte（大於等於）

visualMap: {
              show: false,
              //lt（小於），gt（大於），lte（小於等於），gte（大於等於）
              pieces: [{
                  gt: 0,
                  lte: 50,
                  color: 'green', //根據顏色代碼自行更改
              }, {
                  gt: 50,
                  lte: 100,
                  color: 'yellow',
              },{
                  gt: 100,
                  lte: 200,
                  color: 'orange',
              },{
                  gt: 200,
                  color: 'red',
              },
              ],
              seriesIndex: 0
          },

完整代碼

下面代碼可直接在echarts官網代碼窗口運行

option = {
    title: {
        text: '安全係數區域填充圖'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['郵件營銷']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    visualMap: {
              show: false,
              //lt（小於），gt（大於），lte（小於等於），gte（大於等於）
              pieces: [{
                  gt: 0,
                  lte: 50,
                  color: 'green',
              }, {
                  gt: 50,
                  lte: 100,
                  color: 'yellow',
              },{
                  gt: 100,
                  lte: 200,
                  color: 'orange',
              },{
                  gt: 200,
                 
                  color: 'red',
              },
              ],
              seriesIndex: 0
          },
    series: [
        {
            name: '郵件營銷',
            type: 'line',
            smooth:true,
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
        },
       
    ]
};

完畢！