官方文檔: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軸的參數,指標就是我們當前緯度我們需要展示的數據,所以注意我們的數據結構,簡單的結構如下,