vue+echarts饼状图中间计算总数

饼状图中间显示总数值，效果图如下：

dom结构：

<div class="chart1" ref="chart1" style="width: 100%; height: 90%"></div>

主要代码：

// 数据const datas = [{ value: 40, name: "国家级" },{ value: 12, name: "省   级" },{ value: 4, name: "市   级" },{ value: 2, name: "区   级" },];// 定义一个总合变量let dataNum = 0;// 把每个值加在一起赋值给dataNumfor (var i = 0; i < datas.length; i++) {dataNum += datas[i].value;}

然后在option的title赋值：

//标题title: {text: dataNum, //主标题文本subtext: "总数", //副标题文本left: "center",top: "20%",textStyle: {fontSize: 18,color: "#686B73",align: "center",},subtextStyle: {fontFamily: "微软雅黑",fontSize: 12,color: "#686B73",},},

全部代码：

mounted() {this.$nextTick(function () {this.getEchartData1();});},methods: {getEchartData1() {const chart1 = this.$refs.chart1;// 计算总合const datas = [{ value: 40, name: "国家级" },{ value: 12, name: "省   级" },{ value: 4, name: "市   级" },{ value: 2, name: "区   级" },];let dataNum = 0;for (var i = 0; i < datas.length; i++) {dataNum += datas[i].value;}if (chart1) {const myChart = this.$echarts.init(chart1);const option = {tooltip: {trigger: "item",},legend: {icon: "circle", //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，noneorient: "vertical", //垂直排列。（horizontal水平排列}itemWidth: 8, // 设置宽度itemHeight: 8, // 设置高度itemGap: 10, // 设置间距textStyle: {//文字样式color: "#686B73",fontSize: "14",},bottom: "0%",left: "center",data: ["国家级", "省   级", "市   级", "区   级"],formatter: function (params) {var total = 0;for (var i = 0; i < option.series[0].data.length; i++) {total += option.series[0].data[i].value;}for (var j = 0; j < option.series[0].data.length; j++) {if (option.series[0].data[j].name === params) {return (params + "：{a|" + option.series[0].data[j].value + "}");}}},textStyle: {rich: {a: {fontWeight: "bold",color: "#686B73",},},},},//标题title: {text: dataNum, //主标题文本subtext: "总数", //副标题文本left: "center",top: "20%",textStyle: {fontSize: 18,color: "#686B73",align: "center",},subtextStyle: {fontFamily: "微软雅黑",fontSize: 12,color: "#686B73",},},series: [{name: "",type: "pie",radius: ["50%", "70%"],center: ["50%", "30%"],avoidLabelOverlap: false,label: {show: false,position: "top",},labelLine: {show: false,},data: datas,itemStyle: {normal: {// 每块饼的颜色color: function (colors) {var colorList = ["#ffc34a","#00e1ff","#007fff","#9100ff",];return colorList[colors.dataIndex];},},},},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}this.$on("hook:destroyed", () => {window.removeEventListener("resize", function () {myChart.resize();});});},
}

有问题可以留言哦~ ~

vue+echarts饼状图中间计算总数相关推荐

echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
echarts 饼状图
实现效果难题1 中间换行 \n 解决方法formatter:"{a}\n{c}" 难题2 中间设置不同的样式解决方法 emphasis: {label: {formatter: ...
Echarts饼状图属性设置大全
1.标题设置 title: {text: '学生生源地来源分布图',subtext: '模拟数据',// x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right ...

vue+echarts饼状图中间计算总数

vue+echarts饼状图中间计算总数相关推荐

最新文章

热门文章