全局加载动画函数:
//showLoading做成循环,使用时可以写成数组形式批量添加,否则只能添加单个图表
Vue.prototype.showLoading = function showLoading(chart) {
for (let i of chart){
i.showLoading({
text: '',
color: '#5CADEE',
textColor: '#fff',
maskColor: 'transparent',
zlevel: 0
});
}
};
Vue.prototype.hideLoading = function hideLoading(chart) {
chart.hideLoading({
text: '',
color: '#5CADEE',
textColor: '#fff',
maskColor: 'transparent',
zlevel: 0
});
};
//调用方式示例:
this.showLoading([this.chart1, this.chart2, this.chart3, this.chart4, this.chart5])
this.hideLoading(this.chart1)
图表随屏幕变化自适应:
window.addEventListener('resize', () => {
this.chart1.resize();
this.chart2.resize();
this.chart3.resize();
this.chart4.resize();
this.chart5.resize();
this.chart6.resize();
this.map.resize();
}, {passive: true}) //是否取消阻止默认行为(preventDefault())
初始化echarts:
this.chart1 = this.$echarts.init(this.$refs.chart1)
this.chart1.setOption(option)