ehcarts绘制横向/纵向辅助线（markLine）

横向+纵向辅助线

配置：option——>series——>markLine

series: [
    { // 辅助线
            // name: '辅助线', // 不需要图例
						// color: '#F56C6C',
            type: "line",
            smooth: true,
            markLine: {
              symbol: 'none', // 去掉辅助线首尾圆点和箭头
							lineStyle:{
								color: '#F56C6C',
								type: 'solid', // 实线
							},
              data: [
                {
                  yAxis: 200, // 纵坐标的值，决定横向辅助线在y轴的位置
									label:{
										formatter: '横向辅助线',
									},
                },
                {
                  xAxis: '3', // 横坐标的值，决定纵向辅助线在x轴的位置
									label:{
										formatter: '纵向辅助线',
									},
                },
              ]
            }
          },
],

更多markLine配置：

echarts官网 -markLine 配置项

完整代码：

let bgColor = "#fff";
			let color = ["#0090FF", "#36CE9E", "#FFC005", "#FF515A", "#8B5CFF", "#00CA69"];
			let echartData = [
				{
					name: "1",
					value1: 100,
					value2: 233,
				},
				{
					name: "2",
					value1: 138,
					value2: 233,
				},
				{
					name: "3",
					value1: 350,
					value2: 200,
				},
				{
					name: "4",
					value1: 173,
					value2: 180,
				},
				{
					name: "5",
					value1: 180,
					value2: 199,
				},
				{
					name: "6",
					value1: 150,
					value2: 233,
				},
				{
					name: "7",
					value1: 180,
					value2: 210,
				},
				{
					name: "8",
					value1: 230,
					value2: 180,
				},
			];

			let xAxisData = echartData.map((v) => v.name);
			let yAxisData1 = echartData.map((v) => v.value1);
			let yAxisData2 = echartData.map((v) => v.value2);
			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
						"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			};

			let option = {
				backgroundColor: bgColor,
				color: color,
				legend: {
					right: 10,
					top: 10,
				},
				grid: {
					top: 100,
					containLabel: true,
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						axisLabel: {
							formatter: "{value}月",
							textStyle: {
								color: "#333",
							},
						},
						axisLine: {
							lineStyle: {
								color: "#D9D9D9",
							},
						},
						data: xAxisData,
					},
				],
				yAxis: [
					{
						type: "value",
						name: "单位：万千瓦时",
						axisLabel: {
							textStyle: {
								color: "#666",
							},
						},
						nameTextStyle: {
							color: "#666",
							fontSize: 12,
							lineHeight: 40,
						},
						splitLine: {
							lineStyle: {
								type: "dashed",
								color: "#E9E9E9",
							},
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
					},
				],
				series: [
					{
						name: "2018",
						type: "line",
						smooth: true,
						// showSymbol: false,/
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[0],
							},
						},
						areaStyle: {
							normal: {
								color: hexToRgba(color[0], 0.3),
							},
						},
						data: yAxisData1,
					},
					{
						name: "2019",
						type: "line",
						smooth: true,
						// showSymbol: false,
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[1],
							},
						},
						areaStyle: {
							normal: {
								color: hexToRgba(color[1], 0.3),
							},
						},
						data: yAxisData2,
					},
					{ // 辅助线
            // name: '辅助线', // 不需要图例
						// color: '#F56C6C',
            type: "line",
            smooth: true,
            markLine: {
              symbol: 'none', // 去掉辅助线首尾圆点和箭头
							lineStyle:{
								color: '#F56C6C',
								type: 'solid', // 实线
							},
							label:{
								show:false,
							},
              data: [
                {
                  // x: '50%', // 辅助线起点位置。从横坐标50%处开始绘制
                  yAxis: 200, // 纵坐标的值，决定横向辅助线在y轴的位置
                },
                {
                  xAxis: '3', // 横坐标的值，决定纵向辅助线在x轴的位置
                },
              ]
            }
          },
				],
			};

---

2023.11.13更新

只显示部分的辅助线

option——>series——>markLine——>data

官网说明：

关键代码：

        data: [
          // 固定起点和终点的横向辅助线
          [
            { // 起点（从左侧开始）
              yAxis: 200,
              x: "30%", // 指定相对容器的屏幕坐标，单位像素，支持百分比
            },
            {
              yAxis: 200,
              x: "50%",
            },
          ],
          // 固定起点和终点的纵向辅助线
          [
            { // 起点（从顶部开始）
              xAxis: '3',
              y: "130px", // 指定相对容器的屏幕坐标，单位像素，支持百分比
            },
            {
              xAxis: '3',
              y: "460px",
            },
          ],
        ],