一， v-charts簡介
在使用 echarts 生成圖表時，經常需要做繁瑣的數據類型轉化、修改復雜的配置項，v-charts 的出現正是為了解決這個痛點。基於 Vue2.0 和 echarts 封裝的 V-Charts 圖表組件，只需要統一提供一種對前后端都友好的數據格式設置簡單的配置項，便可輕松生成常見的圖表。
v-charts 已經處理了關於echarts依賴引入的問題，保證所使用的圖表，都是最小的文件。
二， 安裝
npm i v-charts -S
三，使用
引入v-charts
完整引入
//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)
})
按需引入
V-Charts的每種圖表組件，都單獨打包到lib文件夾下，以下為案例
|- lib/
|- line.js -------------- 折線圖
|- bar.js --------------- 條形圖
|- histogram.js --------- 柱狀圖
|- pie.js --------------- 餅圖
|- ring.js -------------- 環圖
|- funnel.js ------------ 漏斗圖
|- waterfall.js --------- 瀑布圖
|- radar.js ------------- 雷達圖
|- map.js --------------- 地圖
|- bmap.js -------------- 百度地圖
使用時，可以直接將單個圖表引入到項目中,對應上面圖表看自己的項目需求
//main.js
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)
})
come on！噠噠噠~上圖！
HTML
JavaScript
1，折線-------堆疊面積圖
效果圖如下
2，柱狀圖 -------堆疊柱狀圖
效果圖如下
3，餅圖 -------限制顯示條數餅圖
效果圖如下
4，雷達圖 -------設置顯示的指標維圖
效果圖如下
5，地圖 -------設置指標維度
效果圖如下
V-Charts屬性V-Charts 的屬性分為兩種，一種是全部圖表都具有的屬性，例如 colors, grid 等
settings 配置項
配置項 簡介 類型 備注
data 圖表數據 Object columns 代表指標和維度名稱，
rows 為數據內容
width 圖表寬度 String 默認 auto
height 圖表高度 String 默認 400px
settings 圖表配置項 Object -
colors 顏色列表 Array -
tooltip-visible 是否顯示提示框 Boolean 默認為 true
legend-visible 是否顯示圖例 Boolean 默認為 true
legend-position 圖例顯示位置 String 可選'left', 'top', 'right', 'bottom'
grid 網格配置 Object -
events 為圖表綁定事件 Object 包含事件名-事件處理函數的對象
before-config 對數據提前進行額外的處理 Function 在數據轉化為配置項開始前觸發，
參數為 data，返回值為表格數據
after-config 生成echarts配置進行額外的處理 Function 在數據轉化為配置項結束后觸
發，參數為 options，返回值為 echarts 配置
after-set-option 生成圖后獲取echarts實例 Function 參數為echarts實例
after-set-option-once 圖后獲取echarts只執行一次 Function 參數為echarts實例
mark-line 圖表標線 Object -
mark-area 圖表標志區域 Object -
visual-map 視覺映射組件 Array, Object -
mark-point 圖表標點 Object -
data-zoom 區域縮放組件 Array, Object -
toolbox 工具箱 Object -
title 圖表標題 Object -
init-optionsinit 附加參數 Object -
theme 自定義主題 Object 內容為自定義主題參數
theme-name 自定義主題名稱 String 內容為全局注冊的自定義主題名稱
loading 加載狀態 Boolean 默認為false
data-empty 暫無數據狀態 Boolean 默認為false
judge-width 是否處理生成圖表時的寬度問題 Boolean 默認為 true
width-change-delay容器寬度變化的延遲 Number 默認為300
備注：使用loading和dataEmpty屬性前需引入css import 'v-charts/lib/style.css'
同時，為了能夠更方便的設置屬性配置項等，可以通過extend屬性實現對已配置好的內部屬性進行單獨的設置，extend為對象類型，對象內的屬性可以是函數，也可以對象，也可以是其他類型的值當屬性為函數時，設置的是函數的返回值當屬性為對象時，如果在options中對應的屬性為對象(eg: tooltip)或包含對象的數組(eg: series)，對應的配置會被合並，否則將直接覆蓋對應的配置具體使用方法可以參考下面的屬性配置示例最后，下面這些與echarts配置項對應的屬性也被加到了組件上，設置后將會直接覆蓋options原有的對應屬性。
legend: Object
xAxis: Object
yAxis: Object
radar: Object
tooltip: Object
axisPointer: Object
brush: Object
geo: Object
timeline: Object
graphic: Object
series: [Object, Array]
backgroundColor: [Object, String]
textStyle: Object
備注：如果某屬性加上去之后沒有生效，很可能是沒有引入相應的模塊
另外一種是圖表自身的屬性，比如用戶設置數據類型的dataType，這樣的屬性被置於settings內，每種圖表的配置項不完全相同，具體參數參考下述示例~
HTML
JavaScript
歡迎各位評論轉發or收藏，新手求帶~不喜勿噴！大爺，給小妞個贊賞吧~
作者：美人宋
鏈接：https://www.jianshu.com/p/e24a90f532ae
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。