Vue2中如何使用vue-echarts实现一个动态数据图表

使用vue-echarts

参考文档

安装

//安装echarts 和 vue-echarts
yarn add echarts vue-echarts
//vue2使用@vue/composition-api
yarn add  @vue/composition-api

启动程序

yarn dev

main.js导入vue-echarts

 添加：
        import 'echarts'; //全量引入echarts
        import vecharts from 'vue-echarts'; //引入vue-echarts
        Vue.component('v-chart',vecharts); //全局声明 v-chart 组件

页面使用组件

<v-chart class="vcharts" :option="option" ></v-chart>
    <!--添加样式：需要给定高度-->
<style>
.vcharts {
width: 100%;
height: 500px;
}
</style>

使用vue-echarts实现想要的电子图表

参考文档
实现动态数据图表:

<template>
	<div id="app">
		<v-chart class="vchart" :option="option"/>
	</div>
</template>
<script>
export default{
	name: 'app',
	data(){
		return{
			listData:[
				{
					name: 'A',
					value: Math.random()*100
				},
				{
					name: 'B',
					value: Math.random()*100
				},
				{
					name: 'C',
					value: Math.random()*100
				},
				{
					name: 'D',
					value: Math.random()*100
				}
			]
		}
	},
	computed:{
		option(){
			return{
				xAxis:{
					max: 'dataMax'
				},
				yAxis:{
					type: 'category',
					data: this.listData.map(item => tiem.name),
					inverse:true,
					animationDuration: 300,
					animationDurationUpdate: 300,
					max: 2
				},
				series:[
					{
						realtimeSort: true,
						name: 'X',
						type: 'bar',
						data: this.listData.map(item => item.value),
						label:{
							show: true,
							postion: 'right',
							valueAnimation: true
						}
					}
				],
				legend:{
					show: true
				},
				animationDuration: 3000,
				animationDurationUpdate: 3000,
				animationEasing: 'linear',
				animationEasingUpdate: 'linear'
			}
		}
	},
	methods:{
		update(){
			this.listData.forEach(element => {
				element.value += Math.random() * 200
			});
		}
	},
	created(){
		setInterval(()=>{
			this.update()
		},3000);
	}
}
</script>
<style>
.vchart{
	width: 100%;
	height: 500px;
}
</style>