vuejs和echarts3整合(2)

最新推荐文章于 2024-07-05 10:34:38 发布

laputa73

最新推荐文章于 2024-07-05 10:34:38 发布

阅读量4.2k

点赞数

分类专栏： javascript web编程文章标签： vuejs echarts

本文链接：https://blog.csdn.net/laputa73/article/details/70224165

版权

web编程同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

在松耦合模式下，vuejs需要通过主动调用函数来触发echarts的数据更新。echarts也可以完全不依赖vuejs,自己控制数据加载。

可以进一步实现数据绑定。这样vue的data变化,echarts也跟随更新。

echarts本身不是数据感应控件，通过watch来实现。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="gb2312">  
    <title>ECharts</title>  
    <!-- 引入 echarts.js -->  
    <script src="../js/echarts.min.js"></script>  
</head>  
<body>  
		<div id="app-8">
		  <p>{{ message }}</p>
		  <input v-model="message"> 
		  <button v-on:click="changeData">变换数据</button>
		  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
     <div  id="main" style="width: 600px;height:400px;"></div>  
		</div>
         <script type="text/javascript">  


    </script>  
</body>  
 <script src="../js/vue.js"></script>
 
     
      <script>
        // 这是我们的Model
        var exampleData = {
             message: [5, 20, 36, 10, 10, 20]
        };
         var exfunction=function () {
				      this.message = this.message.reverse();
				      //this.draw();	//不需要在每个method重复此操作			        
				    };

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model				
				var app8 = new Vue({
				  el: '#app-8',
				  data: exampleData,
				  data() {
				    return exampleData 
				    //return  {message: [5, 20, 36, 10, 10, 20]}
				  },
				  methods: {
				    changeData: exfunction,
				    draw(){				     				     				      				  
				        // 指定图表的配置项和数据  
				        var category=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
				        var option = {  
				            title: {  
				                text: 'ECharts 入门示例'  
				            },  
				            tooltip: {},  
				            legend: {  
				                data:['销量']  
				            },  
				            xAxis: {  
				                data: category
				            },  
				            yAxis: {},  
				            series: [{  
				                name: '销量',  
				                type: 'bar',  
				                data: this.message   //数据绑定
				            }]  
				        };  
				  
				        // 使用刚指定的配置项和数据显示图表。  
				        this.myChart.setOption(option);

				    
				    }
				  },
				  watch:{  //数据变化时自动重画，在控制台修改message,会自动重画
				     message: function(){
				        this.draw();    
				     }
				  },
				  mounted(){
            this.$nextTick(function() {
                this.myChart = echarts.init(document.getElementById('main'));  //初始化echarts实例
                this.draw();
            })
          }
				})

    </script>

 

</html>

laputa73

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vuejs和echarts3整合(2)

在松耦合模式下，vuejs需要通过主动调用函数来触发echarts的数据更新。echarts也可以完全不依赖vuejs,自己控制数据加载。可以进一步实现数据绑定。这样vue的data变化,echarts也跟随更新。 echarts本身不是数据感应控件，通过watch来实现。 ECharts
复制链接

扫一扫

专栏目录