echarts 3d柱状图水平

echarts 3d柱状图水平 ，利用象形图 左+主体+右 ，设置rgba颜色

象形图设置

 		//3d柱状图主体
      {
        type: "pictorialBar",
        data: data,
        barCategoryGap: "100%",
     	//柱状图位置
        symbolOffset: [0, -10],
     	//柱状图现状
        symbol: "path://M0 0 L32 0 L32 128 L0 128 Z",
        //层级
        z: 2,
        itemStyle: {
          color: "rgba(2, 182, 169, .6)",
        },
        barWidth: 21,
      },
      //右上
      {
       // 隐藏象形图
        show: true,
        //type 类型象形图
        type: "pictorialBar",
        barCategoryGap: "100%",
        symbolSize: [8, 20],
         //位置
        symbolOffset: [3, 0],
        symbol: (value) => {
          if (value) return "circle";
          else return "none";
        },
        z: 1,
        //柱状图背景色
        itemStyle: {
          color: "rgba(2, 182, 169, 1)",
        },
        symbolPosition: "end",
        //echarts数据
        data: data,
      },
      //左底
      {
        show: true,
        type: "pictorialBar",
        symbol: (value) => {
          if (value) return "circle";
          else return "none";
        },
        symbolSize: [8, 20],
        symbolOffset: [-3, 0],
        barCategoryGap: "100%",
        z: 1,
        itemStyle: {
          color: "rgba(2, 182, 169, 1)",
        },
        data: data,
      },

示例代码

// Echarts 3d柱状图水平展示
const echartsOption = () => {
  myChart.value.setOption({
    title: {
      text: "",
      x: "center",
      y: "center",
      textStyle: {
        fontSize: 14,
        color: "#4E5969",
      },
    },
    grid: {
      left: "3%",
      right: "0%",
      top: "0%",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      // 浮窗数据 根据业务需求进行展示数据
      formatter: function (parms) {
        if (parms[0].value == "0.01") {
          return parms[0].name + "：" + "0" + "个";
        } else {
          return parms[0].name + "：" + parms[0].value + "个";
        }
      },
    },
    xAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 14,
            color: "#1D2129",
          },
        },
        splitLine: {
          show: false,
        },
        data: rightdata.value,
        axisLabel: {
          color: "#1D2129",
          fontSize: 14,
          margin: 15,
          formatter: function (params) {
            var str = ""; // 最终拼接成的字符串
            var paramsLen = params.length; // 获取每项文字的个数
            var len = 8; // 每行能显示的字的个数（根据实际情况自己设置）
            var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
            if (paramsLen > len) {
              //大于设定的len就换行，不大于就不变化
              for (var i = 0; i < rowNumber; i++) {
                var temp = ""; // 表示每一次截取的字符串
                var start = i * len; // 开始截取的位置
                var end = start + len; // 结束截取的位置
                if (i == rowNumber - 1) {
                  // 最后一次不换行
                  temp = params.substring(start, paramsLen);
                } else {
                  // 每一次拼接字符串并换行
                  temp = params.substring(start, end) + "\n";
                }
                str += temp; // 最终拼成的字符串
              }
            } else {
              // 给新的字符串赋值
              str = params;
            }
            return "{a|" + `${str}` + "}"; //返回字符串
          },
          rich: {
            a: {
              height: 18, //设置行高
            },
          },
        },
      },
      {
        //右侧Y轴数据
        inverse: true, //如果数据数组倒置排序，加上此代码
        data: echartsData,
        axisLabel: {
          margin: 60,
          color: "#1D2129",
          fontSize: "14",
          align: "right",
          formatter: (value) => {
            return value == "0.01" ? "0" + "个" : value + "个";
          },
          rich: {
            name: {
              backgroundColor: "none",
              fontSize: 14,
            },
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          //编辑背景线条样式
          show: false,
        },
      },
    ],
    series: [
     //3d柱状图数据
      {
        type: "bar",
        barWidth: 21,
        showBackground: true,
        data: data,
        backgroundStyle: {
          color: "rgba(2, 182, 169, .2)",
        },
        itemStyle: {
          color: "rgba(255, 255, 255, 0)",
        },
      },
      //3d柱状图主体
      {
        type: "pictorialBar",
        data: data,
        barCategoryGap: "100%",
      //柱状图位置
        symbolOffset: [0, -10],
        symbol: "path://M0 0 L32 0 L32 128 L0 128 Z",
        z: 2,
        itemStyle: {
          color: "rgba(2, 182, 169, .6)",
        },
        barWidth: 21,
      },
      {
        show: true, // 隐藏象形图
        type: "pictorialBar",
        barCategoryGap: "100%",
        symbolSize: [8, 20],
         //[右端,0]
        symbolOffset: [3, 0],
        symbol: (value) => {
          if (value) return "circle";
          else return "none";
        },
        z: 1,
        itemStyle: {
          color: "rgba(2, 182, 169, 1)",
        },
        symbolPosition: "end",
        data: data,
      },
      {
        show: true, // 隐藏象形图
        type: "pictorialBar",
        symbol: (value) => {
          if (value) return "circle";
          else return "none";
        },
        symbolSize: [8, 20],
         //[左端为负,0]
        symbolOffset: [-3, 0],
        barCategoryGap: "100%",
        z: 1,
        itemStyle: {
          color: "rgba(2, 182, 169, 1)",
        },
        data: data,
      },
    ],
  });
};