使用echart绘制一个立体柱状图

效果：

最近在做大屏遇到了好多用echart绘图，话不多说上代码

      let Mycharts= echarts.init(
        document.getElementById("histogram")
      );

      let option = {
        title: {
          text: "个",
          position: "left",
          top: "-3%",
          textStyle: {
            color: "#41A6FC",
            fontSize: this.fontSizeRem(24),
          },
        },
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["xxx", "xxx", "xxx", "xxx"],
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#41A6FC",
              fontSize: this.fontSizeRem(24),
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              // 分割线颜色
              color: "#2D3C5C ",
              opacity: 0.3,
            },
          },
        },

        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#41A6FC",
              fontSize: this.fontSizeRem(24),
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 分割线颜色
              color: "#2D3C5C ",
              opacity: 0.3,
            },
          },
        },
        series: [
          柱子左面设置立体正方
          {
            // yAxisIndex: 0,
            data: [20, 25, 30, 35],
            type: "bar",
            barWidth: 9,
            itemStyle: {
              normal: {
                // //柱子左面重要的是color配置：线性渐变， 从上往下
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(0, 192, 238,0.8)",
                    },
                    {
                      offset: 0.8,
                      color: "rgb(0, 194, 239,0.2)",
                    },
                    {
                      offset: 1,
                      color: "rgb(0, 194, 239,0)",
                    },
                  ],
                },
              },
            },
          },
          // //柱子右面
          {
            yAxisIndex: 0,
            tooltip: {
              show: true,
              padding: 100,
              position: [10, "50%"],
              borderWidth: 100,
            },
            type: "bar",
            barWidth: 13,
            barCategoryGap: "60%",
            itemStyle: {
              normal: {
                // 重要的是color配置：线性渐变， 从上往下
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00CCF5 ",
                    },
                    {
                      offset: 0.8,
                      color: "rgb(4, 88, 115,0.8)",
                    },
                    {
                      offset: 1,
                      color: "rgb(4, 88, 115,0.6)",
                    },
                  ],
                },
                borderWidth: 0.3,
                borderColor: "rgba(76,182,251, 0.5)",
              },
            },
            data: [20, 25, 30, 35],
            // 间隔为0
            barGap: 0,
            z: 5,
          },
          // 这里是柱子的顶部
          {
            yAxisIndex: 0,
            z: 10,
            // type: "pictorialBar" 可以自定义图形或者使用内置选项
            type: "pictorialBar",
            symbolPosition: "end",
            data: [20, 25, 30, 35],
            symbol: "diamond",
            symbolOffset: [-0.5, -12.5],
            symbolRotate: 90,
            symbolSize: [8.5, 23.6],
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              formatter: function (data) {
                return data.value + "" + "站点";
              },
              textStyle: {
                //数值样式
                color: "#FFFFFF",
                fontSize: this.fontSizeRem(34),
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 0,

                color: "rgba(69,216,249, 1)",
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。

      Mycharts.setOption(option);

fontSizeRem是我自己封装的可自适应屏幕字体大小的函数

      fontSizeRem(size){
            const clientWidth = window.innerWidth || document.documentElement.clientWidth ||
              document.body.clientWidth;
            if (!clientWidth) return;
            let fontSize = clientWidth / 1920;//尺寸大小
            return size* fontSize;
          
      }