zoukankan      html  css  js  c++  java
  • vue中 eCharts 自适应容器

    在 vue 脚手架开发中,echarts图表自适应容器的方法:

    父组件:

    <template>
      <div class="statistics_wrap">
        <v-fir-grade ref="first"></v-fir-grade>
      </div>
    </template>

    <script>
    import vFirGrade from "./FirstGrade/index"
    export default{
      components: {
        vFirGrade
      },
      data() {
        return {
          
        }
      },
      mounted() {
        // 监听窗口的变化,实时调用 echarts的 resize事件
        window.onresize = () =>{
          this.$refs.first.myChart.resize();
        }
      },
    }
    </script>
     
    子组件:
    <template>
      <div class="_statistics_echarts_wrap">
        <div id="echartCont"></div>
      </div>
    </template>

    <script>
    export default{
      data() {
        return {
          myChart: null,
        }
      },
      mounted() {
        this.firstGrade();
      },
      methods: {
        firstGrade() {
          this.myChart = echarts.init(document.getElementById('echartCont'));
          // ... 
          this.myChart.setOption(option);
        }
      }
    }
    </script>

  • 相关阅读:
    烤盐屋——Beta冲刺日志(2/7)
    团队作业第六次--Beta阶段随笔集合
    OneDay!——冲刺日志集合
    Beta冲刺答辩
    OneDay!——随机组队“吐槽”
    OneDay!——Beta冲刺总结
    用户使用调查报告
    Beta冲刺日志--Day 7
    Beta冲刺日志--Day 6
    Beta冲刺日志--Day 5
  • 原文地址:https://www.cnblogs.com/ermaoblog/p/9999654.html
Copyright © 2011-2022 走看看