页面引入echarts后,页面不显示echarts图
在mounted中添加定时器,延迟创建echarts
mounted() {
setTimeout(() => {
this.getEchartData1();
this.getEchartData2();
}, 1000);
},
时间可以再500-1500之间
添加定时器后即可使echarts找到dom,并渲染dom
echarts调用后端接口,点击下拉框切换数据后,点击第二次图表才更新
setTimeout和$nextTick在实际项目中的区别
最近做的大数据可视化需要通过切换城市,地图根据城市进行更新,按理说更新百度地图center的中心点经纬度即可,但是切换城市之后直接给center赋值,地图没有更新,可能是因为地图渲染慢的问题,我想应该要渲染完成后在赋值应该是可以的,于是想到了通过$nextTick再给center赋值
this.$nextTick(() => {
this.center = this.$store.state.city.location;
});
这种方式的结果是还是不会马上更新,但是在页面比如敲以空格等重新保存一下页面,即再一次更新dom时才会更新,我觉得有点奇怪了,于是上网查了一下,官方说
nextTick:将回调延迟到下次DOM更新循环之后执行,实际以成都市大数据可视化中心为例,默认成都市,比如切换成长沙市,地图还是为成都市,再次切换城市为石家庄市,地图现在市长沙市的,总是会慢一步,这就是他执行回调时间的问题
最后我换成了setTimeout就可以了,给地图中心点center赋新值,地图会立即更新:
this.timeout = setTimeout(() => {
this.center = this.$store.state.city.location;
}, 300);
setTimeout:将回调延迟到指定时间之后执行
nextTick和setTimeout两者回调执行的前提条件不相同
解决方法
methods: {
// echarts月/天切换
echartsChange(data) {
this.$nextTick(() => {
const { value } = data;
this.isMonth = value;
this.getEchartData1();
setTimeout(() => {
this.getEchartData1(); //添加定时器,在调用接口后,再次重新执行echarts图所在的方法,数据即可及时更新
}, 500);
});
},
窗口放大缩小echarts图标动态改变大小
关键代码
window.addEventListener('resize', function() {
myChart.resize();
});
示例
//折线图
getEchartData1() {
// this.thisChart.clear();
this.analyseData();
var chartDom = document.getElementById('chartBox');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: this.echartsY
},
yAxis: {
type: 'value'
},
series: [
{
data: this.echartsX,
type: 'line',
lineStyle: {
color: '#47b8ff' // 改变折线颜色
}
}
],
tooltip: {
trigger: 'axis',
formatter: function(params) {
let str = '<span>' + params[0].name + '</span><br/>';
for (let i = 0; i < params.length; i++) {
str += params[i].marker + ':<span style="float:right;font-weight:600">' + fmoney(params[i].value);
}
return str;
}
}
};
option && myChart.setOption(option, true);
window.addEventListener('resize', function() {
myChart.resize();
});
},