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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM