Vue中echarts图表实现loading效果实例

main.js 中配置Vue属性ecahrts

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

1. data() 初始化数据调用数据
2. mounted() 周期函数内获取画布节点,并且调用加载loading和图表渲染
3. computed计算属性内定义echarts渲染内容以及数据请求
4. 当服务器返回数据 hideLoading()

注意：loading方法要定义在计算属性的get方法中,set可以不做任何定义。这样图表于loading样式在画布上不会冲突

	<template>
	    <div>
	        <div class="echarts-wrap">
	            <div id="dev-echarts"></div>
	        </div>
	    </div>
	</template>
	
	<script>
	    export default {
	        name: "echarts",
	        data() {
	            return {
	                one: [],
	                two: [],
	                three: [],
	                four: []
	            }
	        },
	        mounted() {
	            this.echartsG = this.$echarts.init(document.getElementById('dev-echarts'), 'dark');
	            this.loading
	            this.initDrawDevEchart
	        },
	        computed: {
	            initDrawDevEchart() {
	                this.$axios.get("getEchartsUrl", {
	                    params: {
	                        id: 1
	                    }
	                }).then((response) => {
	                    this.one= response.data.one
	                    this.two= response.data.two
	                    this.three= response.data.three
	                    this.xAxis= response.data.xaxis
	
	                    this.echartsG.hideLoading()
	                    let optionG = {
	                        backgroundColor: 'rgba(128, 128, 128, 0)',
	                        title: {
	                            text: 'loading效果演示',
	                        },
	                        dataZoom: {},
	                        tooltip: {
	                            trigger: 'axis'
	                        },
	                        legend: {
	                            data: ['一', '二', '三']
	                        },
	                        xAxis: {
	                            type: 'category',
	                            // 调整柱状图位置
	                            boundaryGap: true,
	                            data: this.xAxis
	                        },
	                        yAxis: {
	                            type: 'value',
	                            axisLabel: {
	                                formatter: '{value}'
	                            }
	                        },
	                        series: [
	                            {
	                                name: '一',
	                                type: 'bar',
	                                data: this.one,
	                            },
	                            {
	                                name: '二',
	                                type: 'bar',
	                                data: this.two
	                            },
	                            {
	                                name: '三',
	                                type: 'bar',
	                                data: this.three
	                            }
	                        ]
	                    };
	                    this.echartsG.setOption(optionG);
	                }).catch((err => {
	                    console.log(err)
	                }))
	
	            },
	            loading: {
	                get: function () {
	                    this.echartsG.setOption({
	                        backgroundColor: 'rgba(128, 128, 128, 0)',
	                        legend: {
	                            data: ['一', '二', '三']
	                        },
	                        xAxis: {
	                            type: 'category',
	                            boundaryGap: true,
	                            data: []
	                        },
	                        yAxis: {
	                            type: 'value',
	                            axisLabel: {
	                                formatter: '{value}'
	                            }
	                        },
	                        series: [
	                            {
	                                name: '一',
	                                type: 'bar',
	                                data: []
	                            },
	                            {
	                                name: '二',
	                                type: 'bar',
	                                data: []
	                            },
	
	                            {
	                                name: '三',
	                                type: 'bar',
	                                data: []
	                            }
	                        ]
	
	                    });
	                    this.echartsG.showLoading({
	                        text: '统计中，请稍候...'
	                        , maskColor: 'rgba(3,3,8,0.5)',
	                        textColor: '#fff600'
	                    });
	                },
	                set(e) {
	                }
	            }
	        }
	    }
</script>