需求

折线图需要根据折线图在不同的数值范围折线图显示不同的颜色

实现思路

根据您的描述和ECharts的文档,折线图区间颜色渐变通常是通过visualMap组件来实现的。具体实现方式如下:

1. 使用visualMap组件:
   visualMap是一个视觉映射组件,可以将数据值映射到视觉元素上,包括颜色。

2. 配置visualMap:
   在visualMap中可以设置color属性来定义颜色渐变区间。例如:

   visualMap: {
     show: false,
     pieces: [
       {min: -10, max: -5, color: '#b23a33'},
       {min: -5, max: 0, color: '#db9f3f'},
       {min: 0, max: 5, color: '#06b657'},
       {min: 5, max: 10, color: '#da9f3f'},
       {min: 10, max: 15, color: '#587dff'}
     ]
   }
   

3. 数据映射:
   visualMap会根据数据值自动将颜色映射到折线图的对应部分。

4. 渐变效果:
   如果需要更平滑的渐变效果,可以使用continuous类型的visualMap,并设置多个颜色节点。

5. 与series关联:
   确保visualMap与需要应用颜色映射的series关联。

通过这种方式,ECharts会根据数据值的变化,自动在折线图的不同区间应用相应的颜色,从而实现区间颜色渐变的效果。这种方法既灵活又直观,能够有效地展示数据在不同值域范围内的变化趋势。

关键代码

<template>
  <div class="echarts1" ref="echarts">
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {
      xData: [],
      yData1: [],
    }
  },
  watch: {},
  mounted() {
    this.generateData();
  },
  methods: {
    generateData() {
      // 生成最近7天的日期
      const today = new Date();
      this.xData = Array.from({length: 7}, (_, i) => {
        const date = new Date(today);
        date.setDate(date.getDate() - (6 - i));
        return date.toLocaleDateString('zh-CN', {month: '2-digit', day: '2-digit'});
      });

      // 生成-10到15之间的随机数
      this.yData1 = Array.from({length: 7}, () => Math.floor(Math.random() * 26) - 10);
      this.drawEcharts();
    },
    drawEcharts() {
      let myChart = echarts.init(this.$refs.echarts)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      var option = {
        tooltip: {
          show: false
        },
        grid: {
          top: '30',
          left: '10',
          right: '25',
          bottom: '20',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.xData,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0a4573'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: 18
            },
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          min: -10,
          max: 15,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(157, 173, 178, 1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(245, 247, 250, 1)',
              fontSize: 18
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0b4170',
              type: 'dashed'
            }
          }
        }],
        visualMap: {
          show: false,
          pieces: [
            {min: -10, max: -5, color: '#b23a33'},
            {min: -5, max: 0, color: '#db9f3f'},
            {min: 0, max: 5, color: '#06b657'},
            {min: 5, max: 10, color: '#da9f3f'},
            {min: 10, max: 15, color: '#587dff'}
          ]
        },
        series: [
          {
            name: '物联趋势',
            type: 'line',
            data: this.yData1,
            smooth: true,
            symbolSize: 0,
            lineStyle: {
              width: 2
            },
            label: {
              show: false,
              position: 'top',
              distance: 10,
              fontFamily: 'AlibabaPuHuiTi_2_75_SemiBold',
              fontWeight: 400,
              fontSize: 26,
              color: '#FFFFFF',
              formatter: '{c}'
            },
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 1)',
                borderColor: 'rgba(255, 255, 255, 1)',
                borderWidth: 2
              }
            },
            emphasis: {
              scale: false,
              itemStyle: {
                color: 'rgba(255, 255, 255, 1)',
                borderColor: 'rgba(255, 255, 255, 1)',
                borderWidth: 10,
                shadowBlur: 10,
                shadowColor: 'rgba(255, 255, 255, 0.5)'
              },
              label: {
                show: true
              }
            }
          }
        ]
      };

      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>