echarts Markline配置

Echarts添加markline配置，同时添加多条markline,更改markline标签颜色，增加开关控制markline显示。

1. 比较图表的值和markLine的值，动态设置y轴的值 （取其中最大的设置为y轴值）
2. markLine配置， 如果为0 就不显示,要配置label和lineStyle

const chartLabelList = chartData.value.map(item => item.ts)
const chartValueList = chartData.value.map(item => item.dataValue)
lineCollection.chartLabelList = chartLabelList
lineCollection.chartValueList = chartValueList
nextTick(() => {
  initLineChart(chartLabelList, chartValueList)
})


const initLineChart = (
  chartLabelList,
  chartValueList,
  isMarkLineShow = false
) => {
  const option = {
    title: {
      //   text: chartDataArray.value[index].name,
      // show: false,
      textStyle: {
        color: '#fff', // Text color
        //fontStyle: 'italic',   // Text style: normal, italic, oblique
        fontWeight: 'bold', // Text weight: normal, bold, bolder, lighter
        fontSize: 18, // Text font size
        fontFamily: 'Arial' // Text font family
        // lineHeight: 30,        // Line height
        // Other text style properties...
      }
    },
    grid: {
      top: 40 //15,
    },
    xAxis: {
      type: 'category',
      data: chartLabelList, // Sample categories
      axisLabel: {
        // interval: 120,
        // rotate: 5 // Rotate the x-axis labels by 45 degrees
      },
      axisLine: {
        lineStyle: {
          // 这里是白色 记得更改 不然在白底显示不出来
          color: 'rgba(255,255,255, 1)' // Set the color of the xAxis line to white
        }
      },
      axisTick: {
        show: false // Hide xAxis ticks
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          // 这里是白色 记得更改 不然在白底显示不出来
          color: '#fff' // Set the color of the yAxis line to white
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          // 这里是白色 记得更改 不然在白底显示不出来
          color: 'rgba(255,255,255,0.35)'
        }
      },
      axisTick: {
        show: false // Hide yAxis ticks
      },
      // 如果`markLine`设置的值太大 就会被隐藏掉 要设置X/Y坐标轴 相应的最大值, 取图表值和markLine的值中最大的
      max:
        Math.max(...chartValueList) > Number(lineCollection.redUpper) * 1.2
          ? Math.max(...chartValueList)
          : Number(lineCollection.redUpper) * 1.2,
    },
    tooltip: {
      // Configuration for tooltip
      trigger: 'axis' // Show tooltip when hovering over data points
      // axisPointer: {
      // 	type: 'cross' // Show tooltip line across both axes
      // }
    },
    series: [
      {
        type: 'line',
        data: chartValueList,
        lineStyle: {
          color: 'rgba(55, 226, 103, 1)' // Set the color of the line to white
        }
      }
    ]
  }
  // 增加开关控制是否显示markline
  if (isMarkLineShow) {
    option.series[0].markLine = {
      data: [
        {
          yAxis: lineCollection.blueUpper,
          lineStyle: { color: '#0000FF' },
          label: { color: "#f1f1f1"},
          name: '蓝色'
        },
        {
          yAxis: lineCollection.orangeUpper,
          lineStyle: { color: '#FFA500' },
           label: { color: "#f1f1f1"},
          name: '橙色'
        },
        {
          yAxis: lineCollection.redUpper,
          lineStyle: { color: '#FF0000' },
           label: { color: "#f1f1f1"},
          name: '红色'
        },
        {
          yAxis: lineCollection.yellowUpper,
          lineStyle: { color: '#FFFF00' },
          label: { color: "#f1f1f1"},
          name: '黄色'
        }
      ]
    }
  } else {
    option.series[0].markLine = {
      data: []
    }
  }
  chartIns.value = echarts.init(document.getElementById('lineContainer'))
  chartIns.value.setOption(option)
}
const initLineChart = (
  chartLabelList,
  chartValueList,
  isMarkLineShow = false
) => {
  const option = {
    title: {
      //   text: chartDataArray.value[index].name,
      // show: false,
      textStyle: {
        color: '#fff', // Text color
        //fontStyle: 'italic',   // Text style: normal, italic, oblique
        fontWeight: 'bold', // Text weight: normal, bold, bolder, lighter
        fontSize: 18, // Text font size
        fontFamily: 'Arial' // Text font family
        // lineHeight: 30,        // Line height
        // Other text style properties...
      }
    },
    grid: {
      top: 40 //15,
    },
    xAxis: {
      type: 'category',
      data: chartLabelList, // Sample categories
      axisLabel: {
        // interval: 120,
        // rotate: 5 // Rotate the x-axis labels by 45 degrees
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255, 1)' // Set the color of the xAxis line to white
        }
      },
      axisTick: {
        show: false // Hide xAxis ticks
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff' // Set the color of the yAxis line to white
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.35)'
        }
      },
      axisTick: {
        show: false // Hide yAxis ticks
      }
    },
    tooltip: {
      // Configuration for tooltip
      trigger: 'axis' // Show tooltip when hovering over data points
      // axisPointer: {
      // 	type: 'cross' // Show tooltip line across both axes
      // }
    },
    series: [
      {
        type: 'line',
        data: chartValueList,
        lineStyle: {
          color: 'rgba(55, 226, 103, 1)' // Set the color of the line to white
        }
      }
    ]
  }

// `markLine`值如果为0就不显示
  if (isMarkLineShow) {
    option.series[0].markLine = {
      data: [
        {
          yAxis: lineCollection.blueUpper,
          lineStyle: {
            color: '#0000FF',
            opacity: Number(lineCollection?.blueUpper) > 0 ? 1 : 0,
          },
          label: {
            color: '#0000FF',
            show: Number(lineCollection?.blueUpper) > 0 ? true : false,
          },
          name: '蓝色',
        },
        {
          yAxis: lineCollection.orangeUpper,
          lineStyle: {
            color: '#FFA500',
            opacity: Number(lineCollection?.orangeUpper) > 0 ? 1 : 0,
          },
          label: {
            color: '#FFA500',
            show: Number(lineCollection?.orangeUpper) > 0 ? true : false,
          },
          name: '橙色',
        },
        {
          yAxis: lineCollection.redUpper,
          lineStyle: {
            color: '#FF0000',
            opacity: Number(lineCollection?.redUpper) > 0 ? 1 : 0,
          },
          label: {
            color: '#FF0000',
            show: Number(lineCollection?.redUpper) > 0 ? true : false,
          },
          name: '红色',
        },
        {
          yAxis: lineCollection.yellowUpper,
          lineStyle: {
            color: '#FFFF00',
            opacity: Number(lineCollection?.yellowUpper) > 0 ? true : false,
          },
          // label: { color: "#FFFF00"},
          label: {
            color: '#FFFF00',
            show: Number(lineCollection?.yellowUpper) > 0 ? true : false,
          },
          name: '黄色',
        },
      ],
    }
  } else {
    option.series[0].markLine = {
      data: [],
    }
  }
        
  chartIns.value = echarts.init(document.getElementById('lineContainer'))
  chartIns.value.setOption(option)
}

markLine值如果为0就不显示

  yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff', // Set the color of the yAxis line to white
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.35)',
        },
      },
      axisTick: {
        show: false, // Hide yAxis ticks
      },
      // 阀值显示 就取最大的 不然取图表最大值
      max: !isGuideLineChecked.value
        ? Math.max(...chartValueList)
        : Math.max(...chartValueList) > Number(lineCollection.redUpper) * 1.2
        ? Math.max(...chartValueList)
        : Number(lineCollection.redUpper) * 1.2,
    },