vuejs2和echarts3组合显示图表

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

laputa73

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

阅读量3.7k

点赞数 1

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

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

版权

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

摘要由CSDN通过智能技术生成

由于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 -->  
     <d