vue数据可视化组件

1. echarts

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

1.1 安装

npm install echarts --save

1.2 使用

打开main.js文件，里面写入以下代码：

// 全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 按需引入
var echarts = require('echarts/lib/echarts');  // 引入 ECharts 主模块
require('echarts/lib/chart/bar');  // 引入柱状图
require('echarts/lib/component/tooltip');  // 引入提示框
require('echarts/lib/component/title');  // 引入标题组件
Vue.prototype.$echarts = echarts

1.3 接口配置设置

https://echarts.apache.org/zh/option.html#title 

2. v-charts

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

v-charts是基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，使用起来更方便，功能没有echarts那么丰富，由饿了么团队开发。

3. DataV

官网：http://datav.jiaminghi.com/

3.1 安装

npm install @jiaminghi/data-view

 3.2 使用

打开main.js文件，里面写入以下代码：

// 方式1：将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

// 方式2：按需引用
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

4. datavjs

官网：https://github.com/TBEDP/datavjs

demos有点丑。

参考

1. GitDataV：https://github.com/HongqingCao/GitDataV
2. iDataV：https://github.com/yyhsong/iDataV