echarts圆形统计图与柱状图结合

1、先展示效果图

2、直接上代码，copy代码进行调试便会懂（导入echarts插件看之前的文章）

<template><div class="employee-container"><div class="top-content"><span class="top-title">整体健康态势</span></div><div class="statistical-chart"><div id="statistical-pie"></div><div id="statistical-bar"></div></div></div>
</template><script>import {getAntigenRatio,getDayOrWeek} from '@/api/echartsApi'export default {name: "OverallHealthSituation",data() {return {pieChartBox: null,barChartBox: null,// 已康复人数RecoveredQty: 0,RecoveredRatio: 0, // 已康复人数比例UninfectedQty: 0, // 未感染人数UninfectedRatio: 0, // 未感染人数比例UnrecoverableQty: 0, // 已感染未康复人数UnrecoverableRatio: 0, // 已感染未康复人数比例dayInfectedQty: 0, // 今日感染人数dayInfectedRatio: 0, // 今日感染人数比例dayRecoveryQty: 0, // 今日康复人数dayRecoveryRatio: 0, // 今日康复人数比例weekInfectedQty: 0, // 本周感染人数比例weekInfectedRatio: 0, // 本周感染人数比例weekRecoveryQty: 0, // 本周康复人数比例weekRecoveryRatio: 0, // 本周康复人数比例};},created() {this.getData()},mounted() {setTimeout(() => {this.pieEchart()this.barEchart()}, 500);},methods: {getData() {// 饼图数据getAntigenRatio().then(res => {this.RecoveredQty = res.data.RecoveredQtythis.RecoveredRatio = res.data.RecoveredRatiothis.UninfectedQty = res.data.UninfectedQtythis.UninfectedRatio = res.data.UninfectedRatiothis.UnrecoverableQty = res.data.UnrecoverableQtythis.UnrecoverableRatio = res.data.UnrecoverableRatio})// 柱形图数据getDayOrWeek().then(res => {res.data.forEach(item => {if (item.typeDescription == '天') {this.dayInfectedQty = item.infectedQty, // 今日感染人数this.dayInfectedRatio = item.infectedRatio, // 今日感染人数比例this.dayRecoveryQty = item.recoveryQty, // 今日康复人数this.dayRecoveryRatio = item.recoveryRatio // 今日康复人数比例} else if (item.typeDescription == '周') {this.weekInfectedQty = item.infectedQty, // 本周感染人数比例this.weekInfectedRatio = item.infectedRatio, // 本周感染人数比例this.weekRecoveryQty = item.recoveryQty, // 本周康复人数比例this.weekRecoveryRatio = item.recoveryRatio // 本周康复人数比例}});})},// 1、 饼图echart图表pieEchart() {let UninfectedRatio = this.UninfectedRatiolet RecoveredRatio = this.RecoveredRatiolet UnrecoverableRatio = this.UnrecoverableRatioif (this.pieChartBox != null && this.pieChartBox != "" && this.pieChartBox != undefined) {this.pieChartBox.dispose() //销毁}this.pieChartBox = this.$echarts.init(document.getElementById("statistical-pie"));const option = {tooltip: {trigger: 'item'},legend: {orient: 'vertical',bottom: 'bottom',// data: ['未感染人数', '已感染康复人数', '已感染未康复人数']},color: ['#77bc21', '#36ae37', '#ef2b2d'],series: [{name: '统计图',type: 'pie',radius: '50%',data: [{value: this.UninfectedQty,name: '未感染人数',label: {show: true,position: 'top',formatter: function (val) {// if (val.value == 0) {//   return ""// }let proportion = '未感染人数\n' + val.value + '(' + UninfectedRatio + '%' + ')'return proportion},}},{value: this.RecoveredQty,name: '已感染康复人数',label: {show: true,position: 'top',formatter: function (val) {// if (val.value == 0) {//   return ""// }let proportion = '已感染康复人数\n' + val.value + '(' + RecoveredRatio + '%' + ')'return proportion},}},{value: this.UnrecoverableQty,name: '已感染未康复人数',label: {show: true,position: 'top',formatter: function (val) {// if (val.value == 0) {//   return ""// }let proportion = '已感染未康复人数\n' + val.value + '(' + UnrecoverableRatio + '%' + ')'return proportion},}},],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};this.pieChartBox.setOption(option);// 根据页面大小自动响应图表大小// window.addEventListener("resize", function () {//   this.pieChartBox.resize();// });},// 2、柱形图echarts图表barEchart() {let dayInfectedQty = this.dayInfectedQty // 今日感染人数let dayInfectedRatio = this.dayInfectedRatio // 今日感染人数比例let dayRecoveryQty = this.dayRecoveryQty // 今日康复人数let dayRecoveryRatio = this.dayRecoveryRatio // 今日康复人数比例let weekInfectedQty = this.weekInfectedQty // 本周感染人数比例let weekInfectedRatio = this.weekInfectedRatio // 本周感染人数比例let weekRecoveryQty = this.weekRecoveryQty // 本周康复人数比例let weekRecoveryRatio = this.weekRecoveryRatio // 本周康复人数比例if (this.barChartBox != null && this.barChartBox != "" && this.barChartBox != undefined) {this.barChartBox.dispose() //销毁}this.barChartBox = this.$echarts.init(document.getElementById("statistical-bar"));const option = {xAxis: {type: 'category',data: ['今日感染人数', '今日康复人数', '本周感染人数', '本周康复人数']},yAxis: {type: 'value'},series: [{data: [{value: dayInfectedQty,itemStyle: {color: '#ef2b2d'},label: {show: true,position: 'top',formatter: function (val) {// if (val.value == 0) {//   return ""// }let proportion = val.value + '(' + dayInfectedRatio + '%' + ')'return proportion},}}, {value: dayRecoveryQty,itemStyle: {color: '#36ae37'},label: {show: true,position: 'top',formatter: function (val) {// if (val.value == 0) {//   return ""// }let proportion = val.value + '(' + dayRecoveryRatio + '%' + ')'return proportion},}}, {value: weekInfectedQty,itemStyle: {color: '#ef2b2d'},label: {show: true,position: 'top',formatter: function (val) {// if (val.value == 0) {//   return ""// }let proportion = val.value + '(' + weekInfectedRatio + '%' + ')'return proportion},}}, {value: weekRecoveryQty,itemStyle: {color: '#36ae37'},label: {show: true,position: 'top',formatter: function (val) {// if (val.value == 0) {//   return ""// }let proportion = val.value + '(' + weekRecoveryRatio + '%' + ')'return proportion},}}],type: 'bar'}]};this.barChartBox.setOption(option);// 根据页面大小自动响应图表大小// window.addEventListener("resize", function () {//   this.barChartBox.resize();// });},},};
</script><style lang="scss" scoped>.employee-container {width: 100%;height: 100%;padding-top: 20px;display: flex;flex-direction: column;align-items: center;.top-content {width: 100%;display: flex;.top-title {font-size: 24px;letter-spacing: 2px;margin-left: 30px;}}.statistical-chart {display: flex;justify-content: space-between;// align-items: center;width: 1120px;height: 700px;#statistical-pie {width: 560px;height: 560px;}#statistical-bar {margin-top: 86px;width: 560px;height: 420px;}}}
</style>

echarts圆形统计图与柱状图结合相关推荐

用ECharts生成统计图
用ECharts生成统计图这是我的HTML部分: <div class="layui-fluid" style="font-size:16px"> ...
绘制3D Echarts地图饼图堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
echarts 水桶注水式柱状图
Echarts 水桶注水式柱状图效果图代码: <html> <head><title></title> </head> <styl ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts如何显示多个柱形图_使用echarts画多维柱状图
前言在此之前,已经跟大家分享了如何使用echarts画折线图.双折线图.柱状图,今天跟大家分享一下使用echarts画多维柱状图. 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. ...
echarts柱状图与轴不重叠_用Echarts做堆积的柱状图，当横轴为“time”类型时，都是从0开始显示，而不是叠加，为什么会这样？...
echarts为Echarts2,在自己页面上做没有效果,因此在其例子 http://echarts.baidu.com/echa- 的基础上改为下面的代码(横轴改为时间类型) var stime=' ...
SpringBoot+Vue+Echarts实现双柱体柱状图
场景若依前后端分离版本地搭建开发环境并运行项目的教程: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建架构的基础上,实现使用 ...
echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.
今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...
可视化折线圆形统计图_统计图表的优雅变换:Altair|可视化系列06
Altair简介 Altair是一个强大且简明的声明式统计可视化Python库,它能够快速绘制出各种优雅可交互的统计图表. Altair[1]基于一个前端图表库Vega-Lite,因此绘图的成果也可以 ...

echarts圆形统计图与柱状图结合

echarts圆形统计图与柱状图结合相关推荐

最新文章

热门文章