v-charts簡介

時間 2019-12-05

標籤 charts 簡介简体版

原文原文鏈接

一， v-charts簡介

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

v-charts 已經處理了關於echarts依賴引入的問題，保證所使用的圖表，都是最小的文件。vue

二，安裝

npm安裝git

npm i v-charts -Sgithub

三，使用

引入v-chartsnpm

完整引入後端

//main.js數組

import Vue from 'vue'app

import VCharts from 'v-charts'echarts

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