本文共 1084 字，大约阅读时间需要 3 分钟。

vue集成统计图

一、前言

• 开发环境

1. Vue.js：2.9.6

2. DataV：

   Vue 大屏数据展示组件库

3. Echarts：

   一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ，提供直观，交互丰富，可高度个性化定制的数据可视化图表

4. Highcharts：

   兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

• 参考：

• Vue.js官网：

• DataV官网：

  ​ 安装：

• Echarts官网：

  ​ 上手：

• Highcharts官网：

  ​ 安装：

  ​ 示例：

二、正文

1.集成DataV

1）安装 DataV

• 项目根目录，运行命令

> npm install @jiaminghi/data-view

• 或者

> yarn add @jiaminghi/data-view

2）main.js 引入模块 【全局注册】

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

3）新增 test.vue 使用

2.集成Echarts

1）安装 Echarts

• 项目根目录，运行命令

npm install echarts --save

• 或者

yarn add echarts

2）main.js 引入模块 【全局注册】

// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts

3）新增 test.vue 使用

1. 通过 ref 和 $refs 获取 dom 节点

2. 通过 updated() 初始化图表

3.集成Highcharts

1）安装 Echarts

• 项目根目录，运行命令

npm install highcharts-vuenpm install highcharts

• 或者

yarn add highcharts-vueyarn add highcharts

2）main.js 引入模块 【全局注册】

// 引入highcharts-vueimport HighchartsVue from 'highcharts-vue'Vue.use(HighchartsVue)

3）新增 test.vue 使用

转载地址：http://jznws.baihongyu.com/