02-vue中使用Echarts并响应变化

(1)先在webstorm中创建vue项目

(2)安装echarts
npm install echarts
或者
npm install echarts --save 加上--save就可以在package.json中看到我们的echarts【推荐】

（3）启动我们的项目：npm run dev 如果已经启动就不用启动了
启动成功是下面这个样

（4）在我们的app.vue中编写代码进行测试

<template>
  <div id="app">
    <!--1、准备一个容器div，放置图表-->
    <div id="demo2" style="width: 600px;height: 400px"></div>

    <button @click="changeOption">改变我们的option</button>
  </div>
</template>

<script>

//2、导入我们的echarts
// import echarts from 'echarts'  不可用，找不到echarts
import * as echarts from 'echarts';

export default {
  name: 'App',
  data(){
    return{
      //指定图表的配置
      option:{
        title:{//标题
          text:"echarts Demo2"
        },
        tooltip:{},//提示框
        legend:{//设置我们的标记
          data:['人数']
        },
        xAxis:{//水平轴
          data:['vue','react','angular','jquery'] //标记
        },
        yAxis:{},//垂直轴（我们没有写标记，意味着就会显示数字）
        series:[//设置我们的数据
          {
            name:"人数",//注意与我们设置的标记一致
            type:"bar",//设置类型为条形图
            data:[2000,1500,500,2200],//设置我们的数据
          }
        ],
      }
    }
  },
  methods:{
    //改变我们的option
      changeOption(){
        this.option = {
          title:{//标题
            text:"echarts Demo2"
          },
          tooltip:{},//提示框
          legend:{//设置我们的标记
            data:['人数']
          },
          xAxis:{//水平轴
            data:['vue','react','angular','jquery'] //标记
          },
          yAxis:{},//垂直轴（我们没有写标记，意味着就会显示数字）
          series:[//设置我们的数据
            {
              name:"人数",//注意与我们设置的标记一致
              type:"bar",//设置类型为条形图
              data:[3000,2500,4000,2200],//设置我们的数据
            }
          ],
        }
      }
    },

  //3、在我们的声明周期函数中初始化绘制图标的echarts实例并进行图表的配置
  mounted() {
    var myChart = echarts.init(document.querySelector('#demo2'));

    //给我们的myChart图标实例设置他的配置
    myChart.setOption(this.option);
  },

  //通过watch监听我们的option数据的改变
  watch:{
    //如果option改变，这个函数就会运行
    option:function (){
      var myChart = echarts.init(document.querySelector('#demo2'));

      //给我们的myChart图标实例设置他的配置
      myChart.setOption(this.option);
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>