v-chars初始與設置調整

官方文檔：https://v-charts.js.org/#/

在使用 echarts 生成圖表時，經常需要做繁瑣的數據類型轉化、修改復雜的配置項，v-charts 的出現正是為了解決這個痛點。基于 Vue2.0 和 echarts 封裝的 V-Charts 圖表組件，只需要統一提供一種對前后端都友好的數據格式設置簡單的配置項，便可輕松生成常見的圖表。

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

npm安裝

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)

})

配置項? 簡介

xAxis屬性代表echarts圖表的x軸設置代碼如下 xAxis : [ { type : 'category', // type:坐標軸類型。 // [ default: 'category' ] /*可選： 1.'value' 數值軸，適用于連續數據； 2.'category' 類目軸，適用于離散的類目數據，為該類型時必須通過 data 設置類目數據； 3.'time' 時間軸，適用于連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度； 4.'log' 對數軸。適用于對數數據。*/ data : ['上海','北京'], //x軸下面的數據 axisTick: { show: false, //是否顯示網狀線 默認為true alignWithLabel: true }, //用于設置x下面的字體 axisLabel:{ show:true, //這里的show用于設置是否顯示x軸下的字體 默認為true 　　　　　　　interval:0, //可以設置成 0 強制顯示所有標簽。如果設置為 1，表示『隔一個標簽顯示一個標簽』，如果值為 2，表示隔兩個標簽顯示一個標簽，以此類推。 　　 　　　　　　　textStyle:{ //textStyle里面寫x軸下的字體的樣式 color:'#333', fontSize:13 } }, axisLine:{ show:true, //這里的show用于設置是否顯示x軸那一條線 默認為true lineStyle:{ //lineStyle里面寫x軸那一條線的樣式 color:'#6FC6F3', width:2, //軸線的粗細 我寫的是2 最小為0，值為0的時候線隱藏 } } }, ] yAxis屬性代表echarts圖表的y軸，樣式設置方式與x軸的方式是一樣，就是設置的屬性會有所差異 yAxis:[{ 2 min:0, //y軸的最小值 3 max:100, //y軸最大值 4 interval:20, //值之間的間隔 5 //上面的三個值可以根據自己需求隨意設置 不設置時會根據圖中的值自動生成相應的值 6 7 type:'value', 8 /* type坐標軸類型:[ default: 'value' ] 　　　　可選：1.'value' 數值軸，適用于連續數據。 　　　　2.'category' 類目軸，適用于離散的類目數據，為該類型時必須通過 data 設置類目數據。 3.'time' 時間軸，適用于連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。 4.'log' 對數軸。適用于對數數據。*/ 9 splitLine:{show:false}, //去除網狀線 默認為true 10 //用于設置y軸的字體 11 axisLabel:{ 12 show:true, //這里的show用于設置是否顯示y軸下的字體 默認為true 13 textStyle:{ //textStyle里面寫y軸下的字體的樣式 14 color:'#333', 15 fontSize:13 16 } 17 }, 18 //用于設置y軸的那一條線 19 axisLine:{ 20 show:true, //這里的show用于設置是否顯示y軸那一條線 默認為true 21 lineStyle:{ //lineStyle里面寫y軸那一條線的樣式 22 color:'#6FC6F3', 23 width:2, //軸線的粗細 我寫的是2 最小為0，值為0的時候線隱藏 24 } 25 } 26 }]

GitHub 容器

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。