一，?v-charts簡介
在使用 echarts 生成圖表時纵散，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化梳码、修改復(fù)雜的配置項，v-charts 的出現(xiàn)正是為了解決這個痛點伍掀￡瑁基于 Vue2.0 和 echarts 封裝的 V-Charts 圖表組件，只需要統(tǒng)一提供一種對前后端都友好的數(shù)據(jù)格式設(shè)置簡單的配置項蜜笤，便可輕松生成常見的圖表濒蒋。
v-charts 已經(jīng)處理了關(guān)于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? -------------- 環(huán)圖
|- funnel.js? ------------ 漏斗圖
|- waterfall.js? --------- 瀑布圖
|- radar.js? ------------- 雷達(dá)圖
|- map.js? --------------- 地圖
|- bmap.js? -------------- 百度地圖
使用時聘惦，可以直接將單個圖表引入到項目中,對應(yīng)上面圖表看自己的項目需求
//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，餅圖 -------限制顯示條數(shù)餅圖
效果圖如下??
4禀酱，雷達(dá)圖 -------設(shè)置顯示的指標(biāo)維圖
效果圖如下??
5炬守，地圖 -------設(shè)置指標(biāo)維度
效果圖如下
V-Charts屬性V-Charts 的屬性分為兩種，一種是全部圖表都具有的屬性剂跟，例如?colors,?grid?等
settings? 配置項
配置項? ? ? ? ? ? ? ? ? ? ? ? ? ? 簡介? ? ? ? ? ? ? ? ? ? ? ?類型? ? ? ? ? ? ? ? ? ? ? ? ? ? 備注
data? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖表數(shù)據(jù)? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? ? ? columns 代表指標(biāo)和維度名稱减途，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?rows 為數(shù)據(jù)內(nèi)容
width? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖表寬度? ? ? ? ? ? ? ? ? String ? ? ? ? ? ? ? ? 默認(rèn) auto
height? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖表高度? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ?默認(rèn) 400px
settings? ? ? ? ? ? ? ? ? ? ? ? ?圖表配置項? ? ? ? ? ? ? ?Object? ? ? ? ? ? ? ? -
colors? ? ? ? ? ? ? ? ? ? ? ? ? ? 顏色列表? ? ? ? ? ? ? ? ? ? Array? ? ? ? ? ? ? ? ?-
tooltip-visible? ? ? ? ? ? ? ? 是否顯示提示框? ? ? ? ? Boolean? ? ? ? ? ? 默認(rèn)為 true
legend-visible? ? ? ? ? ? ? ?是否顯示圖例? ? ? ? ? ? ? Boolean? ? ? ? ? ? 默認(rèn)為 true
legend-position? ? ? ? ? ? ?圖例顯示位置? ? ? ? ? ? ? String? ? ? ? ? ? ? ?可選'left', 'top', 'right', 'bottom'
grid? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 網(wǎng)格配置? ? ? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? ? ?-
events? ? ? ? ? ? ? ? ? ? ? ? 為圖表綁定事件? ? ? ? ? ? ? Object? ? ? ? ? ? ?包含事件名-事件處理函數(shù)的對象
before-config? ? ? ? ?對數(shù)據(jù)提前進(jìn)行額外的處理? ?Function? ? ? 在數(shù)據(jù)轉(zhuǎn)化為配置項開始前觸發(fā)酣藻，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?參數(shù)為 data，返回值為表格數(shù)據(jù)
after-config? ? ? ? ?生成echarts配置進(jìn)行額外的處理? Function? ?在數(shù)據(jù)轉(zhuǎn)化為配置項結(jié)束后觸
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 發(fā)鳍置，參數(shù)為 options辽剧，返回值為 echarts 配置
after-set-option? ? ? ?生成圖后獲取echarts實例? ? ? ? ? ? ?Function? ? ? ? ? ? ? ? ? 參數(shù)為echarts實例
after-set-option-once? 圖后獲取echarts只執(zhí)行一次? ? ? Function? ? ? ? ? ? ? ?參數(shù)為echarts實例
mark-line? ? ? ? ? ? ? ? ?圖表標(biāo)線? ? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-? ? ? ? ? ? ? ??
mark-area? ? ? ? ? ? ? ? 圖表標(biāo)志區(qū)域? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -
visual-map? ? ? ? ? ? ? 視覺映射組件? ? ? ? ? ? ? ? ? Array, Object? ? ? ? ? ? ? ? ? ? ? ? ? ? -
mark-point? ? ? ? ? ? ? ?圖表標(biāo)點? ? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-
data-zoom? ? ? ? ? 區(qū)域縮放組件? ? ? ? ? ? ? ? ? ? ? ?Array, Object? ? ? ? ? ? ? ? ? ? ? ? ? ?-
toolbox? ? ? ? ? ? ? ? ?工具箱? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-
title? ? ? ? ? ? ? ? ? ? ? ? 圖表標(biāo)題? ? ? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-
init-optionsinit? ? ? ?附加參數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -
theme? ? ? ? ? ? ? ? ?自定義主題? ? ? ? ? ? ? ? ? ? ? ? ? ? Object? ? ? ? ? ? ? ? ? ? ? ? ?內(nèi)容為自定義主題參數(shù)
theme-name? ? ? 自定義主題名稱? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ?內(nèi)容為全局注冊的自定義主題名稱
loading? ? ? ? ? ? ? ?加載狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Boolean? ? ? ? ? ? ? ?默認(rèn)為false
data-empty? ? ? ? ?暫無數(shù)據(jù)狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? Boolean? ? ? ? ? ? ? 默認(rèn)為false
judge-width? ? ? 是否處理生成圖表時的寬度問題? ?Boolean? ? ? ? ? ? ?默認(rèn)為 true
width-change-delay容器寬度變化的延遲? ? ? ? ? ? ? Number? ? ? ? ? ? ? 默認(rèn)為300
備注：使用loading和dataEmpty屬性前需引入css?import 'v-charts/lib/style.css'
同時，為了能夠更方便的設(shè)置屬性配置項等税产，可以通過extend屬性實現(xiàn)對已配置好的內(nèi)部屬性進(jìn)行單獨的設(shè)置怕轿，extend為對象類型，對象內(nèi)的屬性可以是函數(shù)辟拷，也可以對象撞羽，也可以是其他類型的值當(dāng)屬性為函數(shù)時，設(shè)置的是函數(shù)的返回值當(dāng)屬性為對象時衫冻，如果在options中對應(yīng)的屬性為對象(eg: tooltip)或包含對象的數(shù)組(eg: series)诀紊，對應(yīng)的配置會被合并，否則將直接覆蓋對應(yīng)的配置具體使用方法可以參考下面的屬性配置示例最后隅俘，下面這些與echarts配置項對應(yīng)的屬性也被加到了組件上邻奠，設(shè)置后將會直接覆蓋options原有的對應(yīng)屬性。
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
備注：如果某屬性加上去之后沒有生效考赛，很可能是沒有引入相應(yīng)的模塊
HTML
JavaScript
歡迎各位評論轉(zhuǎn)發(fā)or收藏，新手求帶~不喜勿噴忍抽！大爺八孝，給小妞個贊賞吧~
