Echarts立体柱状图

1.npm安装echarts

npm install echarts --save

2.全局引入echarts

main.js文件中：

import * as echarts from 'echarts';
Vue.prototype.$echarts =  echarts

3.新建组件vue文件   --   echartsPage.vue

<template>
    <div ref="echartsCanvas" class="echarts-style"></div>
</template>

<script>
    export default {
        name: 'Search',
        data() {
            return {
                seriesData:[],
                xAxisData:[],
            };
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.seriesData = [33,14,14,8,8,7,6,4,4,3,2,1,10]
                this.xAxisData =  ['影视', '高端装备', '计算机', '总集成', '3d打印','影1视', '高端1装备', '计算1机', '总集1成', '3d打1印','计算机1', '总集成1', '13d打印']
                const offsetX = 20
                const offsetY = 10
                // 绘制左侧面
                const CubeLeft = this.$echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function (ctx, shape) {
                        // 会canvas的应该都能看得懂，shape是从custom传入的
                        const xAxisPoint = shape.xAxisPoint
                        const c0 = [shape.x, shape.y]  //右下
                        const c1 = [shape.x - offsetX-offsetY, shape.y ]  //左上
                        const c2 = [xAxisPoint[0] - offsetX-offsetY, xAxisPoint[1] ]  //左下
                        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 = this.$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] + offsetX- offsetY, xAxisPoint[1] - offsetY- offsetY+3]
                        const c4 = [shape.x + offsetX - offsetY, shape.y - offsetY- offsetY+3]
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    }
                })
                // 绘制顶面
                const CubeTop = this.$echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function (ctx, shape) {
                        const c1 = [shape.x, shape.y]
                        const c2 = [shape.x + offsetX- offsetY, shape.y - offsetY- offsetY+3] // 右点
                        const c3 = [shape.x- offsetY- offsetY, shape.y - offsetX+3]
                        const c4 =[shape.x- offsetX- offsetY, shape.y]
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    }
                })
                // 注册三个面图形
                this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)
                this.$echarts.graphic.registerShape('CubeRight', CubeRight)
                this.$echarts.graphic.registerShape('CubeTop', CubeTop)

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '10%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: this.xAxisData ,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: '#000000'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 10
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 2,
                                color: '#000000'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#2A353F',
                                type: 'dashed'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 12
                        }
                    },
                    dataZoom: [{
                        type: 'slider',
                        show: false,
                        realtime: true,
                        startValue: 0,
                        endValue: 12, // 初始显示index0-30的数据,可根据你的数据量设置
                        filterMode: 'none',
                    },],
                    series: [
                        {
                            type: 'custom',
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)])
                                return {
                                    type: 'group',
                                    x: 0,
                                    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 this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#8DC21F'
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#00A1A3'
                                                    }
                                                ])
                                            }
                                        },
                                        {
                                            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 this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#70A600'
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#027E80'
                                                    }
                                                ])
                                            }
                                        },
                                        {
                                            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 this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#8DC21F'
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#70A600'
                                                    }
                                                ])
                                            }
                                        }
                                    ]
                                }
                            },
                            data: this.seriesData
                        }
                    ]
                }

                let  myChart = this.$echarts.init(this.$refs.echartsCanvas);

                myChart.setOption(option);
            }
        }
    }
</script>

<style lang="less" scoped>
  .echarts-style{
      width: 1000px;
      height: 400px;
  }
</style>