在Vue上初级使用ECharts

1、安装ECharts

npm install echarts –save

2、在main.js上引用ECharts

import echarts from ‘echarts’

3、在.vue页面为 ECharts 准备一个具备大小（宽高）的 DOM

<div class="charts" >
     <div id="myChart" style="width:1000px;height:500px"></div>
</div>

4、在mounted时通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表

mounted(options){
    let echarts = require('echarts/lib/echarts')// 引入基本模板，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块(可以按需引入的模块列表见见本博客底部)
    // 例如：引入柱状图
    //require('echarts/lib/chart/bar');
    let chartBox=document.getElementsByClassName('charts')[0]
    let myChart=document.getElementById('myChart')
    function resizeCharts() {//为调整图标尺寸的方法
        myChart.style.width=chartBox.style.width+'px'
        myChart.style.height=chartBox.style.height+'px'
            }
     let mainChart = echarts.init(myChart)// 基于准备好的dom，初始化echarts实例
     var option = null;
     // 指定图表的配置项和数据
     option = {
         title: {
              text: 'ECharts图表'
           },
         tooltip: {},
         legend: {
              data:['平均成绩']
           },
          xAxis: {
              data: ["A班","B班","C班","D班","E班"]
           },
          yAxis: {},
          series: [{
              name: '平均成绩',
              type: 'bar',
              data: [95, 88, 80, 77, 75, 70]
           }]
       };
     // 使用刚指定的配置项和数据显示图表。
     if (option && typeof option === "object") {
         mainChart.setOption(option, true)
      }
 }

可以按需引入的模块列表见
https://github.com/ecomfe/echarts/blob/master/index.js