vuejs2和echarts3组合显示图表

最新推荐文章于 2025-06-03 11:40:55 发布

laputa73

最新推荐文章于 2025-06-03 11:40:55 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/laputa73/article/details/70215982

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

54 篇文章

订阅专栏

javascript

13 篇文章

订阅专栏

本文介绍了如何在Vue.js 2项目中轻松整合ECharts 3，由于ECharts 3不再依赖AMD加载，使得集成过程简化。现在Echarts作为一个全局变量，可以直接在Vue实例中使用，实现数据的动态交互。这种集成方式确保了Vue和ECharts之间的松耦合性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于echarts3不再通过AMD加载，无需内置echarts变量，所以整合变得简单多了。

echarts成了一个普通的全局变量，可以被vue直接操作

echarts本身就是一个异步组件。所以vue和echarts完全可以是松耦合的。

<!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>
</body>  
 <script src="../js/vue.js"></script>
     <script>
        // 这是我们的Model
        var exampleData = {
             message: 'Hello Vue.js&Echarts!'
        };
        var toggle=0;
         var exfunction=function () {
				      this.message = this.message.split('').reverse().join('');
				      if (toggle  == 0){
				      category.push("夹克");
				      sale.push(43);
				      toggle=1;
				      }
				      else{
				        category.pop();
				        sale.pop();
				        toggle=0;
				      }
				      myChart.setOption(option);  
				    };

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model				
				var app6 = new Vue({
				  el: '#app-8',
				  data: exampleData,
				  methods: {
				    changeData: exfunction
				  }
				})

    </script>
    
            <script type="text/javascript">  
        // 基于准备好的dom，初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));  
        var category=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
        var sale=[5, 20, 36, 10, 10, 20];  
  
        // 指定图表的配置项和数据  
        var option = {  
            title: {  
                text: 'ECharts 入门示例'  
            },  
            tooltip: {},  
            legend: {  
                data:['销量']  
            },  
            xAxis: {  
                data: category
            },  
            yAxis: {},  
            series: [{  
                name: '销量',  
                type: 'bar',  
                data: sale  
            }]  
        };  
  
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option);  
    </script>  

</html>