vue中Echarts使用动态数据的两种实现方式_vue.js_

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);     }

//在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);     }

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(); }); }, 

近12月保函数据

/** * 获取面积折线图 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(); }); }, 

// 选中时的样式 .active { color: #00a950; } 

近12月保函数据

 /** * 获取层叠折线图 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: "0
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：JS获取对象属性API汇总枚举symbol_javascript技巧_
                                                                
下一篇：Vue3 源码分析reactive readonly实例_vue.js_