效果如下

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

<!--订单分类占比图-->
<template><div class="com-container"><div class="com-chart" ref="hot_ref"></div><span class="iconfont arr-left" @click="toLeft" :style="comStyle"></span><span class="iconfont arr-right"@click="toRight" :style="comStyle"></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

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

数据可视化项目---订单分类占比图相关推荐

数据可视化项目【一】基础配置
系列文章目录第一章:数据可视化项目基础配置第二章:数据可视化项目Echarts图表模块第三章:数据可视化项目数据切换效果模块文章目录系列文章目录项目介绍: 项目展示: 技术分析: 基础布局 ...
数据可视化项目知识点以及代码演示
DAY01-可视化项目项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引入 ...
数据可视化项目【三】数据切换效果模块
系列文章目录第一章:数据可视化项目基础配置第二章:数据可视化项目Echarts图表模块第三章:数据可视化项目数据切换效果模块文章目录系列文章目录监控区域-效果切换功能: 动画功能: 销售 ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
谁是披头士乐队最佳创作者？看看这份数据可视化项目
披头士乐队是1960年在利物浦组建的一支英国摇滚乐队,被广泛承认为史上最伟大.最有影响力的摇滚乐队.今天分享的数据可视化项目展示了该乐队专辑中歌曲的创作者数据. The Beatles were an ...
ECharts数据可视化项目-大屏数据可视化【持续更新中】
ECharts数据可视化项目-大屏数据可视化[持续更新中] 文章目录 ECharts数据可视化项目-大屏数据可视化[持续更新中] 一. 数据可视化ECharts使用二.技术栈三.数据可视化四.可 ...
数据可视化项目落地复盘
近期落地了工作中的数据可视化项目,今天原创复盘下这中间的历程. 在复盘前,首先一个问题:数据可视化到底是不是一个需求? 提出这个问题的原因: 数据可视化只是让数据更直观,是数据的另一种展现形式.这种形 ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
丽水数据可视化设计价格_大数据可视化项目报价模板
项目系统需求需求内容单价数量单位合计 1 系统方案设计 1. 整合分析项目需求和特性,制作需求文档: 进行软件产品界面(信息架构.操作逻辑.功能.用户体验等) 的交互策划,并输出产 ...

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

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

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

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

数据可视化项目---订单分类占比图相关推荐

最新文章

热门文章

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

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

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

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

数据可视化项目---订单分类占比图相关推荐

最新文章

热门文章

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

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

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