位置: IT常识 - 正文
vue中Echarts使用动态数据的两种实现方式(vuejs echarts)
编辑：rootadmin这篇文章主要介绍了vue中Echarts使用动态数据的两种实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 目录
本文链接地址:https://www.jiuchutong.com/zhishi/303688.html
转载请保留说明！
推荐整理分享vue中Echarts使用动态数据的两种实现方式(vuejs echarts)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue中的echarts,echarts vue,vuejs echarts,vue-echarts,vue-echarts,vue echarts,vue中echarts怎么用,vuejs echarts,内容如对您有帮助，希望把文章链接给更多的朋友！
Echarts使用动态数据的两种方式1.通过computed2.在data中定义optionvue Echarts几种常用图表动态数据切换1.柱状图2.平滑折线面积图3.折线图堆叠4.饼状图Echarts使用动态数据的两种方式在使用Echarts时我们数据一般不是静态写死的，而是通过后端接口动态获取的，在此总结两种在vue框架下Echarts使用动态数据的方式。
1.通过computedcomputed: { options() { let that = this; let option = { tooltip : { trigger: 'axis', formatter: function(item) { return `支付金额 ${item[0].value}元` } }, legend: { formatter: function(item){ return `${item}: ${that.priceData.todayPrice}` } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24] }, yAxis: { type: 'value', splitLine: { //网格线 show: false } }, series: [{ data: that.priceData.timePriceRange, type: 'line', smooth: true, name: '支付金额', itemStyle : { normal : { color: '#13CE66', lineStyle:{ color:'#13CE66' } } } }] } return option; } },//初始化initEcharts(){ let myChart = Echarts.init(this.$refs.chart); myChart.setOption(this.options); }2.在data中定义option通过在初始化之前，直接改变option对应属性值
//在data中定义optioninitEcharts(){ this.option.yAxis[1].max = this.maxRate; this.option.xAxis.data = this.dateList; this.option.series[0].data = this.payPriceTrendList; let myChart = Echarts.init(this.$refs.chart); myChart.setOption(this.option); }数据变化后需要再次调init方法刷线图表
vue Echarts几种常用图表动态数据切换几种常用图表
1.柱状图效果图
代码片段
HTML部分：
<div ref="echartMain1" id="echart-main"></div>JS部分：
getEchartData() {this.$http.post("/sys/currency/twelvemonthstatistic", {traddingOrgId:id,}).then(({ data }) => {//示例数据data=[{"ym": "2021-06","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2021-07","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2021-08","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2021-09","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2021-10","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2021-11","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2021-12","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2022-01","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2022-02","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2022-03","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2022-04","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0},{"ym": "2022-05","countOrder": 0,"sumGuaranteeFee": 0,"sumBzjAmount": 0,"sumGuaranteeFeeToWanYuan": 0,"sumBzjAmountToWanYuan": 0}]data.forEach((value, index) => {this.chartDate.push(value.ym);//X轴月份this.chartData.push(value.countOrder);//Y轴数量});this.echart();});},echart() {var myChart = echarts.init(this.$refs.echartMain1);let option = {xAxis: [{type: "category",data: this.chartDate,axisPointer: {type: "shadow",},},],yAxis: [{type: "value",name: "近12个月的出函数量（笔）",min: 0,max: 500,interval: 100,axisLabel: {formatter: "{value}",},},],series: [{data: this.chartData,type: "bar",},],};// echarts图表自适应myChart.setOption(option);window.addEventListener("resize", () => {myChart.resize();});},2.平滑折线面积图效果图
代码片段
HTML部分：
<el-row :gutter="20" class="tittle"><el-col :span="16"><div class="text1">近12月保函数据</div></el-col><!-- <el-col :span="2"><div :class="{active:isActive2===1}" @click="getDataMon12(1)" class="cursor-pointer">保函数量</div></el-col><el-col :span="2"><div :class="{active:isActive2===2}" @click="getDataMon12(2)" class="cursor-pointer">保费收入</div></el-col><el-col :span="2"><div :class="{active:isActive2===3}" @click="getDataMon12(3)" class="cursor-pointer">担保金额</div></el-col> --></el-row><div ref="echartDemo1" class="chart-box"></div>JS部分：
/*** 获取面积折线图 filterType 1保函数量 2保费收入 3担保金额 不传返回所有*/getDataMon12(filterType) {if (filterType) {this.isActive2 = filterType;// console.log('filterType高亮的是：',filterType,this.isActive2);}var monTop121 = [];var monTop122 = [];var monTop123 = [];var dataTop121 = [];var dataTop122 = [];var dataTop123 = [];this.$http.post("/sys/data/twelvemonthstatistic", {dataType: 1,filterType: filterType}).then(res => {// console.log("面积折线图数据是：", res.data);res.data.forEach((value, index) => {if (filterType == 1) {monTop121.push(value.ym);dataTop121.push(value.countOrder);} else if (filterType == 2) {monTop122.push(value.ym);dataTop122.push(value.sumGuaranteeFeeToWanYuan);} else if (filterType == 3) {monTop123.push(value.ym);dataTop123.push(value.sumBzjAmountToWanYuan);}});if (filterType == 1) {this.initChartBar1(monTop121, dataTop121);} else if (filterType == 2) {this.initChartBar1(monTop122, dataTop122);} else if (filterType == 3) {this.initChartBar1(monTop123, dataTop123);}});},/*** 面积折线图*/initChartBar1(mon, data) {var option = {tooltip: {trigger: "axis"},title: {subtext: "保函数量(件)",left: "5%",top: "0%",textAlign: "center"},xAxis: {type: "category",boundaryGap: false,data: mon},yAxis: {type: "value"},series: [{data: data,type: "line",smooth: true,areaStyle: {}}]};this.chartBar1 = echarts.init(this.$refs.echartDemo1);this.chartBar1.setOption(option);window.addEventListener("resize", () => {this.chartBar1.resize();});},css部分：
// 选中时的样式.active {color: #00a950;}3.折线图堆叠效果图
代码片段
HTML部分：
<el-row :gutter="20" class="tittle"><el-col :span="16"><div class="text1">近12月保函数据</div></el-col><!-- <el-col :span="2"><div :class="{active:isActive2===1}" @click="getDataMonLine(1)" class="cursor-pointer">保函数量</div></el-col><el-col :span="2"><div :class="{active:isActive2===2}" @click="getDataMonLine(2)" class="cursor-pointer">保费收入</div></el-col><el-col :span="2"><div :class="{active:isActive2===3}" @click="getDataMonLine(3)" class="cursor-pointer">担保金额</div></el-col> --></el-row><div ref="echartDemo2" class="chart-box"></div>JS部分：
/*** 获取层叠折线图 filterType 1保函数量 2保费收入 3担保金额 不传返回所有*/getDataMonLine(filterType) {if(filterType){this.isActive2=filterType// console.log('filterType高亮的是：',filterType,this.isActive2);}var monTop121 = [];var monTop122 = [];var monTop123 = [];var dataTop121 = [];var dataTop122 = [];var dataTop123 = [];this.$http.post("/sys/data/guaranteeorgtwelvemonthstatistic", {dataType: 1,filterType:filterType,}).then((res) => {// console.log("折线图数据/投标保函按月统计表格数据是：", res.data);this.twelvemonthDataLine = res.data;// 示例数据// this.twelvemonthDataLine=[// { detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],// ym: "2021-06"},// {detailList: [// {countOrder: 20, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 9, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 1, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],// ym: "2021-07"},// {detailList: [// {countOrder: 6, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 1, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 1, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],// ym: "2021-08"},// {detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 1, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],// ym: "2021-09"},// {detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2021-10"},// {detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 1, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2021-11"},// {detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2021-12"},// {detailList: [// {countOrder: 12, guaranteeOrgName: "08担保"},// {countOrder: 4, guaranteeOrgName: "01担保"},// {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 7, guaranteeOrgName: "06担保"},// {countOrder: 3, guaranteeOrgName: "06担保"},// {countOrder: 1, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2022-01"},// {detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2022-02"},// {detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 0, guaranteeOrgName: "01担保"},// {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2022-03"},// {detailList: [// {countOrder: 0, guaranteeOrgName: "08担保"},// {countOrder: 6, guaranteeOrgName: "01担保"},// {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 1, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2022-04"},// {detailList: [// {countOrder: 3, guaranteeOrgName: "08担保"},// {countOrder: 13, guaranteeOrgName: "01担保"},// {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},// {countOrder: 0, guaranteeOrgName: "07担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "06担保"},// {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},// {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},// {countOrder: 0, guaranteeOrgName: "阳光保险"},// {countOrder: 0, guaranteeOrgName: "中联银"},// {countOrder: 0, guaranteeOrgName: "汇友保险"},// {countOrder: 0, guaranteeOrgName: "02担保"},// ],ym: "2022-05"}// ]this.twelvemonthDataLine.forEach((value, index) => {if (filterType == 1) {monTop121.push(value.ym);dataTop121.push(value.detailList);}else if (filterType == 2) {monTop122.push(value.ym);dataTop122.push(value.sumGuaranteeFeeToWanYuan);} else if (filterType == 3) {monTop123.push(value.ym);dataTop123.push(value.sumBzjAmountToWanYuan);}});if (filterType == 1) {this.initChartLine(monTop121, dataTop121)} else if (filterType == 2) {this.initChartLine(monTop122, dataTop122);} else if (filterType == 3) {this.initChartLine(monTop123,dataTop123);}});},/*** 层叠折线图*/initChartLine(mon, data) {// console.log('monTop121:',mon);let series = [];let leggend = [];for (let i = 0; i < data.length; i++) {let countOrders = [];leggend.push(data[i].guaranteeOrgName);// countOrders=[0,1,5,2,4,5,3,1,4,9,14,2]var arr = data[i];arr.forEach((item, index) => {countOrders.push(item.countOrder);});// 将数据组装到series数组，供option配置使用series.push({// 每个担保机构，对应一条折线图name: data[i].guaranteeOrgName,type: "line",data: countOrders // 每个担保机构，对应的横坐标的值组成的数组});}console.log(leggend);console.log("series是：", series);var option = {tooltip: {trigger: "axis"},title: {subtext: "保函数量(件)",left: "5%",top: "0%",textAlign: "center"},legend: {padding: 10,tooltip: {show: true},data: leggend},xAxis: {type: "category",boundaryGap: false,data: mon},yAxis: {type: "value"},series: series};this.chartLine = echarts.init(this.$refs.echartDemo2);this.chartLine.setOption(option);window.addEventListener("resize", () => {this.chartLine.resize();});},css部分：
// 选中时的样式.active {color: #00a950;}4.饼状图效果图
代码片段
HTML部分：
<div class="piechart"><div class="tittle"><div class="text1">交易平台统计</div><el-date-picker v-model="type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:01', '23:59:59']" @change="timeHandle(4)"></el-date-picker></div><div ref="echartDemo3" class="chart-box"></div></div>JS部分：
// 时间选择修改时数据刷新 1为投标保函按月合计 2为出函平台统计的时间选择器 3为出函机构统计的时间选择器 4为交易平台统计的时间选择器timeHandle(num) {var that = this;if (num == 1) {this.getMonthData(12, this.value1);// this.value1=""} else if (num == 2) {this.getIssuinGuarantee("", this.value2);// this.value2=""} else if (num == 3) {this.getCensusData("", this.value3);// this.value3=""} else {this.getTradeData("", this.value4);// this.value4=""}},getIssuinGuarantee(days, time) {if (days) {this.isActive3 = days;// console.log('days高亮的是：',days,this.isActive3);}this.$http({url: "/sys/data/guaranteeorgplatformstatistic",method: "post",data: {dataType: 1,days: days,startTime: !time[0] ? "" : time[0],endTime: !time[1] ? "" : time[1]}}).then(res => {// console.log("出函平台数据：", res.data);this.issuinGuaranteeData = res.data;//后台响应数据是this.issuinGuaranteeData=[{countOrder: 3countOrderRatio: 21.42sumBzjAmount: 3000sumBzjAmountRatio: 21.42sumBzjAmountToWanYuan: 0.3sumGuaranteeFee: 600sumGuaranteeFeeRatio: 10.9sumGuaranteeFeeToWanYuan: 0.06traddingOrgId: "303c3dfaa3c54864a1b67f5fee694231"traddingOrgName: "驻马店公共资源交易中心"},{countOrder: 4countOrderRatio: 28.57sumBzjAmount: 4000sumBzjAmountRatio: 28.57sumBzjAmountToWanYuan: 0.4sumGuaranteeFee: 1400sumGuaranteeFeeRatio: 25.45sumGuaranteeFeeToWanYuan: 0.14traddingOrgId: "57f2e9ceb8834fe7ac37e06f9dab7aef"traddingOrgName: "通许县公共资源交易中心"},{countOrder: 2countOrderRatio: 14.28sumBzjAmount: 2000sumBzjAmountRatio: 14.28sumBzjAmountToWanYuan: 0.2sumGuaranteeFee: 1000sumGuaranteeFeeRatio: 18.18sumGuaranteeFeeToWanYuan: 0.1traddingOrgId: "8af00e2ff8ea458da5b122495ee83303"traddingOrgName: "杞县公共资源交易中心"},{countOrder: 5countOrderRatio: 35.73sumBzjAmount: 5000sumBzjAmountRatio: 35.73sumBzjAmountToWanYuan: 0.5sumGuaranteeFee: 2500sumGuaranteeFeeRatio: 45.47sumGuaranteeFeeToWanYuan: 0.25traddingOrgId: "c83acb963a4140438984b196abcec46c"traddingOrgName: "巩义公共资源交易中心"}]this.initChartBar3(this.issuinGuaranteeData);});},/*** 3饼图*/initChartBar3(data) {var temp1 = [];var temp2 = [];var temp3 = [];data.forEach((value, index) => {temp1.push({name: value.guaranteeOrgName,value: value.countOrderRatio});temp2.push({name: value.guaranteeOrgName,value: value.sumGuaranteeFeeRatio});temp3.push({name: value.guaranteeOrgName,value: value.sumBzjAmountRatio});});// console.log(temp1)// console.log(temp2)// console.log(temp3)var option = {tooltip: {trigger: "item",formatter: "{b} : {c} ({d}%)"},title: [{subtext: "保函数量占比",left: "16.67%",top: "5%",textAlign: "center"},{subtext: "保函金额占比",left: "50%",top: "5%",textAlign: "center"},{subtext: "担保金额占比",left: "83.33%",top: "5%",textAlign: "center"}],series: [{type: "pie",radius: "55%",center: ["50%", "50%"],data: temp1,right: "66.6667%"},{type: "pie",radius: "55%",center: ["50%", "50%"],data: temp2,left: "33.3333%",right: "33.3333%"},{type: "pie",radius: "55%",center: ["50%", "50%"],data: temp3,left: "66.6667%"}]};this.chartBar3 = echarts.init(this.$refs.echartDemo3);this.chartBar3.setOption(option);window.addEventListener("resize", () => {this.chartBar3.resize();});},css部分：
// 选中时的样式.active {color: #00a950;}---以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
上一篇：python shell怎样在Windows打开？(python 3.4.3 shell)
