文章目录

vue集成统计图一、前言二、正文1.集成DataV2.集成Echarts3.集成Highcharts

vue集成统计图

一、前言

开发环境

Vue.js：2.9.6

DataV：

Vue 大屏数据展示组件库

Echarts：

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

Highcharts：

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

参考：

Vue.js官网：https://cn.vuejs.org/

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

​ 安装：http://datav.jiaminghi.com/guide/#%E5%AE%89%E8%A3%85

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

​ 上手：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

Highcharts官网：https://www.highcharts.com.cn/

​ 安装：https://www.highcharts.com.cn/docs/highcharts-vue

​ 示例：https://codesandbox.io/embed/vue-template-c6tq8?fontsize=14

二、正文

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 使用

<template> <div> <dv-charts :option="optionConfig" class="charts-content"/> </div> </template> <script> // 指定图表的配置项和数据 const chartOptions = { title: { text: '周销售额趋势' }, xAxis: { name: '第二周', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { name: '销售额', data: 'value' }, series: [ { data: [1200, 2230, 1900, 2100, 3500, 4200, 3985], type: 'line', lineArea: { show: true } } ] } export default { name: 'test', data() { return { optionConfig: {} } }, created() { this.optionConfig = chartOptions }, mounted(){ }, watch: { }, methods: { } } </script> <style scoped> .charts-content{ width:100%; height:200px; padding: 0; margin: 0; } </style>

2.集成Echarts

1）安装 Echarts

项目根目录，运行命令 npm install echarts --save 或者 yarn add echarts

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

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

3）新增 test.vue 使用

通过 ref 和 $refs 获取 dom 节点

通过 updated() 初始化图表

<template> <div> <div id="main" ref="mainCharts" class="charts-content"></div> </div> </template> <script> // 指定图表的配置项和数据 const chartOptions = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; export default { name: 'test', data() { return { } }, created() { }, updated() { this.initEcharts() }, mounted(){ }, watch: { }, methods: { initEcharts(){ // 基于准备好的dom，初始化echarts实例 var myChart = this.$echarts.init(this.$refs.mainCharts) // 使用刚指定的配置项和数据显示图表。 myChart.setOption(chartOptions) } } } </script> <style scoped> .charts-content{ width:100%; height:200px; padding: 0; margin: 0; } </style>

3.集成Highcharts

1）安装 Echarts

项目根目录，运行命令 npm install highcharts-vue npm install highcharts 或者 yarn add highcharts-vue yarn add highcharts

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

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

3）新增 test.vue 使用

<template> <div> <highcharts :options="optionConfig" :callback="myCallback" class="charts-content"></highcharts> </div> </template> <script> // 指定图表的配置项和数据 const chartOptions = { title: { text: "2010 ~ 2016 年太阳能行业就业人员发展情况" }, subtitle: { text: "数据来源：thesolarfoundation.com" }, yAxis: { title: { text: "就业人数" } }, legend: { layout: "vertical", align: "right", verticalAlign: "middle" }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [ { name: "安装，实施人员", data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: "工人", data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: "销售", data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: "项目开发", data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: "其他", data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] } ], responsive: { rules: [ { condition: { maxWidth: 500 }, chartOptions: { legend: { layout: "horizontal", align: "center", verticalAlign: "bottom" } } } ] } }; export default { name: 'test', data() { return { optionConfig: {}, } }, created() { this.optionConfig = chartOptions }, updated() { }, mounted(){ }, watch: { }, methods: { myCallback() { console.log("this is callback function"); } } } </script> <style scoped> .charts-content{ width:100%; height:200px; padding: 0; margin: 0; } </style>