Vue初次使用echarts实例

首先引入需要的文件

<script src="js/jquery-2.1.4.min.js"></script>
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></scrip

创建一个Div存放需要显示的图表

<div id="main" style="width: 300px;height:400px;margin-left: 50px;"></div>

初始化echarts实例

在method中定义一个方法进行初始化

 init:function () {
               var that=this;
               // 基于准备好的dom，初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));
               // 指定图表的配置项和数据
               var option = {
                   title: {
                       text: '资产情况'
                   },
                   tooltip: {},
                   legend: {
                       data:['价值(万元)']
                   },
                   xAxis: {
                       data: ["增加资产","减少资产"]
                   },
                   yAxis: {},
                   series: [{
                       name: '价值(万元)',
                       type: 'bar',
                       barWidth : 30,//柱图宽度
                       data: that.edata
                   }]
               };

               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
           },

页面加载时候调用init

mounted:function () {
that.init();
}