Echarts塔状图

<template>
    <div>
        <div class="large-left-img">
            <div class="large-title">
                处置统计
            </div>
            <div class="note">单位：人</div>
            <div class="first-chart" id="myChart">
            </div>
        </div>       
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import { getDictByTypeValue } from "@/api/sys/busi-dict";
    export default {
        props: {
            statisticsData: {
                type: Object,
            },
        },
        data() {
            return {
                emergency: [],
                taskStatistics: [],            
                lableList: [],//文字数组，X轴数据
                numList: [] //Data数据
            }
        },
        mounted() {
            console.log(this.statisticsData)
            //处置统计
            if (this.statisticsData.disposalStatistics) {
                let wayLable = []
                let way = Object.keys(this.statisticsData.disposalStatistics[0]) //任务统计lable
                this.numList = Object.values(this.statisticsData.disposalStatistics[0])//任务统计数值
                getDictByTypeValue('handling-way').then(res => {
                    console.log(res.data.data, way, 'res')
                    way.forEach((v) => {
                        res.data.data.forEach(e => {
                            if (v === e.dictDataValue) {
                                wayLable.push(e.dictDataLabel)
                            }
                        })
                    })
                    console.log(wayLable, 'wayLable')
                    this.lableList = [...wayLable];
                    console.log(this.lableList, 'this.lableList')              
                    this.solvingMethodList = res.data.data
                    console.log(this.solvingMethodList, 'handling-way')
                    this.drawLine(wayLable);
                })
            }   
        },
       
        methods: {
            //处置统计
            drawLine(dataList) {
                var chartDom = document.getElementById('myChart');
                var myChart = echarts.init(chartDom);
                var option;
                var xdata = this.lableList;
                var data = this.numList;
                option = {
                    backgroundColor: "rgba(2, 12, 44, 0.2)", //背景色
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: 'shadow'
                        },
                        //提示信息
                        formatter: function (params) {
                            return (
                                '提示'
                            );
                        }
                    },
                    grid: {
                        left: "4%",
                        right: "4%",
                        bottom: "3%",
                        top: "15%",
                        containLabel: true
                    },
                    xAxis: {
                        data: dataList || [],
                        triggerEvent: true,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {//更改字体
                            show: true,
                            rotate: 0,
                            interval: 0,
                            textStyle: {
                                fontSize: 24,
                                color: "#CAD5E9",
                            }
                        }
                    },
                    yAxis: {
                        minInterval: 1,
                        boundaryGap: [0, 0.1],
                        // min: 0,
                        // max: 80,
                        // splitnumber: 20,
                        triggerEvent: true,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#CFF0FD",
                                fontSize: 24
                            }
                        }
                    },
                    series: [{
                        name: "订单数",
                        barMinHeight: 10,
                        type: "pictorialBar",
                        barCategoryGap: "60%",
                        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
                        itemStyle: {
                            normal: {
                                //渐变色
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(83, 139, 241, 1)"
                                },
                                {
                                    offset: 0.5,
                                    color: "rgba(83, 139, 241, 0.8)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(83, 139, 241, 0.3)"
                                }
                                ])
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                textStyle: {
                                    color: 'rgba(207, 240, 253, 1)',
                                    fontSize: 31
                                }
                            }
                        },
                        data: data,
                        z: 10
                    },
                    ]
                }

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

<style scoped lang="scss">
    .note {
        margin-top: 40px;
        font-size: 30px;
        margin-left: 8px;
        color: rgba(202, 213, 233, 1);
        font-size: 24px;
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
    }

    .first-chart {
        height: 700px;
        margin-top: 30px;

    }
</style>

参考案例点击跳转