Vue整合ECharts

准备js文件

vue官网:https://cn.vuejs.org/ vue.js

echarts官网:http://echarts.baidu.com/download.html echarts.min.js

废话没有直接上代码 ,注释很全,如果有问题欢迎留言

代码
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>火影忍者战斗力</title>  
	<!-- 引入 vue.js -->  
	<script src="js/vue/vue.js"></script>
	<!-- 引入 echarts.js -->  
    <script src="/js/echart/echarts.min.js"></script>  
</head>  
<body>
	<!-- 容器   -->
	<div id="app">
		<!-- 为ECharts准备一个具备大小(宽高)的Dom -->  
		<div id="main" style="width: 90%;height:800px;"></div>  
	</div>
</body>  
<script>
var vm = new Vue({
	el: '#app',
	data: {
		option:{
			//标题
			title: {  text: '火影忍者战斗力'  },  
			//工具
			toolbox: {
				//是否显示
				show: true,
				feature: {
					//折线图 与 柱状图 切换
					magicType: {
						type: ['line', 'bar']
					},
					//下载
					saveAsImage: {}
				}
			  }, 
			//节点显示
			legend: {  
				data:['战斗力'] ,
			},
			//x轴数据  
			xAxis: {  
				data: ["旋涡鸣人","宇智波佐助","春野樱","卡卡西","依鲁卡","大蛇丸","自来也","鹿丸","雏田","月光疾风"]
			},
			//y轴  
			yAxis: {},  
			//数据
			series: [{ 
				//初始类型 
				type: 'bar',  
				data: [500, 400, 300, 600, 100, 150, 500, 400, 300, 400]
			}]
		}
	},
	methods: {
		//获取报表信息
			this.myChart.setOption(this.option);
		},
	},
	watch:{  
		//数据变化时自动重画,在控制台修改message,会自动重画
		message: function(){
			this.draw();    
		}
	},	
	created(){
		//在下次 DOM 更新循环结束之后执行延迟回调。
		//在修改数据之后立即使用这个方法,获取更新后的 DOM。
		this.$nextTick(function() {
			//初始化echarts实例
			this.myChart = echarts.init(document.getElementById('main'));
			//获取报表信息  
			this.draw();
		})
	}
})
</script>
</html>  

注:战斗力为虚假值,不喜勿喷啊

Logo

前往低代码交流专区

更多推荐