多种图表使用概述：echarts、v-charts、antv、d3，持续更新中。。。

echarts

官网：https://echarts.apache.org/examples/zh/index.html

CDN引入：

<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>

通过 npm 获取 echarts：

npm install echarts --save 

使用详见本博主博客：Echarts升级1：各个参数详解

v-charts

官网：https://v-charts.js.org/#/line

npm安装：

npm i v-charts echarts -S

完整引入：

import VCharts from 'v-charts'

Vue.use(VCharts)

按需引入：

|- lib/
    |- line.common.js  -------------- 折线图
    |- bar.common.js  --------------- 条形图
    |- histogram.common.js  --------- 柱状图
    |- pie.common.js  --------------- 饼图
    |- ring.common.js  -------------- 环图
    |- funnel.common.js  ------------ 漏斗图
    |- waterfall.common.js  --------- 瀑布图
    |- radar.common.js  ------------- 雷达图
    |- map.common.js  --------------- 地图
    |- sankey.common.js  ------------ 桑基图
    |- heatmap.common.js  ----------- 热力图
    |- scatter.common.js  ----------- 散点图
    |- candle.common.js  ------------ k线图
    |- gauge.common.js  ------------- 仪表盘
    |- tree.common.js  -------------- 树图
    |- bmap.common.js  -------------- 百度地图
    |- amap.common.js  -------------- 高德地图

 使用时，可以直接将单个图表引入到项目中：

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

使用详见本博主博客：【v-charts】折线图

antv

官网：

 

d3

官网：https://www.d3js.org.cn/