vue中用echarts5实现三角锥形重叠柱状图

项目场景：

项目设计需要实现以下效果的锥形柱状图：需要实现一下几个功能
1.实现锥形柱状图重叠且柱状图颜色渐变
2.点击日月年进行时间切换，且文字颜色渐变
3.利用rem实线根据不同分辨率进行适配
4.y轴不能遮挡锥形柱状图
5.根据设计师提供的svg得到自己的锥形svg

解决方案：

1.怎么找到自己设计图中特定的svg：下载后缀名为svg的文件，找到d路径，在echarts中添加path://+对应的d路径，就可以得到你自己的锥形柱状图形状

2.实现文字颜色左右渐变效果代码如下：

text-shadow: 14px 17px 13px rgba(21, 215, 178, 0.06);
background: linear-gradient(to right, #D1FDFF, #0FB3FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

3.svg基础知识的学习，链接如下：
https://www.runoob.com/svg/svg-path.html

4.实现rem适配:

//设置setRem函数，在echarts函数中调用它，这里是用的3840，根据你们自己设计图的长度进行设置
 function setRem(fontSize) {
    const scale = document.documentElement.clientWidth / 3840;

    return fontSize * Math.min(scale, 2);
  }

5.提示：详细代码如下：

export default (dom, xData, yData) => {
  function setRem(fontSize) {
    const scale = document.documentElement.clientWidth / 3840;

    return fontSize * Math.min(scale, 2);
  }

  //引入基本模板
  let echarts = require("echarts");
  var myChart = echarts.init(document.getElementById(dom));
  function init() {
    var option = {
      grid: {
        top: 30,
        bottom: "8%",
      },
      xAxis: [
        {
          data: xData,
          axisLabel: {
            color: "#fff",
            fontSize: setRem(24),
            margin: setRem(20),
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          type: "category",
          // boundaryGap: false // 显示间距设置为false
        },
      ],
      yAxis: [
        {
          // name: "(个)",
          // nameTextStyle: {
          //   color: "#8CB5E2",
          // },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#182450",
            },
          },
          axisLabel: {
            color: "#fff",
            //重叠后遮挡y轴，降y轴文字margin一段距离
            margin: setRem(60),
            fontSize: setRem(24),
          },
        },
      ],
      // 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
      dataZoom: [
        {
          type: "inside",
          minValueSpan: 6, // 最小展示数
          start: 0, // 开始展示位置（默认）
          end: 5, // 结束展示位置 （默认）
        },
      ],
      series: [
        {
          name: "hill",
          // 象柱形图
          type: "pictorialBar",
          // 同一系列的柱间距离，调整这个值，改变重叠面积大小
          barCategoryGap: "-60%",

          // 自定义svg 图标 (三角锥形的关键，可以找设计师提供对应的svg
          symbol:"path://M2183.68,1448.43c20.57,122.46,82,202.28,82,202.28h-165s61.42-79.82,82-202.28v-6.18c0.16,1.04.33,2.06,0.5,3.1,0.17-1.04.34-2.06,0.5-3.1v6.18Z",
          // 默认样式
          itemStyle: {
            label: {
              show: false,
            },

            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向：从上到下
              [
                { offset: 0, color: "rgba(13, 43, 121, 0.58)" }, // 柱图渐变色
                { offset: 1, color: "rgba(25, 95, 255, 0.26)" }, // 柱图渐变色
              ]
            ),
          },
          // 鼠标滑过样式
          emphasis: {
            label: {
              show: true,
              position: "top",
              color: "#12DCFF",
              fontSize: setRem(35),
              fontFamily: "AlibabaPuHuiTiH",
            },
            itemStyle: {
              borderColor: "#17cdfa",
              borderWidth: 2,
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 150, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 246, 255, 1)",
                  },
                ],
              },
            },
          },
          data: yData,
          z: 10,
        },
      ],
    };

    // 清空图表
    myChart.clear();
    // 绘制图表
    myChart.setOption(option, true);
  }

  init();

  function resizeMax() {
    if (document.documentElement.clientWidth < 1350) {
      init();
    }
  }

  // resize
  window.addEventListener("resize", resizeMax);
};