Vue封装echarts组件实例

App.vue的代码：

<template>
  <div id="app">
    <h1>this is App page</h1>
    <Eharts :echartObj="echartObj"></Eharts>
  </div>
  
</template>
 
<script>
import Eharts from './components/echarts'
 
export default {
  name: 'App',
  data() {
    return {
      echartObj:{
        title: {
            text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  },
  components: {
    Eharts
  }
}
</script>
 
<style>
 
</style>
echarts.vue的代码：

<template>
    <div class="echarts">
        <div id="echart"></div>
    </div>
</template>
 
<script>
import Echarts from 'echarts'
export default {
    data() {
        return{
            myChart: {}
        }
    },
    props: {
        echartObj: {
            type: Object,
            default: {}
        }
    },
    created() {
        this.$nextTick(()=> {
            this.loadEchart()
        })
    },
    mounted(){
        let _this = this;
        window.onresize = function() {
            _this.myChart.resize()
        }
    },
    methods: {
        loadEchart() {
            this.myChart = Echarts.init(document.getElementById("echart"));
            this.myChart.setOption({
                title: {
                    text: this.echartObj.title.text
                },
                tooltip: {},
                xAxis: {
                    data: this.echartObj.xAxis.data
                },
                yAxis: {},
                series: this.echartObj.series
            })
        }
    }
}
</script>
 
<style>
#echart {
    width: 50%;
    height: 300px;
}
</style>

效果图：

————————————————
版权声明：本文为CSDN博主「记得每天进步一点点」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/joyvonlee/article/details/92020547