ECharts 折线图在最高点和最低点在连接处向外颜色渐变

大橙子-

已于 2024-08-22 18:02:42 修改

阅读量306

点赞数 4

文章标签： echarts 前端 javascript

于 2024-08-22 17:59:13 首次发布

本文链接：https://blog.csdn.net/weixin_44260173/article/details/141434073

版权

效果查看：将代码复制到 echarts解析

const highColor = 'red';
const lowColor = '#24A148';
option = {
  tooltip: {
    trigger: 'axis'
  },
  emphasis: {
    focus: 'series'
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      symbolSize: 10,
      emphasis: {
        focus: 'series'
      },
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: highColor
          },
          {
            offset: 1,
            color: lowColor
          }
        ]),
        shadowColor: '#bbb',
        shadowBlur: 10,
        shadowOffsetY: 10
      },
      data: [
        {
          value: 140,
          symbol: 'none'
        },
        {
          value: 130,
          symbol: 'none'
        },
        {
          value: 100,
          symbol: 'none'
        },
        {
          value: 150,
          symbol: 'none'
        },
        {
          value: 180,
          symbol: 'emptyCircle',
          itemStyle: {
            color: highColor
          }
        },
        {
          value: 90,
          symbol: 'emptyCircle',
          itemStyle: {
            color: lowColor
          }
        },
        {
          value: 150,
          symbol: 'none'
        },
        {
          value: 170,
          symbol: 'none'
        },
        {
          value: 160,
          symbol: 'none'
        }
      ]
    }
  ]
};