vue-cli项目中使用echart图表

1.安装依赖(引入核心库）

      npm install echarts

2.设定容器并指定大小

        设置宽高，否则无法显示

3.设置配置项

   —初始图表：

data(){

       return{

             options:{

                    //具体配置项参见https://echarts.apache.org/zh/option.html#title

               },

        }

}

mounted() {

   this.initChart();

 },

methods: {

    // 实例化echart

   initChart() {

     let chart =this.$echart.init(document.getElementById("chart"));

     chart.setOption(this.options);

}

}

注意：this.$echart.这里用到的是全局引入

       //在main.js中全局引入echart

        import echart from 'echarts'

        Vue.prototype.$echart=echart

---

遇到的问题：

    当数据发生改变时，图表无变化

解决方法：

    使用vue中的watch监听options的变化，然后重新初始化

watch: {

    options: {

      handler(newVal, oldVal) {

        let chart = this.$echart.init(document.getElementById("chart"));

        chart.setOption(newVal, true);//设置为true是因为不重复渲染

      },

      deep: true //深度监听，因为options是个复杂数组对象

    }

  }