明天做图表的时候发现了一个问题,分享给大家
我有一个下拉框,每次选择它时都会切换到不同的数据。 数据是从后台查询获取的,如果是后台返回数据的话,每次渲染都没有问题。 如果后台没有返回数据,我正在渲染图表侯
series实际上是一个[]字段,但是它仍然保留了之前查询的结果。 查了很多资料,有的说notMerge,这是echarts2.0的方式echarts框选,不管用没有,有的说myChart.setOption(option ,true)
我也加了这个属性,但是还是不行echarts框选,真是破啊! ! !
1、表1为普通查询
2、图2显示后台返回的数据为空,图表中还有最后渲染的数据
最后,看完文档我恍然大悟
echartsInstance.clear*
清除当前实例将删除该实例中的所有组件和图表。 清除后,调用方法返回一个 {} 空对象。
我的代码写得不好,这个可以解决问题。 请参考一下。 清除后,图表样式可能会被覆盖到原来的状态。 只是重新定义风格。
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、
希望这会有所帮助,我的童鞋也有同样的问题。
发表评论