3D柱状图

<!-- 一.在html的模板下写一个div容器承载echarts图表 -->
<template>
    <div id="main" style="height:800px; width:600px;"></div>
</template>

<script>

 export default {

mounted() {

this.echarts();//初始化调用echarts图表

}
method:{
eacharts() {

//
        const CubeLeft = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x - 9, shape.y - 9]
            const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
            const c3 = [xAxisPoint[0], xAxisPoint[1]]
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
          }
        })
        const CubeRight = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [xAxisPoint[0], xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
            const c4 = [shape.x + 18, shape.y - 9]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
          }
        })
        const CubeTop = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x + 18, shape.y - 9]
            const c3 = [shape.x + 9, shape.y - 18]
            const c4 = [shape.x - 9, shape.y - 9]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
          }
        })
        echarts.graphic.registerShape('CubeLeft', CubeLeft)
        echarts.graphic.registerShape('CubeRight', CubeRight)
        echarts.graphic.registerShape('CubeTop', CubeTop)
        const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
        const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表容器
        let option = {
          backgroundColor: "#010d3a",
          //标题
          title: {
            text: '3D柱状图',
            top: 32,
            right: 18,
            //x: 'center',//横向居中
            textStyle: { //标题文字样式
              color: '#00F6FF',
              fontSize: 24
            }
          },
          //四边间距
          grid: {
            left: 5, //组件离容器左侧的距离
            right: 5, //组件离容器右侧的距离
            bottom: 25, //组件离容器下侧的距离
            top: 32, //组件离容器上侧的距离
            containLabel: true //区域是否包含坐标轴的刻度标签
          },
          //x轴
          xAxis: {
            type: 'category', //坐标轴类型
            //type: 'value' //数值轴， 适用于连续数据。
            //type:'category'//类目轴， 适用于离散的类目数据， 为该类型时必须通过 data 设置类目数据。
            //'time' // 时间轴， 适用于连续的时序数据， 与数值轴相比时间轴带有时间的格式化， 在刻度计算上也有所不同， 例如会根据跨度的范围来决定使用月、 星期、 日、 小时范围的刻度。
            data: ['德州', '德城区', '陵城区', '禹城市', '乐陵市', '临邑县',
              '平原县', '夏津县', '武城县', '庆云县', '宁津县', '齐河县'
            ],
            //x轴坐标刻度线
            axisLine: { 
              show: true,
              lineStyle: {
                color: 'white'
              }
            },
            // offset: 20,
            //x轴坐标刻度线
            axisTick: {
              show: false,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#7DFFFD'
              }
            },
            //x轴坐标文字
            axisLabel: {
              fontSize: 10
            }
          },
          //y轴
          yAxis: {
            type: 'value', //坐标轴类型
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            },
            //分割线
            splitLine: {
              show: false 
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 16
            },
            //图中与坐标轴正交的方向的边界间隙
            boundaryGap: ['10%', '10%']
          },
          //配置项
          series: [{
            type: 'custom',
            renderItem: function (params, api) {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [{
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: 'rgba(7,29,97,.6)'
                  }
                }, {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: 'rgba(10,35,108,.7)'
                  }
                }, {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: 'rgba(11,42,106,.8)'
                  }
                }]
              }
            },
            data: MAX
          }, {
            type: 'custom',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [{
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3B80E2'
                      },
                      {
                        offset: 1,
                        color: '#49BEE5'
                      }
                    ])
                  }
                }, {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3B80E2'
                      },
                      {
                        offset: 1,
                        color: '#49BEE5'
                      }
                    ])
                  }
                }, {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3B80E2'
                      },
                      {
                        offset: 1,
                        color: '#49BEE5'
                      }
                    ])
                  }
                }]
              }
            },
            data: VALUE
          }, {
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: (e) => {
                  switch (e.name) {
                    case '10kV线路':
                      return VALUE[0]
                    case '公用配变':
                      return VALUE[1]
                    case '35kV主变':
                      return VALUE[2]
                    case '水':

                  }
                },
                fontSize: 16,
                color: '#fff',
                offset: [4, -25]
              }
            },
            itemStyle: {
              color: 'transparent'
            },
            data: MAX
          }]
        }

        option && myChart.setOption(option);
        this.resizeBarFun = function () {
          console.log("main.clientWidth:", document.getElementById('main').clientWidth)
          console.log("main.clientHeight:", document.getElementById('main').clientHeight)
          myChart.resize({
            width: document.getElementById('main').clientWidth, //获取父级的宽
            height: document.getElementById('main').clientHeight //获取父级的高
          });
        };
        window.addEventListener('resize', this.resizeBarFun);
      },
}

}
</script>