echarts柱状图

<template>
    <div class="content">
        <div>
            <div id="main" style="width:1105px;height:340px;margin-left: -20px;">
            </div>
        </div>

    </div>
</template>

<script>


export default {

    components: {

    },
    data() {
        return {
            option: "",
            xArr: [],
            yArr: [],
        }
    },
    props: {
        caterMainAreaStatisData: Array
    },
    watch: {
        caterMainAreaStatisData(n, o) {
            n.forEach(item => {
                this.xArr.push(item.deptName)
                this.yArr.push(item.drugEnterpriseCount)
            })
            this.getEcharts()
        }
    },

    methods: {
        getEcharts() {
            var myChart = this.$echarts.init(document.getElementById("main"));

            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;
                    // console.log(shape);
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - offsetX, shape.y - offsetY];
                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    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, xAxisPoint[1] - offsetY];
                    const c4 = [shape.x + offsetX, shape.y - offsetY];
                    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, shape.y - offsetY]; //右点
                    const c3 = [shape.x, shape.y - offsetX];
                    const c4 = [shape.x - offsetX, shape.y - offsetY];
                    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 VALUE = this.yArr;

            this.option = {
                // backgroundColor: '#012366',
                backgroundColor: '#fff',
                title: {
                    text: '各区县企业数量',
                    textStyle: { //设置主标题风格
                        Color: 'green',//设置主标题字体颜⾊
                        fontStyle: '',//主标题⽂字风格

                    },
                    padding: 20
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    formatter: function (params, ticket, callback) {
                        const item = params[1];
                        return item.name + ' : ' + item.value;
                    },
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '27%',
                    bottom: '10%',
                    containLabel: true,
                },
                dataZoom: [
                    //滑动条
                    {
                        xAxisIndex: 0, //这里是从X轴的0刻度开始

                        show: true, //是否显示滑动条，不影响使用

                        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件

                        startValue: 0, // 从头开始。

                        endValue: 7, // 一次性展示6个。

                    },

                ],
                xAxis: {
                    type: 'category',
                    data: this.xArr,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            color: '#2B7BD6',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 14,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            color: '#2B7BD6',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#153D7D',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 14,
                    },
                    // boundaryGap: ['20%', '20%'],
                },
                series: [
                    {
                        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 this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: '#33BCEB',
                                                },
                                                {
                                                    offset: 1,
                                                    color: '#337CEB',
                                                },
                                            ]),
                                        },
                                    },
                                    {
                                        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: '#28A2CE',
                                                },
                                                {
                                                    offset: 1,
                                                    color: '#1A57B7',
                                                },
                                            ]),
                                        },
                                    },
                                    {
                                        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: '#43C4F1',
                                                },
                                                {
                                                    offset: 1,
                                                    color: '#28A2CE',
                                                },
                                            ]),
                                        },
                                    },
                                ],
                            };
                        },
                        data: VALUE,
                    },
                    {
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: (e) => {
                                    return e.value + '家';
                                    /*console.log(e)
                                    switch (e.name) {
                                        case '1001':
                                            return e.value;
                                        case '1002':
                                            return VALUE[1];
                                        case '1003':
                                            return VALUE[2];
                                    }*/
                                },
                                fontSize: 16,
                                color: '#43C4F1',
                                offset: [0, -25],
                            },
                        },
                        itemStyle: {
                            color: 'transparent',
                        },
                        tooltip: {},
                        data: VALUE,
                    },
                ],
            };

            // myChart.setOption(this.option);
            setInterval(() => {
                // 每次向后滚动一个，最后一个从头开始。
                // console.log(option.dataZoom[0].endValue);
                // console.log("---"+KSMC.length);
                var option = this.option;
                if (option.dataZoom[0].endValue == this.yArr.length) {
                    option.dataZoom[0].endValue = 6;
                    option.dataZoom[0].startValue = 0;
                } else {
                    option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                    option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                }
                myChart.setOption(option);
            }, 1000);
        }
    }

}
</script>

<style lang="scss" scoped>

</style>