设置echarts中折线图中数据根据正负数显示不同区域背景色

最新推荐文章于 2024-01-15 07:00:00 发布

原创最新推荐文章于 2024-01-15 07:00:00 发布 · 2.4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

Tmengxing

关注

标签

#echarts #前端 #javascript

分类前端开发

代码可运行

本文介绍了如何在Echarts中为折线图的数据正负数设置不同的背景颜色。通过代码示例展示了设置大于0.01的原因，解释了若设置为0可能导致的coord属性为undefined的问题。

代码:

option = {
  backgroundColor: "#030A41",
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
      show: false,
    },
    axisLabel: {  //设置x轴坐标配置
            margin: 10,
            color: '#fff',  
            textStyle: {
                fontSize: 14
            },
        },
  },
  yAxis: {   //设置y轴坐标配置
    type: 'value',
    splitLine: {   
      show: true,  
      lineStyle: {
        color: '#132987',
      },
    },
    axisLabel: {  
            margin: 10,
            color: '#fff',  //y轴坐标文字颜色设置   
            textStyle: {
                fontSize: 14
            },
        },
  },
 visualMap: [
    {
      type: 'piecewise',
      show: false,
      pieces: [
        {
          lte: 0,   //数据<0配置
          color: 'rgba(255, 87, 87, 0.3)',  //设置区域背景色
        },
        {
          gte: 0.1,  //数据>0配置
          color: 'rgba(69, 215, 224, 0.3)',  //设置区域背景色
        },
      ],
      seriesIndex: 0,
    },
  ],
  series: [
    {
      data: [-100, -200, 224, 218, 135, 147, -260],
      type: 'line',
      areaStyle:{},   //区域背景色
      itemStyle: {
          normal: {
            lineStyle: {
              width: 2,
              color: "#9DD3E8"
            },
          },
        },
    }
  ]
};