mychart.setOption(option,true)
还有其他两种方式,我自己的VUE项目测试不行,不知道是不是我用法错了
myChart.clear()
mychart.resize()
例子(VUE):
data(){
return{
weather:{
vos:[0], //数据之一
recvTime:[0] //横坐标时间 ,这里先定义两个字段值是为了初始化
//echart 中要初始化能够显示出横线,至少需要一条X轴数据和一条Y轴数据
},
}
},
mounted(){
this.initChart();
},
methods:{
// 初始化
initChart(){
let chartWeather= echarts.getInstanceByDom(document.getElementById('chart-weather')); //getInstanceByDom()这个函数是根据DOM来找到chart
if (chartWeather== null) { // 如果不存在,就进行初始化。
chartWeather= echarts.init(document.getElementById('chart-weather'));
}
var option = {
// .......
};
option && chartWeather.setOption(option,true);
},
// 渲染
async renderChart(){
// 调用showLoading方法,响应时间过长时转圈圈提示
var chartWeather= echarts.getInstanceByDom(document.getElementById('chart-weather'));
chartSpeed.showLoading({
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
});
let res = await APi._WeatherMonitoring("weatherGraph"); //这是自己封装的接口
if(res.data.length === 0){ //当后台请求没有数据时,遍历对象全赋值为0
for (let key in this.weather){
this.weather[key] = [0]
}
}else {
this.oArrayExtraction(res.data,this.weather);
}
chartWeather.hideLoading(); //请求结束后清楚圈圈
this.initChart()
},
//循环提取 数组对象 组合成 对象数组
oArrayExtraction(data,list){
if(data!=null){
for (let key in data[0]){
list[key] = data.map(obj => {return obj[key]})
}
}
}
}