v-charts 輕鬆生成常見的圖表

*注意:原文轉發請註明出處

介紹

在使用 echarts 生成圖表時，常常須要作繁瑣的數據類型轉化、修改複雜的配置項，v-charts 的出現正是爲了解決這個痛點。

基於 Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只須要統一提供一種對先後端都友好的數據格式設置簡單的配置項，即可輕鬆生成常見的圖表

 

 

 

 

 

 

 

 

 

 

npm安裝

npm i v-charts echarts -S

使用示列

 

<template>
     <ve-line :data="chartData"></ve-line>
</template>

<script> import VeLine from 'v-charts/lib/line' export default { components: { VeLine}, data(){ return{ VeLineList:[ { '日期': '1月1日', '銷售量': 1123, '訪問量':999}, { '日期': '1月2日', '銷售量': 1223, '訪問量':456}, { '日期': '1月3日', '銷售量': 2123, '訪問量':6454}, { '日期': '1月4日', '銷售量': 4123, '訪問量':4444}, { '日期': '1月5日', '銷售量': 3123, '訪問量':1231}, { '日期': '1月6日', '銷售量': 7123, '訪問量':33312} ], columnsList:['日期', '銷售量', '訪問量'] } }, created () { this.chartData = { columns: this.columnsList, rows: this.VeLineList }, }, } </script>

 

import VeLine from 'v-charts/lib/line'//折線

import VeHistogram from 'v-charts/lib/histogram'//柱狀

import VeBar from 'v-charts/lib/bar'//橫-柱狀

import VePie from 'v-charts/lib/pie'//圓狀

import VeRing from 'v-charts/lib/ring'//環狀

import VeWaterfall from 'v-charts/lib/waterfall'//瀑布

import VeFunnel from 'v-charts/lib/funnel'//金字塔

import VeRadar from 'v-charts/lib/radar'//雷達

export default {

    components: { VeLine,VeHistogram,VeBar,VePie,VeRing,VeWaterfall,VeFunnel,VeRadar},

......

 

文檔地址:  https://v-charts.js.org/#/line