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) {