Vue引入Echarts

有没有一种比较方便的做数据表格分析呢？通过Echarts可以实现：

第一步：引入Echarts，详情请看官网

第二部：将Echarts放入组件，方便管理

第三步：写代码

<template>
	<div class="app">
		<div style="width: 100%;height: 100%;" ref="chart"></div><!--ref是喧嚷echarts的时候可以多个渲染，如果不用，只能渲染最后一个-->
	</div>
</template>
<script>
	const echarts = require('echarts');//引入
	export default {
		data() {
			return {
				data: []
			}
		},
		async mounted() {//渲染完全
			const res = await this.$myaxios('get', {
				sentence: 'select MyUser.userName as name,COUNT(*) as value from MyUser group by MyUser.userName order by name asc'
			}, "post")
			this.data = res.splice(0, 10);//得到后台分组后的前10个数据
			this.initCharts();//调用该函数
		},
		methods: {
			initCharts() {
				let myChart = echarts.init(this.$refs.chart);
				// 绘制图表
				myChart.setOption({//改变内部样式，只需要去官网cv里面的内容并修改data的数据
					tooltip: {
						trigger: 'item'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: this.data,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				});
			}
		}
	}
</script>

此处的Echarts是基于Vue2使用