vuejs2和echarts3组合显示图表

来源：互联网发布：数据库软件工程师考试编辑：程序博客网时间：2024/06/05 06:31

由于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 与 Modelvar 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>

1 0