数据可视化项目---订单分类占比图

效果如下

订单分类占比图—组件代码

<!--订单分类占比图-->
<template>
    <div class="com-container">
        <div class="com-chart" ref="hot_ref"></div>
        <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
        <span class="iconfont arr-right"@click="toRight" :style="comStyle">&#xe6ed;</span>
        <span class="cat-name" :style="comStyle">{{catName}}</span>
    </div>
</template>

<script>
    export default {
        name: "Hot",
        data() {
            return {
                chartInstance:null,
                allData:null,
                currentIndex:0,//当前所展示的占比图的数据
                titleFontSize:0,
            }
        },
        computed:{
            catName(){
                if (this.allData==null){
                    return ''
                }else {
                    return this.allData[this.currentIndex].name
                }
            },
            comStyle() {
                return {
                    fontSize:this.titleFontSize+'px'
                };
            }
        },
        mounted(){
            this.initChart();
            this.getData();
            window.addEventListener('resize',this.screenAdapter);
            //在页面加载完成忠厚，主动进行屏幕的适配
            this.screenAdapter();
        },
        destroy(){
            //在组件销毁的时候，将窗口监听器取消掉
            window.removeEventListener('resize',this.screenAdapter);
        },
        methods: {
            //初始化echartInstance对象
            initChart(){
                this.chartInstance=this.echarts.init(this.$refs.hot_ref,'chalk');
                const initOption={
                    title:{
                        text:'┃ 订单分类占比',
                        left:20,
                        top:20,
                    },
                    legend:{
                        top:'15%',
                        icon:'circle',
                    },
                    tooltip:{
                        show:true,
                        formatter:(arg)=>{
                            if (this.currentIndex==0){
                                return arg.name+":00点 : "+arg.percent+" %"
                            }
                            return arg.name+" : "+arg.percent+" %"
                        }
                    },
                    series:[
                        {
                            type:'pie',
                            label:{
                                show:false
                            },
                            emphasis:{
                                label:{
                                    show:true
                                },
                                labelLine:{
                                    show:false
                                }
                            }
                        }
                    ]
                };
                this.chartInstance.setOption(initOption);
            },
            //获取服务器数据
            async getData(){
                await this.axios.get("/chart/hot").then(res=>{
                    this.allData=res.data;
                });
                this.updateChart();
            },
            //处理数据
            updateChart(){
                const legendData=this.allData[this.currentIndex].children.map(item=>{
                    return item.name;
                });
                const seriesData=this.allData[this.currentIndex].children.map(item=>{
                   return{
                       name:item.name,
                       value:item.value,
                   }
                });
                const dataOption={
                    legend:{
                        data:legendData,
                    },
                    series:[
                        {
                            data:seriesData
                        }
                    ]
                };
                this.chartInstance.setOption(dataOption);
            },
            //当浏览器的大小发生变化的时候，调用该方法，来完成屏幕的适配
            screenAdapter(){
                this.titleFontSize=this.$refs.hot_ref.offsetWidth/100*3.6;
                //和分辨率大小相关的配置项
                const adapterOption={
                    title:{
                        textStyle:{
                            fontSize:this.titleFontSize
                        }
                    },
                    legend:{
                        itemWidth:this.titleFontSize,
                        itemHeight:this.titleFontSize,
                        itemGap:this.titleFontSize/2,
                        textStyle:{
                            fontSize:this.titleFontSize/2
                        }
                    },
                    series:[
                        {
                            radius:this.titleFontSize * 4.5,
                            center:['50%','60%']
                        }
                    ]
                };
                this.chartInstance.setOption(adapterOption);
                //手动的调用图表的resize方法
                this.chartInstance.resize();
            },
            toLeft(){
                this.currentIndex--;
                if (this.currentIndex < 0) {
                    this.currentIndex=this.allData.length-1;
                }
                this.updateChart();
            },
            toRight(){
                this.currentIndex++;
                if (this.currentIndex > this.allData.length-1) {
                    this.currentIndex=0;
                }
                this.updateChart();
            }
        }
    }

</script>

<style scoped>
    .com-container{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    .com-chart{
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
    }
    .arr-left{
        position: absolute;
        left: 10%;
        top:50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: white;
    }
    .arr-right{
        position: absolute;
        right: 10%;
        top:50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: white;
    }
    .cat-name{
        position: absolute;
        left: 80%;
        bottom: 20px;
        color: white;
    }
</style>

订单分类占比图—接口数据

[{"name":"出发时间","children":[{"name":"8","value":"82"},{"name":"11","value":"802"},{"name":"17","value":"215"},{"name":"21","value":"6"},{"name":"22","value":"3"},{"name":"23","value":"12"}]},{"name":"地区销量","children":[{"name":"周口中心站","value":"14"},{"name":"周口市中心站","value":"218"},{"name":"周口市淮阳","value":"230"},{"name":"周口市项城","value":"85"},{"name":"周口火车站","value":"567"},{"name":"周口项城","value":"6"}]},{"name":"售票员业绩","children":[{"name":"刘总","value":"1105"},{"name":"刘师傅","value":"6"},{"name":"小陈","value":"5"},{"name":"小丁","value":"4"}]},{"name":"客源分析","children":[{"name":"周口中心站","value":"204"},{"name":"河南交通学院","value":"233"},{"name":"郑州工商学院","value":"470"},{"name":"郑州旅游学院","value":"213"}]}]

订单分类占比图—设计流程

参考https://blog.csdn.net/liudachu/article/details/109273102

下一篇：数据可视化项目—车辆实时信息图