Vue整合ECharts

Vue整合ECharts准备js文件vue官网：https://cn.vuejs.org/vue.jsecharts官网：http://echarts.baidu.com/download.htmlecharts.min.js废话没有直接上代码，注释很全，如果有问题欢迎留言代码<!DOCTYPE html><html><hea

Do Re Mi

4486人浏览 · 2018-11-27 22:39:08

Do Re Mi · 2018-11-27 22:39:08 发布

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>

注：战斗力为虚假值，不喜勿喷啊

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^