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()可能也好用 。（有时间我试一下 ，再来更新）
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
