如何用Vue中Echarts实现动态数据的两种展示方法？

本文共计946个文字，预计阅读时间需要4分钟。

目录+Echarts使用动态数据的三种方式

1.通过computed

2.在data中定义option

Vue+Echarts几种常用图表动态数据切换

1.柱状图

2.平滑折线面积图

3.折线图堆叠

4.饼图

目录

• Echarts使用动态数据的两种方式
• 1.通过computed
• 2.在data中定义option
• vue Echarts几种常用图表动态数据切换
• 1.柱状图
• 2.平滑折线面积图
• 3.折线图堆叠
• 4.饼状图

Echarts使用动态数据的两种方式

在使用Echarts时我们数据一般不是静态写死的，而是通过后端接口动态获取的，在此总结两种在vue框架下Echarts使用动态数据的方式。

1.通过computed

computed: {     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中定义option initEcharts(){       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.$img-blog.csdnimg.cn/2c725dfca29f441aa477ce33bad2d9ed.png) 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']" style="width: 390px" @change="timeHandle(4)"> </el-date-picker> </div> <div ref="echartDemo3" class="chart-box" style="height: 400px"></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: 3 countOrderRatio: 21.42 sumBzjAmount: 3000 sumBzjAmountRatio: 21.42 sumBzjAmountToWanYuan: 0.3 sumGuaranteeFee: 600 sumGuaranteeFeeRatio: 10.9 sumGuaranteeFeeToWanYuan: 0.06 traddingOrgId: "303c3dfaa3c54864a1b67f5fee694231" traddingOrgName: "驻马店公共资源交易中心" }, { countOrder: 4 countOrderRatio: 28.57 sumBzjAmount: 4000 sumBzjAmountRatio: 28.57 sumBzjAmountToWanYuan: 0.4 sumGuaranteeFee: 1400 sumGuaranteeFeeRatio: 25.45 sumGuaranteeFeeToWanYuan: 0.14 traddingOrgId: "57f2e9ceb8834fe7ac37e06f9dab7aef" traddingOrgName: "通许县公共资源交易中心" }, { countOrder: 2 countOrderRatio: 14.28 sumBzjAmount: 2000 sumBzjAmountRatio: 14.28 sumBzjAmountToWanYuan: 0.2 sumGuaranteeFee: 1000 sumGuaranteeFeeRatio: 18.18 sumGuaranteeFeeToWanYuan: 0.1 traddingOrgId: "8af00e2ff8ea458da5b122495ee83303" traddingOrgName: "杞县公共资源交易中心" }, { countOrder: 5 countOrderRatio: 35.73 sumBzjAmount: 5000 sumBzjAmountRatio: 35.73 sumBzjAmountToWanYuan: 0.5 sumGuaranteeFee: 2500 sumGuaranteeFeeRatio: 45.47 sumGuaranteeFeeToWanYuan: 0.25 traddingOrgId: "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; } ---

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。