前端vue集成echarts图形报表样例

🐒个人主页

🏅Vue项目常用组件模板仓库

📖前言：

本篇博客主要介绍前端vue项目中如何去集成echarts图形报表，需要的朋友请自取

🐕1.在项目终端下载echarts依赖包

npm install echarts

🏨2.在main.js中导入echarts资源包并使用

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

🎀3.在.vue文件中直接使用echarts，下面是一个样例，

不懂的去官网：echarts官网传送门

<template>
	<div>
		<h1>图形统计表</h1>
		<!-- 【🎀1.先给统计表划定多大的空间】 -->
		<div id="chart" style="width: 600px;height: 400px;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';/* 【🎀2.导入echarts】 */
	export default {
		data() {
			return {/* 【🎀3.这里是x轴，y轴的参数】 */
				xAxis:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
				yAxisValue:[5, 20, 36, 10, 10, 20]
			}
		},
		methods: {
			initChart() {
				this.$http.get("admin/AdminCtl/getChart").then((resp)=>{
					if(resp.data.code==200){
						this.xAxis=resp.data.data.xAxis;
						this.yAxisValue=resp.data.data.yAxis;
						
						//初始化echarts
						var chart = this.$echarts.init(document.getElementById('chart'));
						//定义图标数据及格式
						var option = {
							title: {
								text: '文章类型统计报表'
							},
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: ['销量']
							},
							xAxis: {
								type: 'category',
								data: this.xAxis
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								name: '销量',
								type: 'bar',
								data:this.yAxisValue
							}]
						}
						//设置格式
						chart.setOption(option);
					}
				})
				
			}
		},
		mounted() {
			this.initChart()
		}
	}
</script>