echart仿3D柱状图 echart渐变柱状图

echart圆柱体 仿3D柱状图

实现：

点击图例事件：

this.mychart.on("legendselectchanged", {}, function (obj) {
        let charOption = _.cloneDeep(this.option);
        let selected = obj.selected;
        let doubleSelect =
          selected["系列1"] && selected["系列2"];
        for (let d of charOption.series) {
          if (d.name != "" && d.type == "pictorialBar") {
            if (doubleSelect) {
              d.symbolOffset = _.cloneDeep(d.symbolOffsetBack);
            } else {
              if (selected[d.name]) {
                d.symbolOffset[0] = 0;
              }
            }
          }
        }
        charOption.legend.selected = _.cloneDeep(selected);
        this.option= _.cloneDeep(charOption);
        if(this.mychart) {
        	this.mychart.clear()
        	this.mychart.setOption(this.option)
      	}
      });

配置项：

option = {
    backgroundColor: '#000',
    tooltip: {
    backgroundColor: "rgba(50, 50, 50, 0.5)",
    borderColor: "rgba(50, 50, 50, 0.7)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
      fontSize: 26,
    },
    axisPointer: {
      type: "shadow",
    }
  },
  grid: {
    left: "2%",
    right: "2%",
    bottom: "5%",
    top: "20%",
    containLabel: true,
  },
  legend: {
    data: [
      { name: "系列1", icon: "circle" },
      { name: "系列2", icon: "circle" },
      { name: "系列3" },
    ],
    itemHeight: 16,
    itemGap: 50,
    right: 10,
    textStyle: {
      color: "#fff",
      fontSize: 26,
    },
  },
  xAxis: {
    type: "category",
    data: [
      "A",
      "B",
      "C",
      "D",
      "E"
    ],
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 26,
      },
      interval: 0,
      margin: 20,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      type: "value",
      nameTextStyle: {
        color: "#fff",
        align: "left",
        fontSize: 26,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#22f6cc",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 26,
      },
    },
    {
      name: "单位：%",
      type: "value",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      nameTextStyle: { fontSize: 26, color: "#fff" },
      axisLabel: {
        color: "#fff",
        fontSize: 26,
      },
    },
  ],
  series: [
    {
      //顶
      name: "系列1",
      type: "pictorialBar",
      symbolSize: [40, 11],
      symbolOffset: [-26, -6],
      symbolOffsetBack: [-26, -6],
      symbolPosition: "end",
      z: 12,
      color: "#10bd1e",
      tooltip: {
        show: false,
      },
      data: [30, 10, 10, 10, 10],
    },
    {
      //底
      name: "系列1",
      type: "pictorialBar",
      symbolSize: [40, 11],
      symbolOffset: [-26, 6],
      symbolOffsetBack: [-26, 6],
      z: 12,
      color: "#49ffba",
      tooltip: {
        show: false,
      },
      data: [1, 1, 1, 1, 1,],
    },
    {
      //柱体
      name: "系列1",
      type: "bar",
      z: 10,
      barWidth: 40,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: "linear",
          global: false,
          colorStops: [
            {
              offset: 0,
              color: "#50fcbf",
            },
            {
              offset: 1,
              color: "#17c05e",
            },
          ],
        },
      },
      data: [30, 10, 10, 10, 10],
    },
    {
      //顶
      name: "系列2",
      type: "pictorialBar",
      symbolSize: [40, 11],
      symbolOffset: [26, -6],
      symbolOffsetBack: [26, -6],
      symbolPosition: "end",
      z: 12,
      color: "#dfa827",
      tooltip: {
        show: false,
      },
      data: [10, 10, 10, 10, 10],
    },
    {
      //底
      name: "系列2",
      type: "pictorialBar",
      symbolSize: [40, 11],
      symbolOffset: [26, 6],
      symbolOffsetBack: [26, 6],
      color: "#dfa827",
      z: 12,
      tooltip: {
        show: false,
      },
      data: [1, 1, 1, 1, 1],
    },
    {
      //柱体
      name: "系列2",
      type: "bar",
      barWidth: 40,
      z: 10,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: "linear",
          global: false,
          colorStops: [
            {
              offset: 0,
              color: "#fadc95",
            },
            {
              offset: 1,
              color: "#dba939",
            },
          ],
        },
      },
      data: [10, 10, 10, 10,10],
    },
    {
      name: "系列3",
      type: "line",
      color: "#24ffd3",
      yAxisIndex: 1,
      symbolSize: 0,
      z: 99,
      symbol: "circle",
      lineStyle: {
        width: 5,
      },
      data: [40, 10, 10, 10, 10,],
    },
  ],
};