vue集成统计图

一、前言

• 开发环境

1. Vue.js：2.9.6

2. DataV：

   Vue 大屏数据展示组件库

3. Echarts：

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

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

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

2. 通过 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>