【vue】vue中v-charts的使用

官方文檔：https://v-charts.js.org/#/

在使用 echarts 生成圖表時，常常須要作繁瑣的數據類型轉化、修改複雜的配置項，v-charts 的出現正是爲了解決這個痛點。基於 Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只須要統一提供一種對先後端都友好的數據格式設置簡單的配置項，即可輕鬆生成常見的圖表。

1：在初次安裝的時候，用的是官方推薦

npm i v-charts echarts -S
    可是在引入的時候老是報錯，換了下面這個指令就能夠了，

npm install v-echarts echarts --save
2：能夠按需引入或者全局引入

    全局引入：

// main.js import Vue from 'vue' import VCharts from 'v-charts' import App from './App.vue' Vue.use(VCharts) new Vue({ el: '#app', render: h => h(App) })

 

按需引入：

import Vue from 'vue' import VeLine from 'v-charts/lib/line' import App from './App.vue' Vue.component(VeLine.name, VeLine) new Vue({ el: '#app', render: h => h(App) })

 

3：數據

    v-charts數據主要由兩部分組成，指標和緯度

    緯度相似咱們X軸的參數，指標就是咱們當前緯度咱們須要展現的數據，因此注意咱們的數據結構，簡單的結構以下，