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>
注：战斗力为虚假值，不喜勿喷啊
5370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
