一、安裝

npm install v-charts --save

二、引用

全局引用

// 在 main.js中全局引用
import VCharts from 'v-charts'
Vue.use(VCharts)

按需引入

V-Charts的每種圖表組件，都單獨(dú)打包到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  -------------- 百度地圖

使用時(shí)，可以直接將單個(gè)圖表引入到項(xiàng)目中,對(duì)應(yīng)上面圖表看自己的項(xiàng)目需求

//main.js
import VeLine from 'v-charts/lib/line'
Vue.component(VeLine.name,VeLine)

三、使用

1.折線圖

<ve-line :data="countData" :legend-visible="false" :settings="chartSettings"></ve-line>

<script>
data: {
  return: {
    chartSettings: {
    xAxisType: "time",
    area: false, // 是否對(duì)折線下面進(jìn)行顏色填充
    axisSite: {left: ["orderCount"]}, // left： 為左邊要顯示的數(shù)據(jù)，right：為右邊要顯示的數(shù)據(jù)。數(shù)據(jù)要一致。
    labelMap: {orderCount: "訂單數(shù)量"} // 訂單數(shù)量前面的變量要和axisSite 里面的變量相對(duì)應(yīng)，這樣鼠標(biāo)經(jīng)過(guò)時(shí)才會(huì)顯示 ‘訂單數(shù)量’
    },
    countData: {
    // columns 里面放的是要展示的數(shù)據(jù)
    columns: ["dateTime","orderCount","totalAmount","totalShareAmount","netProfit"],
    // 寫(xiě)入數(shù)據(jù)的地方
    rows: [{ date: "2018-11-01", orderCount: 10, totalAmount: 1093, netProfit: 100, totalShareAmount: 50 }]
    },
   loading: false,
   dataEmpty: false
 }
}
</script>

微信截圖_20200330161245.png

2.柱狀圖

<ve-histogram :data="countData" :legend-visible="false" :settings="chartSettings"></ve-histogram>

微信截圖_20200330161915.png

3.餅狀圖

<ve-pie :data="countData" :legend-visible="false" :settings="chartSettings"></ve-pie>

微信截圖_20200330162027.png

以上圖片都經(jīng)過(guò)后臺(tái)數(shù)據(jù)傳入的出的效果

事件

使用方法

<ve-ring :data="chartData" :extend="extend"></ve-ring>

data() {
  this.extend = {
      readyOnce: function () {
          // 渲染完成
      },
      click: function (e) {
          // 點(diǎn)擊事件
        }
    };
  return {
    chartData: {}
  }
}

官方文檔連接:https://v-charts.js.org

其他效果圖請(qǐng)進(jìn)入原文處查看
作者：美人宋
鏈接：http://www.itdecent.cn/p/e24a90f532ae
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。