echarts折线图根据接收的字段不同，线的颜色不同（动态设置echarts折线图线的颜色）

  如图，天气质量有六个等级，根据等级不同，echarts折线图的线颜色不同。

动态设置一个变量lineColor

const lineColor = this.todayLevel === '良' ? '#f5cc00' : this.todayLevel === '优' ? '#00d660' : this.todayLevel === '轻度污染' ? '#ff0100' : this.todayLevel === '中度污染' ? '#ff7e01' : this.todayLevel === '重度污染' ? '#7f0071' : this.todayLevel === '严重污染' ? '#7f0000' : ''

在echarts颜色设置处使用

getCharts () {
      var chartDom = document.getElementById('mainEcharts')
      var myChart = echarts.init(chartDom)
      var option
      const lineColor = this.todayLevel === '良' ? '#f5cc00' : this.todayLevel === '优' ? '#00d660' : this.todayLevel === '轻度污染' ? '#ff0100' : this.todayLevel === '中度污染' ? '#ff7e01' : this.todayLevel === '重度污染' ? '#7f0071' : this.todayLevel === '严重污染' ? '#7f0000' : ''
      option = {
        // legend: {
        //   top: '7%',
        //   left: '20%',
        //   itemWidth: 20,
        //   itemHeight: 20,
        //   data: [
        //     { icon: 'none', name: '情感指数' }
        //   ],
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14',
        //     rich: {
        //       a: {
        //         width: 50,
        //         align: 'middle' // 文字居中显示
        //       },
        //       b: {
        //         width: 30,
        //         color: '#03C8D7',
        //         align: 'middle'
        //       },
        //       c: {
        //         color: '#03C8D7'
        //       }
        //     }
        //   },
        //   formatter: '{b}月:<br/> 情感指数{c}分 '
        // },
        grid: {
          top: 30,
          left: 50,
          bottom: 30
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          formatter: '当前AQI:{c} ',
          backgroundColor: 'rgba(1, 28, 56,0.7)',
          borderColor: 'rgba(50,110,191,0.6)',
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false // 隐藏x轴刻度
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#1a5c99'
            },
            textStyle: {
              color: '#ffffff'
            }
          },
          data: this.echartsServe
        },
yAxis: {
          type: 'value',
          axisTick: {
            show: false // 隐藏x轴刻度
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#1a5c99'
            }
          },
          splitLine: {
            lineStyle: {
              // 设置背景横线
              color: '#1a5c99'
            }
          }
        },
        series: [
          {
            name: '空气质量变化趋势',
            data: this.echartsValue,
            type: 'line',
            itemStyle: {
              normal: {
                color: 'lineColor', // 改变折线点的颜色
                lineStyle: {
                  color: lineColor, // 改变折线颜色
                  width: 3
                }
              }
            },

            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: lineColor },
                    { offset: 1, color: 'transparent' }// transparent是渐变到无色。
                  ]
                )
              }
            }

          }
        ]
      }

      option && myChart.setOption(option)
    }