vue项目在同一页面中引入多个echarts图表，并实现封装，自适应和动态数据改变（代码粘贴）

本文详细介绍了一个使用Vue.js和ECharts实现的设备产量对比图组件。该组件通过父组件传递的数据动态生成柱状图，展示全年不同检品机的本年与上年设备产量对比，适用于监控和分析生产数据。

原文地址：https://blog.youkuaiyun.com/qq_33300789/article/details/79729675#commentBox

原文为图片，等等，这里方便各位搬砖，特地，转为代码；详细讲解请访问上面的原文地址查看

父页面：（根据自己项目的具体位置引入子组件：）

<template>
    <div>
      <linegraph :id="'bargraph'" :data="option2" style="height:350px;"></linegraph>
      <linegraph :id="'bargraph1'" :data="option2" style="height:350px;"></linegraph>
    </div>
</template>

<script>
  import linegraph from '../maptable/baseEchartsAllComponent.vue'
    export default {
        name: "weixinanaly",
      data(){
          return{
            option2:{
              title: {
                text: '全年设备产量对比图',
                left: 'center'
              },
              xAxis: {
                type: 'category',
                data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7']
              },
              yAxis: {
                type: 'value'
              },
              legend: {
                left: 'center',
                data: ['本年', '上年'],
                bottom:0
              },
              grid: {
                left: '1%',
                right: '2%',
                bottom: '8%',
                containLabel: true
              },
              series: [
                {
                  name: '本年',
                  data: [1000, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  barWidth:30,
                },
                {
                  name: '上年',
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  barWidth:30,
                }]
            }
          }
      },
      components:{
          linegraph
      }
    }
</script>

<style scoped>

</style>

子组件：

<template>
    <div v-bind:id=id v-bind:data=data></div>
</template>

<script>
    export default {
        name: "baseEchartsAllComponent",
      data(){
          return{
            ChartLineGraph:null,
          }
      },
    //  深度监听 父组件刚开始没有值，只有图标的配置项
    //  父组件ajax请求后改变数据的值，传递过来，图标已生成，监听传过来的值的改变
// deep:true.深度监听，确保data中子项修改也能监听到。写法参考：https://cn.vuejs.org/v2/api/#watch
      watch:{
          data:{
            handler(newvalue,oldvalue) {
              this.drawLineGraph(this.id,newvalue);
            },
          deep:true
              }
          
      },
      props:["id","data"],
      mounted() {
          this.drawLineGraph(this.id,this.data);

      },
      methods:{
        drawLineGraph(id,data){
          let _this = this;
          let myChart = document.getElementById(id)
          this.ChartLineGraph = this.$echarts.init(myChart)
          this.ChartLineGraph.setOption(data);
          window.addEventListener("resize",function () {
            _this.ChartLineGraph.resize();
          })
        }
      },
      beforeDestroy() {
          if(this.ChartLineGraph){
            this.ChartLineGraph.clear();
          }
      }
    }
</script>

<style scoped>

</style>