echarts图表的封装文件骨架

<template>
    <div class='com-container'>
        <div class='com-chart' ref='rank_ref'></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            chartInstance: null, // 图表实例对象
            allData: null // 后端返回得数据
        }
    },
    mounted() {
        // 初始化固定得echarts配置
        this.initChart()
        // 获取数据
        this.getData()
        // 实时检测自适应
        window.addEventListener('resize', this.screenAdapter)
        // 初始化自适应
        this.screenAdapter()
    },
    destroyed() {
        // 组件销毁之后，取消监听配置
        window.removeEventListener('resize', this.screenAdapter)
    },
    methods: {
        // 初始化固定得echarts数据
        initChart() {
            // init 
            this.chartInstance = this.$echarts.init(this.$refs.rank_ref)
            // 配置项
            const initOption = {}
            // 加入实例
            this.chartInstance.setOption(initOption)
        },
        // 数据请求
        async getData() {
            // 这里继续数据请求得发送

            // 然后更新一下图表
            this.updateChart()
        },
        // 更新图表
        updateChart() {
            // 这里可以对获取得数据进行一些结构的处理

            // 处理后的数据配置
            const dataOption = {}
            // 加入实例
            this.chartInstance.setOption(dataOption)
        },
        // 自适应
        screenAdapter() {
            // 关于一些自适应的配置
            const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
            // 数据自适应的配置
            const adapterOption = {}
            // 加入实例
            this.chartInstance.setOption(adapterOption)
            // 调用方法开启自适应
            this.chartInstance.resize()
        }

    }

}
</script>

<style lang='less' scoped>
.com-container {
  width: 100%;
  height: 100%;
  .com-chart {
    width: 100%;
    height: 100%;
  }
}
</style>