vue中使用echarts总结

1. 引入Echarts依赖

   cnpm install echarts --save

2. 全局引入

   main.js 中添加

   // 引入echarts

   import echarts from 'echarts'

   Vue.prototype.$echarts = echarts

3. vue代码

4. <template>
   		<div id="bar" style="width: 600px; height:360px;">
   		</div>
   </template>
   
   <script>
   	export default {
   		name: "page",
   		data() {
   			return {
   				admin: 0, //角色  管理人员
   				user: 0, //用户
   				order: 0, //课程预约
   				notices: 0, //今日公告				
   				task:0
   			}
   		},
   		mounted() {
   			//获取数据
   			this.getpage();
   		},
   		methods: {
   			getpage() {
   				this.$axios({
   					url: "/api/Home/GetInfo",
   					method: "POST"
   				}).then((res) => {
   					let data = res.data;
   					if (data.code == 0) {
   						this.admin = data.admin;
   						this.user = data.user;
   						this.order = data.order;						
   						this.task = data.task;
   						setTimeout(() => {
   							this.getbar();							
   						}, 100)
   					}
   				}).catch((err) => {
   					console.log(err);
   				})
   			},
   
   			getbar() {
   				this.$echarts.init(document.getElementById('bar')).setOption({
   					xAxis: {
   						type: 'category',
   						data: ['管理员', '用户', '预约', '公告','需求']
   					},
   					yAxis: {
   						type: 'value'
   					},
   					series: [{
   						data: [
   							this.admin,
   							{
   								value: this.user,
   								itemStyle: {
   									color: '#41b883'
   								}
   							},
   
   							this.order,
   
   							this.notices,
   							
   							this.task,
   
   						],
   						type: 'bar'
   					}]
   				})
   
   			},
   			
   		
   		}
   	}
   </script>