vue中使用echarts图表，根据新数据重新绘制图表实现不了
我实在是绝望了，希望大佬能帮帮我！项目卡在这里，不想丢工作，感激不尽！
由于需求是要在页面中绘制很多图表，所以我先发送请求，获取到数据以后把数据存到data的数组中，然后分别给opiton的data配好数据，最后用setOption来绘制图表。
// 投运年限柱状图3
getTransformerSubstation3 () {
// this.myChart3.clear()
this.myChart3 = this.$echarts.init(document.getElementById('oneChart3'))
api
.getTransformerSubstation3(this.bdzparams)
.then(data => {
console.log('变电站统计图3', data)
this.transformerSubstationList3 = data
let option = {
yAxis: {
type: 'category',
data: this.transformerSubstationList3.data.Asix,
},
xAxis: {
type: 'value',
},
series: [
{
data: this.transformerSubstationList3.data.data0,
type: 'bar',
itemStyle: {
normal: {
color: '#32b16c',
label: {
show: true,
position: 'right',
textStyle: {
color: 'black',
fontSize: 10,
},
},
},
},
barWidth: 20,
},
],
grid: {
x: '3%',
y: '20%',
bottom: '3%',
containLabel: true,
},
title: {
text: '投运年限',
textStyle: {
fontSize: 16,
fontWeight: 700,
},
},
}
this.myChart3.setOption(option)
})
},
静态的图表已经显示出来了，用红框圈出来的就是这个图表
现在需求是点击前面一个电压等级的柱状图中的柱子，能获取到这个柱子的相关数据作为参数，根据这些参数重新发送请求，获取到新的数据，再根据新数据来展示投运年限的这个图表，我已经通过点击事件成功获取到了柱子的参数，然后使用watch监视来监视这个参数是否变化，只要参数变化，就重新调用最上面的绘制图表（投运年限图）的方法，就可以重新根据新参数发送请求并绘制图表，思路大概就是这样。
点击柱子的事件：获取到柱子的参数，并存到data中，
Data中用于存放的参数
监视这个参数一旦变化，就调用绘制图表的方法
然后碰到困扰了我两天的问题
搜索了各大论坛，官方文档，用了clear（）、dispose（）、setOption（option,true）等各种方法都无效，我自己分析觉得应该调用方法之前，先清空画布，然后发送请求就可以绘制了，但是clear（）如果放在这里
就会变成这样，
我实在是绝望了，希望大佬能帮帮我！项目卡在这里，不想丢工作，感激不尽！
你 myChart3都没有初始化...clear个头啊..
是不是 应该 if(this.myChart3!=null){ this.myChart3.clear()}
试过了不行。确实clear()应该写在初始化的下面，我把它移下来了也没用~图表不变化，报警告是there is a chart instance already initialized on the dom，是不是还是没清掉啊
https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-async 这里有在线数据测试
function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
data: [5, 20, 36, 10, 10, 20]
});
}, 1000);
setTimeout(function () {
cb({
categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
data: [10, 20, 36, 10, 10, 20]
});
}, 2000);
}
// 初始 option
option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
fetchData(function (data) {
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
你把这些代码设置进去看看...
用setOption 可以直接改数据.
https://echarts.apache.org/zh/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0
这里还有动态的数据显示..
https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-dynamic-data
不要用setOption
我以前用过setOption，忘记这么写了，这种方式不用setOption也可以实现
会写回调函数就啥问题都解决了..
我现在把绘图的代码分离到了一个draw方法，和请求数据的方法分开了，但是初始化那一行似乎还是必须放在请求的上面，还是不能实现需求，呜呜呜
回去给你看看
搞定了吗...前几天服务器宕机
搞定了~~哈哈
合着没我啥事...没用我给你的代码?...直接关闭就很离谱
记小本本...再发问题上来 我绝对不回.
没有用那个方法 我没有重新删除画布 加了一行判断是否初始化
this.myChart3.setOption(option,true) 加个参数