监听浏览器变化echarts自适应好方法

main.js

import echarts from 'echarts'

Vue.prototype.$echarts = function (el) {
    return echarts.init(el, null, {renderer: 'svg'})
}


子组件

<template>
    <div class="rightBar"></div>
</template>

<script>
export default {
    name: '',
    props: {
        data: Array
    },
    data() {
        return {}
    },
    methods: {
        setSoliderData(type) {
            let arr = [];
            let obj = {};
            for (let i = 0; i < this.data.length; i++) {
                switch (type) {
                    case 'g':
                        obj = {
                            top: this.data[i].top,
                            left: 8,
                            right: 30,
                            height: "13.5%"
                        };
                        break;
                    case 'x':
                        obj = {
                            axisLine: {show: false},
                            axisTick: {show: false, interval: 0},
                            splitLine: {show: false},
                            type: 'category',
                            boundaryGap: false,
                            gridIndex: i,
                            axisLabel: {
                                show: false
                            },
                            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        };
                        break;
                    case 'y':
                        obj = {
                            type: "value",
                            axisLine: {show: false},
                            gridIndex: i,
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: false}
                        };
                        break;
                    case 's':
                        obj = {
                            type: "bar",
                            barWidth: 2,
                            data: this.data[i].data,
                            label: {
                                show: true,
                                position: "insideBottomLeft",
                                offset: [3, 0],
                                distance: 2,
                                color: '#88B6C7',
                                fontSize: 9,
                                lineHeight: 9,
                                rich: {
                                    a: {
                                        // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
                                    }
                                },
                                formatter: function (data) {
                                    if (data.data.name.length == 2) {
                                        return data.data.name.split("").join("\n\n");
                                    } else {
                                        return data.data.name.split("").join("\n");
                                    }

                                },
                            },
                            itemStyle: {
                                color: { // 颜色线性渐变
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(' + this.data[i].color + ',1)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(' + this.data[i].color + ',0)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            },
                            xAxisIndex: i,
                            yAxisIndex: i,
                        };
                        break;
                    default:
                        break;
                }
                arr.push(obj)
            }
            return arr;
        },
        // 用户排名
        setChart() {
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: "{b}:{c}"
                },
                title: {
                    text: '重点关注用户排名',
                    left: 0,
                    top: 10,
                    textStyle: {
                        fontSize: 12,
                        color: "#FFF"
                    }
                },
                grid: this.setSoliderData('g'),
                xAxis: this.setSoliderData('x'),
                yAxis: this.setSoliderData('y'),
                series: this.setSoliderData('s')
            };
            let myChart = this.$echarts(this.$el);

            myChart.clear();
            myChart.resize()
            myChart.setOption(option);
        },
    },
    mounted() {
        this.setChart();
    },
}
</script>

<style lang="less" scoped>
.rightBar {
    height: 100%;
    width: 55%;
    float: left;
}
</style>


父组件

 <distribution-solider
                            id="left_2"
                            :data="data2"
                            ref="distributionSolider1"
                        ></distribution-solider>

json数据

  data2: [ // 网赌用户排名数据
                {
                    top: '16%',
                    color: '14,73,245',
                    data: [
                        {name: '王立国', value: 10},
                        {name: '李建国', value: 9},
                        {name: '董年月', value: 8},
                        {name: '高树安', value: 7},
                        {name: '李白', value: 6},
                        {name: '杜甫', value: 5},
                        {name: '刘禹锡', value: 4},
                        {name: '苏东坡', value: 3},
                        {name: '杜牧', value: 2},
                        {name: '李白', value: 1},
                    ],
                },
                {
                    top: '34%',
                    color: '170,6,243',
                    data: [
                        {name: '王立国', value: 10},
                        {name: '李建国', value: 9},
                        {name: '董年月', value: 8},
                        {name: '高树安', value: 7},
                        {name: '李白', value: 6},
                        {name: '杜甫', value: 5},
                        {name: '刘禹锡', value: 4},
                        {name: '苏东坡', value: 3},
                        {name: '杜牧', value: 2},
                        {name: '李白', value: 1},
                    ],
                },
                {
                    top: '50%',
                    color: '254,153,0',
                    data: [
                        {name: '王立国', value: 10},
                        {name: '李建国', value: 9},
                        {name: '董年月', value: 8},
                        {name: '高树安', value: 7},
                        {name: '李白', value: 6},
                        {name: '杜甫', value: 5},
                        {name: '刘禹锡', value: 4},
                        {name: '苏东坡', value: 3},
                        {name: '杜牧', value: 2},
                        {name: '李白', value: 1},
                    ],
                },
                {
                    top: '68%',
                    color: '255,102,0',
                    data: [
                        {name: '王立国', value: 10},
                        {name: '李建国', value: 9},
                        {name: '董年月', value: 8},
                        {name: '高树安', value: 7},
                        {name: '李白', value: 6},
                        {name: '杜甫', value: 5},
                        {name: '刘禹锡', value: 4},
                        {name: '苏东坡', value: 3},
                        {name: '杜牧', value: 2},
                        {name: '李白', value: 1},
                    ],
                },
                {
                    top: '85%',
                    color: '127,5,253',
                    data: [
                        {name: '王立国', value: 10},
                        {name: '李建国', value: 9},
                        {name: '董年月', value: 8},
                        {name: '高树安', value: 7},
                        {name: '李白', value: 6},
                        {name: '杜甫', value: 5},
                        {name: '刘禹锡', value: 4},
                        {name: '苏东坡', value: 3},
                        {name: '杜牧', value: 2},
                        {name: '李白', value: 1},
                    ],
                },
            ],


 mounted() {
        this.resizeFn = this.$debounce(()=> {
            // 通过捕获系统的onresize事件触发我们需要执行的事件
          
           this.$refs.channelBar2.setChart();
        }, 500)
        window.addEventListener('resize', this.resizeFn)
    },

 beforeDestroy() {
        window.removeEventListener('resize', this.resizeFn)
    }

自定义防抖

utils.js

export default {
    install: function (Vue) {
        Vue.prototype.$debounce = function ( fn,delay){
            let timer = null //借助闭包
            return function() {
                if(timer){
                    clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
                    timer = setTimeout(fn,delay)
                }else{
                    timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
                }
            }
        }
    }
}

main.js

import utils from "./lib/utils.js";

Vue.use(utils)