echarts3D立体柱状图

效果图如下:

直接上代码:

   var chartDom = document.getElementById("charts2");   //html元素
      var myChart = echarts.init(chartDom);
      var option;
      option = {
         title: [{
          text: `单位/kg`,
          textStyle: {
            color: "#bfc6cc",
            fontSize: 14,
            fontFamily: "Microsoft-YaHei-Regular, Microsoft-YaHei",
          },
          left: "5",
          top: "30",
        },
       {
          text: `只`,
          textStyle: {
            color: "#bfc6cc",
            fontSize: 14,
            fontFamily: "Microsoft-YaHei-Regular, Microsoft-YaHei",
          },
          right: "19",
          top: "30",
        }],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#fff",
            },
          },
        },
        legend: {
          data: ["鹅肝量", "宰鹅量"],
          top: "10",
          right: "10",
          itemStyle: {
            borderColor: "#fff",
            textColor: "#fff",
          },
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              //这是x轴文字颜色
              lineStyle: {
                color: "#bfc6cc",
              },
            },
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        series: [
                  {
                    yAxisIndex: 0,
            name: "鹅肝量",
            type: "bar",
            barWidth: 9,
         data: [200, 300, 400, 460, 520, 620],
            itemStyle: {
              //柱子左面
              normal: {
                // 重要的是color配置：线性渐变， 从上往下
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(123, 200, 255, .5)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(53, 157, 245, 1)",
                    },
                  ],
                },
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            yAxisIndex: 0,
            name: "鹅肝量",
            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: "#6CB5EB",
                    },
                    {
                      offset: 1,
                      color: "rgba(9,36,83,0.57)",
                    },
                  ],
                },
                borderWidth: 0.3,
                borderColor: "rgba(9, 36, 83, 0.5)",
              },
            },
         data: [200, 300, 400, 460, 520, 620],
            // 间隔为0
            barGap: 0,
            z: 5,
          },
          {
            yAxisIndex: 0,
            z: 10,
            name: "鹅肝量",
            // 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
            type: "pictorialBar",
            symbolPosition: "end",
           data: [200, 300, 400, 460, 520, 620],
            symbol: "diamond",
            symbolOffset: [-0.5, -12.5],
            symbolRotate: 90,
            symbolSize: [8.5, 23.6],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: "rgba(124, 201, 250, 1)",
              },
            },
            tooltip: {
              show: false,
            },
          },
          // {
          //   yAxisIndex: 0,
          //   name: "鹅肝量",
          //   type: "bar",
          //   // tooltip: {
          //   //   valueFormatter: function (value) {
          //   //     return value + ' ml';
          //   //   }
          //   // },
          //   itemStyle: {
          //     color: "#39d5fc",
          //   },
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: "rgba(180, 180, 180, 0.2)",
          //   },
          //   data: [200, 300, 400, 460, 520, 620],
          // },
          {
            yAxisIndex: 1,
            name: "宰鹅量",
            type: "line",
            smooth: true,
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' ml';
            //   }
            // },
            itemStyle: {
              color: "#39d5fc",
            },
            data: [2600, 3500, 3800, 4900, 5601, 7600],
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: 'Precipitation',
            axisLine: {
              //这是x轴文字颜色
              lineStyle: {
                color: "#bfc6cc",
              },
            },
            min: 0,
            max: 800,
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
          {
            type: "value",
            // name: 'Precipitation',
            axisLine: {
              //这是x轴文字颜色
              lineStyle: {
                color: "#bfc6cc",
              },
            },
            min: 0,
            max: 8000,
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
      };

      option && myChart.setOption(option);