关于echarts 清空上一次加载的数据问题
echarts 清空上一次加载的数据
目标效果及数据格式
后台数据格式
Json中List类型，并遍历List中的对象
for(var i in sigleRow)
{
chargingPowerList.push(sigleRow[i].chargingPower);
drivingMileageList.push(sigleRow[i].drivingMileage);
numList.push(sigleRow[i].num);
}
转化后格式：
myChart.setOption(option,true)
series虽然是[] 数组，但是任然会保留上次查询所得结果，使用myChart.setOption(option,true)语句可以更新页面效果
如果这种方式没有解决，可以参考下文，使用setOption
最终效果
完整代码如下：
countCollum(flag){
var ydata = {};
var linename = {
xname:'',
yname:''
};
let lengendName = [];// echart legend
let chargingPowerObj = [],drivingMileageObj = [],numObj = [];
this.listData.forEach((element,index) => {
lengendName.push(element.carName);
var sigleRow = eval(element.workVehicleStatisticsList);
let chargingPowerList = [];
let drivingMileageList = [];
let numList = [];
for(var i in sigleRow)
{
chargingPowerList.push(sigleRow[i].chargingPower);
drivingMileageList.push(sigleRow[i].drivingMileage);
numList.push(sigleRow[i].num);
}
chargingPowerObj.push(chargingPowerList);
drivingMileageObj.push(drivingMileageList);
numObj.push(numList);
});
console.log('element-11-',chargingPowerObj,drivingMileageObj)
if(flag == 'countnum'){
ydata = numObj;
linename.xname = '统计时间';
linename.yname = '次数/次';
this.moveCarCountLine(numObj,linename,lengendName);
}else if(flag == 'countkwh'){
this.fiveOpera = '';
linename.xname = '统计时间';
linename.yname = '电量/度';
ydata = chargingPowerObj;
this.moveCarCountLine(chargingPowerObj,linename,lengendName);
}else if(flag == 'countkm'){
this.fiveOpera = '';
linename.xname = '统计时间';
linename.yname = '里程/公里';
this.moveCarCountLine(drivingMileageObj,linename,lengendName);
}else{
ydata = [];
}
chargingPowerObj = [];
drivingMileageObj = [];
numObj = [];
},
moveCarCountLine( ydata, linename,lengendName) {
let _this = this;
var moveCarCount = _this.$echarts.init(document.getElementById("moveCarCountInfoId"));
var areaChargeOpt = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: lengendName
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: _this.xzhouname
},
series: _this.seriesData(ydata,lengendName)
};
moveCarCount.setOption(areaChargeOpt,true);
},
seriesData( ydata, lengendName){
console.log('seriesData', ydata,lengendName)
var series = [];
ydata.forEach((element,index) => {
console.log('seriesDataelement',element)
let item = {
name: lengendName[index],
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: ydata[index]
}
series.push(item);
})
console.log('seriesDataseriesData',series)
return series;
},
Echarts清空图表：There is a chart instance already initialized on the dom.
有一个关于dom的图表实例已初始化
我们在使用图表的时候，常用的使用场景就是数据展示。
我们自然希望，数据的改变会带来图表的重绘。
也就是说，指定的区域作为canvas容器，根据触发条件改动数据之后，依旧沿用之前的的图表配置，把图表重新生成。
重绘图表时，我们要把之前已经渲染好的图表清空。
Echarts提供的有clear()和dispose()方法。
另外还有js方法。
先说我用着无效的两个
①js：
let ele=element.getElementById('元素id');
ele.innerHTML=''这是把canvas元素的内容清空，视觉效果上，确实实现了清空。
但是canvas实例依旧存在，控制台就会出现上面的问题：There is a chart instance already initialized on the dom.
②clear()方法
let ele=element.getElementById('元素id')
ele.clear()官方解释是：
清空当前实例，会移除实例中所有的组件和图表。
看定义我是觉得能实现需求的，但实际用的时候效果不尽人意。
注：这里我也查找了很多资料，来佐证方法的适用性。有的朋友记录该方法确实可用，但是有的就和我一样，没有作用。
不过，可能是使用方法的位置不正确，导致方法没有合适的被使用也说不一定。
以上是问题记录，接下来说一下解决方案吧。
dispose()方法:
销毁实例，实例销毁后无法再被使用。
实话讲，看见官方的这个解释，我在最初的时候根本没考虑用它。
原因就是销毁二字，我想当然，图表我还需要用，你销毁再用的时候怎么获取呢？
后来其他方案确实没办法解决已初始化的问题，我又看了一下自己使用图表的方法：
let chart = echarts.init(this.$refs.chart);
init()！！！
创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
所以切换数据，显示不同图表的过程其实也就是 ECharts 实例的销毁—创建过程。
自然而然，想到dispose()销毁方法，可问题是我们什么时候使用呢？
能销毁肯定需要先存在，所以定义一个全局变量来存储创建后的ECharts 实例，在改变数据需要重新绘制图表的时候加上条件判断：图例是否存在来决定是否销毁。
所以呢：
我在data里定义：
chart: null,//接收实例对象
触发切换数据的方法里面：
if (this.chart != null && this.chart != '' && this.chart != undefined) {
this.chart.dispose(); //销毁
}嘎嘎好用！
不过我在想，上面clear()方法没用，或许是实例没保存，触发时机不对。
按照正确的处理思路，dispose()换成clear()可能也好用。（有时间我试一下，再来更新）
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了element table多层嵌套显示的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了详解Vue中过度动画效果应用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
vue基于element-ui的三级CheckBox复选框功能的实现代码
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。这篇文章主要介绍了vue基于element-ui的三级CheckBox复选框功能的实现方法,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了Vue router重定向redirect如何传值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Element Cascader 级联选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
深入理解vue.js中$watch的oldvalue与newValue
这篇文章主要给大家介绍了关于vue.js中$watch的oldvalue与newValue的相关资料，文中通过示例代码介绍的非常详细，并且介绍了关于watch的其他测试，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-08-08
关于vue项目一直出现 sockjs-node/info?t=XX的解决办法
sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道,这篇文章主要介绍了vue项目一直出现 sockjs-node/info?t=XX的解决办法,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue前端如何将任意文件转为base64传给后端问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章给大家介绍了通过vue的方式，实现扫码功能，实现步骤分为两步，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2021-11-11
vue+axios methods方法return取不到值问题及解决
这篇文章主要介绍了vue+axios methods方法return取不到值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论