v-charts利用ajax異步請求數據

一， v-charts簡介

在使用 echarts 生成圖表時，經常需要做繁瑣的數據類型轉化、修改復雜的配置項，v-charts 的出現正是為了解決這個痛點。基於 Vue2.0 和 echarts 封裝的 V-Charts 圖表組件，只需要統一提供一種對前后端都友好的數據格式設置簡單的配置項，便可輕松生成常見的圖表。

v-charts 已經處理了關於echarts依賴引入的問題，保證所使用的圖表，都是最小的文件。

二，v-charts

網上大多數的教程都是利用完全前后端分離的方式來寫v-charts的，但是還是存在一部分前后端不完全分離，屬於混合開發，下面講解一下，怎么利用ajax來填充v-charts數據

1.首先引入三個js文件

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">

</script> <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>

注意js引入的順序

2.引入一個css 文件

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

3.創建一個div

 

4.創建一個vue 對象

 

在生命周期created 的時候，調用后台數據。

后台代碼：

 

 

 

好了，大功告成!

 

 

————————————————
版權聲明：本文為CSDN博主「thymeFree」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_34553374/article/details/83791101