Echarts 折线图-折线下侧添加渐变阴影-设置折线点垂直x轴的实线保证线从上到下

项目场景：Echarts 折线图

提示：工作开发 记录：
效果图:
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png

功能实现

1.图表距离边框位置
2.x轴标签底部添加 对应数值
3.x轴不显示坐标轴刻度线、坐标轴线
4.y轴刻度、边线隐藏
5.y轴刻度展示条数 保证居中展示
6.x轴折线宽度
7.折线下侧添加渐变阴影
8.将折线点 改为中心实点 外圈白点
9.设置折线点垂直x轴的实线保证线从上到下

---

问题描述

提示：这里描述项目中遇到的问题：

8.将折线点 改为中心实点 外圈白点：

            symbol: "circle", // 使用圆形符号
            symbolSize: 10, // 调整符号大小
            itemStyle: {
              color: "#AC9EFF", // 中心点颜色
              borderColor: "#FFFFFF", // 外圈颜色
              borderWidth: 3, // 外圈宽度
            },
            emphasis: {
              itemStyle: {
                borderColor: "#FFFFFF", // 强调状态下的外圈颜色
                borderWidth: 3, // 强调状态下的外圈宽度
              },
            },

---

7.折线下侧添加渐变阴影：

            areaStyle: {
              // 添加渐变阴影
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  // 设置渐变色
                  offset: 0,
                  color: "rgba(172,158,255,0.2)", // 开始颜色
                },
                {
                  offset: 1,
                  color: "rgba(172,158,255,0)", // 结束颜色
                },
              ]),
            },

---

2.x轴标签底部添加 对应数值：

axisLabel: {
            color: "#666666",
            fontSize: 16,
            formatter: function (value, index) {
              return (
                value +
                "\n\n" +
                "{a|" +
                option_halfYearCollection.series[0].data[index] +
                "}"
              );
            },
            rich: {
              a: {
                color: "#333333",
                fontSize: 18,
                lineHeight: 4, // 设置行高为4，即间隔为4px
              },
            },
          },

---

完整代码：

提示：拆分的有点细直接贴全图

      let option_halfYearCollection = {
        color: ["#AC9EFF"],
        grid: {
          x: 2,
          y: 2,
          x2: 2,
          y2: 50,
        },
        xAxis: {
          type: "category",
          data: ["12月", "1月", "2月", "3月", "4月", "5月"],
          axisLabel: {
            color: "#666666",
            fontSize: 16,
            formatter: function (value, index) {
              return (
                value +
                "\n\n" +
                "{a|" +
                option_halfYearCollection.series[0].data[index] +
                "}"
              );
            },
            rich: {
              a: {
                color: "#333333",
                fontSize: 18,
                lineHeight: 4, // 设置行高为4，即间隔为4px
              },
            },
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
        },
        yAxis: {
          type: "value",
          max: function (value) {
            return value.max + 100; // 将最大值稍微增加一点，以确保竖线延伸到顶部
          },
          splitNumber: 3,
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330],
            type: "line",
            smooth: true,
            lineStyle: {
              width: 4, // 设置折线宽度为3，您可以根据需要调整宽度
            },
            areaStyle: {
              // 添加渐变阴影
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  // 设置渐变色
                  offset: 0,
                  color: "rgba(172,158,255,0.2)", // 开始颜色
                },
                {
                  offset: 1,
                  color: "rgba(172,158,255,0)", // 结束颜色
                },
              ]),
            },
            markLine: {
              symbol: "none", // 去除箭头
              label: { show: false }, // 去除标线上的label
              data: generateVerticalLines([820, 932, 901, 934, 1290, 1330]),
              lineStyle: {
                color: "#F5F5F5", // 设置竖线的颜色
                type: "solid", // 设置竖线的类型，可以是 'solid', 'dashed', 'dotted' 等
                width: 1, // 设置竖线的宽度
              },
            },
            z: 10, // 确保折线和点在竖线的前面
            symbol: "circle", // 使用圆形符号
            symbolSize: 10, // 调整符号大小
            itemStyle: {
              color: "#AC9EFF", // 中心点颜色
              borderColor: "#FFFFFF", // 外圈颜色
              borderWidth: 3, // 外圈宽度
            },
            emphasis: {
              itemStyle: {
                borderColor: "#FFFFFF", // 强调状态下的外圈颜色
                borderWidth: 3, // 强调状态下的外圈宽度
              },
            },
          },
        ],
      };

      function generateVerticalLines(data) {
        const markLines = [];
        for (let i = 0; i < data.length; i++) {
          markLines.push([
            { coord: [i, 0] },
            { coord: [i, Math.max(...data) + 100] }, // 使用数据的最大值+100，确保线条延伸到顶部
          ]);
        }
        return markLines;
      }
      
	halfYearCollection.setOption(option_halfYearCollection);

提示：按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入各种图表，图表后缀都为 Chart
import { BarChart, PieChart, LineChart, RadarChart, ScatterChart, PictorialBarChart } from "echarts/charts";  //这里我引用两个类型的图表
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent
} from "echarts/components";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    BarChart,
    PieChart,
    LineChart,
    RadarChart,
    ScatterChart,
    PictorialBarChart,
    CanvasRenderer,
    MarkLineComponent,
]);

export default echarts;