echarts 关闭series_echarts3 清空上一次加载的series数据

在Echarts中,当需要清除上一次加载的series数据并加载新数据时,可以通过调用`clear`方法清空图表,然后使用`mergeOptions`更新配置。示例代码展示了如何根据后台返回的数据动态生成Echarts柱状图的配置,并进行数据更新。
摘要由CSDN通过智能技术生成

getEcharts() {

let _bar = this.$refs.bar,

this.http.post('xx/xx/xx', {

id: JSON.stringify(this.selectParkIds[0]),

fixedDate: JSON.stringify(this.today)

}).then(data => {

_bar.clear()

if (data) return

if (data.resultData) {

_bar.mergeOptions(getBarOption(inParkDataList)

}

})

},

const getBarOption = (data) => {

let xAxisAry = [], //x轴数据

legend = [],

inParkExitsFist = [],

inParkExitsList = [],

dataAllAry = [],

alignCenter = ''

for (let obj of data) {

xAxisAry.push(obj.hour)

inParkExitsList.push(obj.inParkExits)

}

inParkExitsFirst = data[0].inParkExits

for (let obj of inParkExitsFist) {

legend.push(obj.parkExitName)

}

legend.length > 10 ? alignCenter = '12%' : alignCenter = '30%'

for (let lenObj of legend) {

let dataAry = [],

dataObj = {}

for (let ary of inParkExitsList) {

ary.forEach(function(element) {

if (element.parkExitName == lenObj) {

dataAry.push(element.inParkCount)

}

});

}

dataObj.name = lenObj

dataObj.data = dataAry

dataObj.type = "bar"

dataAllAry.push(dataObj)

}

return {

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器,坐标轴触发有效

type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'

}

},

title: {

//text: obj.title

},

xAxis: {

data: xAxisAry

},

yAxis: {

axisLabel: { show: true },

name: "单位(辆)"

},

legend: {

data: legend,

left: alignCenter,

y: "bottom",

itemGap: 30,

align: 'auto',

},

grid: {

bottom: '30%'

},

series: dataAllAry,

color: [

'#3b4ca9', '#1689ce', '#1fc659', '#f98b24', '#e2346e', '#d52f30',

'#5d6dbe', '#1a9ce2', '#25e47b', '#fda639', '#f44c86', '#eb393a',

'#5f77b1', '#34b6f3', '#6cf090', '#fdad2a', '#f06997', '#ec5454',

'#7a88c9', '#59c7ef', '#6feeaf', '#feb657', '#f290b1', '#e27375',

'#9fa9d8', '#84d5f8', '#bbf5cb', '#fecc86', '#f6bbd0', '#ed9a9b'

],

}

}

3,

f57fa4402df6fec227b7027bd9946a3d.png

希望可以帮助和我出现一样的问题童鞋

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值