hideLoading():隐藏加载动画,在获取图表数据之后 隐藏加载动画, 显示图表 仅做使用示例,未试出动画效果 <!DOCTYPE html>ECharts高级-加载动画<!-- cdn方式 引入echarts.js文件 -->var sleep = function (time) {var timeOut = new
loading状态 chartInstance实例上挂载了2个方法,用于显示/隐藏 Loading 效果,分别是showLo ading和hideLoading 正如官网所说的:可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用hideLoading隐藏加载动画 /** 图表实例 */ let chartInstance: NullType<echarts.ECharts> = null; /** Loading 状态控制...
ECharts提供了showLoading和hideLoading方法,可以方便地显示和隐藏loading效果。 <template></template>import*asechartsfrom'echarts';exportdefault{data() {return{myChart:null}; },mounted() {this.initChart();this.showLoading();setTimeout(() =>{this.hideLoading();this.setChartData(); },2000); },...
timeObj.hideLoading() timeObj.setOption(dataObj); } 但有些场景下需要将这个实例对象保存下来,例如页面要做自适应,而echarts又需要先销毁才能再重建时,就需要拿到这个实例对象方便销毁。 但是如果将这个实例对象保存在响应式数据上可能会遇到一些不可预料的问题,比如:tooltip 配置失效 实例组件代码如下: <template>...
chart.hideLoading() this.chart.setOption(options) }, //空图表 emptyOptions() { this.chart.clear() this.chart.hideLoading() this.chart.setOption({ title: { text: '暂无数据', x: 'center', y: 'center', textStyle: { color: '#0058D8', fontWeight: 'normal', fontSize: 16 } } }) ...
ECharts 默认有提供了一个简单的加载动画。只需要调用showLoading方法显示。数据加载完成后再调用hideLoading方法隐藏加载动画。 //在App.vue中模拟3秒后获取数据data() {return{ option: {} } }, created(){ setTimeout(()=>{this.option={ title: { ...
在drawLine()方法中添加showLoading()和hideLoading(), 代码如下: methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: {}, //{text: '异步数据加载示例'}, ...
初始化 ECharts 实例: 在Vue 组件的 mounted 钩子中初始化 ECharts 实例。 javascript mounted() { this.chart = this.$echarts.init(document.getElementById('chart')); } 实现加载状态: 在数据加载之前,使用 ECharts 的 showLoading 方法显示加载效果。数据加载完成后,使用 hideLoading 方法隐藏加载效果。
到这一步说明图表数据以及没问题了,可以展示图表了,myChart.hideLoading()关闭加载的动画 initchart(){letmyChart = echarts.getInstanceByDom(document.getElementById("main2")); myChart.hideLoading(); myChart.setOption(this.option);window.addEventListener('resize',function() { ...
myChart.hideLoading(); //下面数据为自己想要加入的数据 const newNode = [{ name: "哪吒三太子1", certName: "姜伯约", },{ name: "哪吒三太子2", certName: "鲁子敬", }] if (!node.data.children) { node.data.children =newNode; } else if (!node.data.children.length) { node.data....