vue+echarts数据可视化大屏开发--小白基础入门篇(react中同理)

数据可视化开发相关图表库

与 echarts 官方文档 类似的图表库还有 highchart 官方文档 和 antv 官方文档等等

要说这些图表库如何选型，其实这点大可不必纠结，萝卜青菜各有所爱，可以说这些都有自己的有点，选哪一种只要能完成需求即可。

安装引入依赖为开发做准备

这里对vue不做详细介绍，默认你已经掌握了vue相关知识并具备开发经验

相关版本说明
 vue: 2.6.12,
 vue-cli: 4.5.9

第一种方式：直接引入echarts
1.npm / cnpm / yarn包管理工具进行安装

npm install echarts --save

2.1全局引入使用方式在main.js中配置

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts

2.2组件内按需引入（推荐）

//这种方式很简单，在需要引入图表的组件引入,例如如下引入柱状图。
//在组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");

2.3 CDN方式引入（推荐）

//在public->index.html中添加
<script src="//cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

然后再vue.config.js中添加配置，组件中直接用echarts

 configureWebpack: {
    externals: {
      'echarts': 'echarts'
    }
  },

3.以CDN引入为例，在组件中使用示例

<template>
	<div class="view-content">
		<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
	</div>
</template>

<script>
	export default {
		name: 'Echarts',
		data() {
			return {
			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表配置
				let option = {
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};
				// 图表随窗口大小自适应处理
				myChart.setOption(option);
				setTimeout(function() {
					window.onresize = function() {
						myChart.resize();
					}
				}, 200)
			}
		}
	}
</script>

第二种方式：使用vue-echarts
1.先安装vue-echarts

npm install echarts vue-echarts

2.全局引入vue-echarts，echarts按需引入在main.js中配置

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
Vue.component('chart', ECharts)

更多引入使用方式可参考
3.使用

<template>
  <div class="hello">
    <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      orgOptions: {},
    }
  },
  mounted() {
    this.orgOptions = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }]
    }
  }
}
</script>

至此两种使用方式都可以实现图表，具体选择哪种方式，我个人还是推荐直接引用echarts，只是感觉vue-echarts的配置和echarts不太一样，而且没有详细的文档说明。用echarts原生的，这样即使遇到坑也能查到很多解决方案。