2021-10-20

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
          },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
完整代码
下面代码可直接在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]
        },
       
    ]
};
————————————————
原文链接：https://blog.youkuaiyun.com/weixin_43976602/article/details/107019229