折线图：标线变色echarts piecewise配置项内容和展示

折线图 + 标线变色

      option = {
  backgroundColor: '#0a1256',
  //浮动框
  tooltip: {},
  //图例
  legend: {
    right: '12%',
    bottom: '4%',
    textStyle: {
      color: '#fff',
      fontSize: '13',
    },
    itemGap: 20,
    itemWidth: 10,
    itemHeight: 10,
    icon: 'circle',
    data: ['PM2.5', 'CO2', 'SO'],
  },
  grid: {
    left: '8%',
    top: '15%',
    bottom: '14%',
    width: '86%',
  },
  visualMap: [
    {
      type: 'piecewise',
      show: false,
      pieces: [
        {
          gt: 0,
          lte: 50,
          color: '#01F6F9',
        },
        {
          gte: 50,
          color: '#e5421b',
        },
      ],
      seriesName: 'PM2.5',
      seriesIndex: 0,
    },
    {
      type: 'piecewise',
      show: false,
      pieces: [
        {
          gt: 0,
          lte: 50,
          color: '#0092f6',
        },
        {
          gte: 50,
          color: '#e5421b',
        },
      ],
      seriesName: 'CO2',
      seriesIndex: 1,
    },
    // {
    //   type: 'piecewise',
    //   show: false,
    //   pieces: [
    //     {
    //       gt: 0,
    //       lte: 60,
    //       color: '#69dbf7',
    //     },
    //     {
    //       gte: 60,
    //       color: '#e5421b',
    //     },
    //   ],
    //   seriesName: 'SO',
    //   seriesIndex: 2,
    // },
    // {
    //   type: 'piecewise',
    //   show: false,
    //   pieces: [
    //     {
    //       gt: 0,
    //       lte: 60,
    //       color: '#feb01e',
    //     },
    //     {
    //       gte: 60,
    //       color: '#e5421b',
    //     },
    //   ],
    //   seriesName: 'PM2.5',
    //   seriesIndex: 3,
    // },
    // {
    //   type: 'piecewise',
    //   show: false,
    //   pieces: [
    //     {
    //       gt: 0,
    //       lte: 60,
    //       color: '#1be57a',
    //     },
    //     {
    //       gte: 60,
    //       color: '#e5421b',
    //     },
    //   ],
    //   seriesName: 'CO2',
    //   seriesIndex: 4,
    // },
    // {
    //   type: 'piecewise',
    //   show: false,
    //   pieces: [
    //     {
    //       gt: 0,
    //       lte: 60,
    //       color: '#69dbf7',
    //     },
    //     {
    //       gte: 60,
    //       color: '#e5421b',
    //     },
    //   ],
    //   seriesName: 'SO',
    //   seriesIndex: 5,
    // },
  ],
  //x轴
  xAxis: {
    axisLine: {
      lineStyle: {
        color: '#132987',
      },
    },
    axisLabel: {
      textStyle: {
        color: '#FFF',
        fontSize: 12,
      },
    },
    //刻度线
    axisTick: {
      show: false,
    },
    //坐标轴显示值
    data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时'],
  },
  //y轴
  yAxis: {
    min: 0,
    max: 100,
    axisLabel: {
      //  改变y轴字体颜色和大小
      //formatter: '{value} m³ ', //  给y轴添加单位
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    //坐标轴线
    axisLine: {
      show: false,
    },
    //刻度线
    axisTick: {
      show: false,
    },
    //在grid区域中的分隔线
    splitLine: {
      show: true,
      lineStyle: {
        color: '#132987',
      },
    },
  },

  //
  series: [
    // {
    //   name: 'PM2.5',
    //   type: 'line',
    //   symbolSize: [0, 0],
    //   itemStyle: {
    //     color: '#feb01e',
    //   },
    //   data: [43, 50, 41, 18, 28, 25, 26, 40],
    // },
    // {
    //   name: 'CO2',
    //   type: 'line',
    //   symbolSize: [0, 0],
    //   itemStyle: {
    //     color: '#1be57a',
    //   },
    //   data: [21, 30, 37, 39, 23, 37, 5, 50],
    // },
    {
      name: 'SO',
      type: 'line',
      symbolSize: [0, 0],
      // itemStyle: {
      //   color: '#69dbf7',
      // },
      itemStyle: {
        normal: {
          // color: "#0092f6",
          color: '#01F6F9',
          // lineStyle: {
          //   color: "#01F6F9",
          //   width: 5,
          // },
        },
      },
      data: [76, 58, 60, 38, 49, 59, 78, 60],
    },
    // {
    //   //水波纹点
    //   name: 'PM2.5',
    //   type: 'effectScatter',
    //   symbolSize: [5, 5],
    //   rippleEffect: {
    //     period: 1,
    //     scale: 4,
    //     brushType: 'fill',
    //   },
    //   itemStyle: {
    //     color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
    //       {
    //         offset: 0,
    //         color: '#feb01e',
    //       },
    //       {
    //         offset: 1,
    //         color: 'rgba(254,176,30,.3)',
    //       },
    //     ]),
    //   },
    //   data: [43, 50, 41, 18, 28, 25, 26, 40],
    // },
    // {
    //   //水波纹点
    //   name: 'CO2',
    //   type: 'effectScatter',
    //   symbolSize: [5, 5],
    //   rippleEffect: {
    //     period: 1,
    //     scale: 4,
    //     brushType: 'fill',
    //   },
    //   itemStyle: {
    //     color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
    //       {
    //         offset: 0,
    //         color: '#1be57a',
    //       },
    //       {
    //         offset: 1,
    //         color: 'rgba(27,229,122,.3)',
    //       },
    //     ]),
    //   },
    //   data: [21, 30, 37, 39, 23, 37, 5, 50],
    // },
    {
      //水波纹点
      name: 'SO',
      type: 'effectScatter',
      symbolSize: [5, 5],
      rippleEffect: {
        period: 1,
        scale: 4,
        brushType: 'fill',
      },
      itemStyle: {
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
          {
            offset: 0,
            // color: '#69dbf7',
            color: '#01F6F9',
          },
          {
            offset: 1,
            // color: '#aefbc3',
            color: '#01F6F9',
          },
        ]),
      },
      markLine: {
        symbol: 'none',
        label: {
          normal: {
            show: false,
          },
        },
        lineStyle: {
          type: 'solid',
          color: 'rgba(210,56,56,.6)',
          width: 2,
        },
        data: [
          {
            yAxis: 50,
          },
        ],
      },
      data: [76, 58, 60, 38, 49, 59, 78, 60],
    },
  ],
};