vue+echarts實(shí)現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
前言
背景:vue寫的后臺管理,需要將表格數(shù)據(jù)繪制成圖表(折線圖,柱狀圖),圖表數(shù)據(jù)都是通過接口請求回來的。
安裝
cnpm install echarts --s
(我這里用了淘寶鏡像,不知道同學(xué)自行百度)
實(shí)例化
在已有的項(xiàng)目中下載好了echarts 之后,可以打開官方文檔,但是我覺得官方文檔對于實(shí)例化介紹的不夠清晰,這也是我為什么在這么多的文章中還要寫的原因,前輩寫的太模糊了,我決定好好給后來人,需要在項(xiàng)目中引用圖表的人,一些實(shí)用,快捷的東西。
官方文檔:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
不廢話,貼代碼
1.在需要用圖表的地方引入 例如:hello.js
import echarts from 'echarts'
2.hello.vue 中寫個容器
<div id='myChart' style='width:600px;height:600px'> </div>
3.在hello.js
export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.drawLine(); }, methods: { drawLine(){ // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 繪制圖表 myChart.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } }
這樣就調(diào)用好了視力了,在頁面刷新就可以了
效果如圖:
這樣是很簡單的方法,嗯重點(diǎn)來了,我的數(shù)據(jù)又不是寫死的~數(shù)據(jù)都是后臺給我的呀(官方,還真的沒有怎么說,示例也是ajax異步請求的)
項(xiàng)目一開始是有完整的一個表格數(shù)據(jù),也就是我要把表格數(shù)據(jù)繪制成圖表,還有一堆的篩選條件,有點(diǎn)懵逼~
感覺問題很多啊,給我五分鐘,分析分析,分解分解一下
1.數(shù)據(jù)我都是有的,我需要繪制四條折線,表格數(shù)據(jù)循環(huán)復(fù)制給新的四個數(shù)組(篩選條件一變,四組數(shù)據(jù)也跟著變)
2.橫坐標(biāo)也是動態(tài),項(xiàng)目是時間(剛開始我還想偏了,自動填充日期的那種),表格的第一行就是日期,同樣用新數(shù)組儲存
3.數(shù)據(jù)重新請求了,我的圖表也要跟著變才對呀(圖表重新繪制)
再次貼代碼(廢話再多,不如一行代碼)
1.在調(diào)用篩選條件的方法那里,創(chuàng)建五個新的數(shù)組(四條折線),橫坐標(biāo)(日期)
這里沒有代碼
2.橫坐標(biāo)動態(tài)的:
xAxis: { type: 'category', boundaryGap: false, data: this.xData, //xData 就是日期這個數(shù)組 },
3.series (四條折線的數(shù)據(jù))
series : [{ name:this.tooltipData[0], type:'line', stack: '總量', data:this.new_userData, }, { name:this.tooltipData[1], type:'line', stack: '總量', data:this.new_deviceData, }, { name:this.tooltipData[2], type:'line', stack: '總量', data:this.active_userData, }, { name:this.tooltipData[3], type:'line', stack: '總量', data:this.active_deviceData, }]
4.隨著篩選數(shù)據(jù),重新繪制圖表
調(diào)用篩選條件方法的時候再調(diào)用這個實(shí)例化 drawline
方法就可以了
this.drawLine();
總結(jié)
以上所述是小編給大家介紹的vue+echarts實(shí)現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- vue?組件異步加載方式(按需加載)
- 解決vue動態(tài)路由異步加載import組件,加載不到module的問題
- 詳解vue-router的Import異步加載模塊問題的解決方案
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
- vue異步加載高德地圖的實(shí)現(xiàn)
- vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
- 詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)
- Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)
- Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
相關(guān)文章
vue3:vue2中protoType更改為config.globalProperties問題
這篇文章主要介紹了vue3:vue2中protoType更改為config.globalProperties問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue-cli3.0修改打包后的文件名和文件地址,打包后本地運(yùn)行報(bào)錯解決
這篇文章主要介紹了vue-cli3.0修改打包后的文件名和文件地址,打包后本地運(yùn)行報(bào)錯的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue3中遇到reactive響應(yīng)式失效的問題記錄
這篇文章主要介紹了vue3中遇到reactive響應(yīng)式失效的問題記錄,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vue實(shí)現(xiàn)el-select的change事件過程
這篇文章主要介紹了vue實(shí)現(xiàn)el-select的change事件過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04