解決echarts數(shù)據(jù)二次渲染不成功的問題
最近在使用echarts做報表需求,二次生成報表時數(shù)據(jù)合并,無法正確顯示。
第一次渲染:
第二次渲染:
可以看到這里的echarts項的series變?yōu)?個(如上圖),但是渲染后的效果series項還是和第一次相同。
解決辦法:
應該設置mychart.setoption({},true);
原因:
chart.setOption(option,notMerge,lazyUpdate);
option:圖表的配置項和數(shù)據(jù)
notMerge:可選,是否不跟之前設置的option進行合并,默認為false,即合并。(這里是導致二次渲染不成功的根本)
lazyUpdate:可選,在設置完option后是否不立即更新圖表,默認為false,即立即更新。
補充知識:請求到數(shù)據(jù)后echarts圖表的重新渲染問題
我就廢話不多說了,大家還是直接看代碼吧~
export default{ data(){ return{ //定義接受數(shù)據(jù)的空數(shù)組 柱狀圖 e2data1:[], e2data2:[], } mounted() { //加載圖表 this.drawLine(); }, created(){ // 并發(fā)發(fā)送多個請求 axios.all([this.getTable1Data1()]) .then(axios.spread(function (acct, perms) { console.log("所有數(shù)據(jù)請求成功"); })); }, methods:{ getTable1Data1(){ let formData=new FormData; formData.append("companyName",this.chose); return axios.post('/StockFirstnfirstout/trendChart',formData) .then(response=> { let list=response.data.trendChartOfMonth; //每次加載前清空接口數(shù)據(jù) this.e2data1=[]; this.e2data2=[]; list.forEach((value,i)=>{ this.e2data1.push(value.count); this.e2data2.push(value.saleMonth); }); //重新渲染圖表 myChart2.setOption({ xAxis: { data:this.e2data2 }, series: [ {name:'柱狀圖', data: this.e2data1 }] }); console.log(this.e2data1); console.log(this.e2data2); }) .catch(error=> { console.log(error); }); }, // 基于準備好的dom,初始化echarts實例 //注意出myChart2的作用域 myChart2 = echarts.init(document.getElementById('zhLine')); myChart2.setOption({ title: {text: '本月累計趨勢圖', // textStyle:{ color:'#000', //顏色 fontStyle:'normal', //風格 fontWeight:'normal', //粗細 fontFamily:'Microsoft yahei', //字體 fontSize:16, //大小 align:'center', //水平對齊 lineHeight:50 }, // title位置 padding:[20, 0, 20, 30] }, legend: { data:['環(huán)比',], //折點提示位置 left:'90%', top:'5%' }, grid:{ //顯示數(shù)據(jù)的圖表位于當前canvas的坐標軸 x:50, y:80, borderWidth:1, }, tooltip: { trigger: 'axis', backgroundColor : '#ccc', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, xAxis : [ { name:'日期', type : 'category', data : this.e2data2, axisLine: { lineStyle: { color: '#999' } }, axisTick:{ show:false }, }, ], yAxis : [ { type : 'value', name:'臺數(shù)', interval: 30, scale: true, show:true, splitLine:{ show:false }, axisTick:{ show:false }, nameTextStyle:{ padding: [0,0,0,-20], color:'#999999' }, axisLine: { lineStyle: { color: '#999' } }, }, { type: 'value', // name: '溫度', min: 0, //取消y軸網(wǎng)格 interval: 25, scale: true, show:true, splitLine:{ show:false }, axisTick:{ show:false }, axisLine: { lineStyle: { color: '#999' } }, } ], series : [ { name:'環(huán)比', type:'line', stack: '總量', color:'#fccd35', symbolSize: 8, //按右邊y軸顯示 yAxisIndex: 1, data:[30, 15, 42, 65, 38, 40, 78,50] }, { name:'柱狀圖', type:'bar', //柱狀圖寬度 barWidth: '13%', data:this.e2data1, itemStyle:{ normal:{ color:'#84d1d3' } }, }, ], }); } }
以上這篇解決echarts數(shù)據(jù)二次渲染不成功的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
antd-DatePicker組件獲取時間值,及相關設置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關設置方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實戰(zhàn)篇
這篇文章主要介紹了詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實戰(zhàn)篇,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05vue實現(xiàn)將一個數(shù)組內(nèi)的相同數(shù)據(jù)進行合并
今天小編就為大家分享一篇vue實現(xiàn)將一個數(shù)組內(nèi)的相同數(shù)據(jù)進行合并,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue.js 底部導航欄 一級路由顯示 子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導航欄 一級路由顯示 子路由不顯示的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11