Vue中使用Echarts统计图

想要在Vue中使用echarts统计图其实很简单，跟随我以下步骤轻松完成（结尾有效果图片）。

附上Echarts官方地址：Examples - Apache ECharts

1、在当前项目的终端运行以下命令，安装echarts依赖。

npm install echarts@4.9.0

2、安装完成之后在main.js进行以下配置。

import echarts from "echarts";
// 全局方法挂载
Vue.prototype.$echarts = echarts;

3、完成以上安装配置即可使用Echarts统计图。下面是引入两个统计图案例，一个为条形统计图，还有一个是扇形统计图。

<template>
    <div>
        <!-- 条形统计图和扇形统计图 -->
		<div class="StatisticalChart">
		    <!-- 可视化条形统计图 -->
		    <div ref="main1"></div>
		    <!-- 可视化扇形统计图 -->
		    <div ref="main2"></div>
		</div>
    </div>
</template>
<script>
export default {
    // 生命周期 mounted 页面挂载完成后调用
    mounted() {
		// 可视化条形统计图
		this.drawChart1()
        // 可视化扇形统计图
		this.drawChart2()
	},
    methods:{
        // 可视化条形统计图
		drawChart1() {
			let main = this.$refs.main1
			// 基于准备好的dom，初始化echarts实例  这个和上面的main对应
			let myChart = this.$echarts.init(main);
			// 指定图表的配置项和数据
			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				toolbox: {
					feature: {
						dataView: { show: true, readOnly: false },
						magicType: { show: true, type: ['line', 'bar'] },
						restore: { show: true },
						saveAsImage: { show: true }
					}
				},
				legend: {
					data: ['orderQuantity', 'capacity', 'rankingProbability']
				},
				xAxis: [
					{
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisPointer: {
							type: 'shadow'
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						name: 'capacity',
						min: 0,
						max: 200,
						interval: 40,
						axisLabel: {
							formatter: '{value}'
						}
					},
					{
						type: 'value',
						name: 'rankingProbability',
						min: 0,
						max: 25,
						interval: 5,
						axisLabel: {
							formatter: '{value} %'
						}
					}
				],
				series: [
					{
						name: 'orderQuantity',
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value
							}
						},
						data: [
							12.0, 14.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
						]
					},
					{
						name: 'capacity',
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value
							}
						},
						data: [
							12.6, 15.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
						]
					},
					{
						name: 'rankingProbability',
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' %';
							}
						},
						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},
		// 可视化扇形统计图
		drawChart2() {
			let main = this.$refs.main2
			// 基于准备好的dom，初始化echarts实例  这个和上面的main对应
			let myChart = this.$echarts.init(main);
			let option = {
				title: {
					text: 'Referer of a Website',
					subtext: 'Fake Data',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [
							{ value: 1048, name: 'Search Engine' },
							{ value: 735, name: 'Direct' },
							{ value: 580, name: 'Email' },
							{ value: 484, name: 'Union Ads' },
							{ value: 300, name: 'Video Ads' }
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
    }
}
</script>

4、按照我以上配置就完成了Echarts统计图的使用，如果无法显示或者存在报错信息，请重启项目。下面展示最终效果。