解决 echarts动态渲染数据图形不生效问题
我们都知道echarts图标数据是写在option = {}对象里，但是数据不可能是固定值，而是通过后端接口返回来的，本以为只需要在 data里设置一个变量去接收返回的数据，然后再将变量赋值给echarts就可以了，结果踩坑了！发现这样并不能生效。
经过一段时间分析，原因就是 vue axios属于异步加载数据，数据改变了，但是没有告诉echarts，导致echarts并不知道数据变化了，所以得在数据变化后告诉echarts，让它重新渲染一次。
解决办法：在vue里我们可以很好的用到 watch
这个方法很好的实现了我们想要实现的效果：当值改变之后 告诉echarts让其重新渲染
我这里给的案例是解决柱形图的 series:[{data:[]} ] data数据，解决思路呢，就是我前面提到的 设置变量去接收数据并赋值给data，具体实现
export default {
data() {
return {
barData: [],// 柱形图的data数据
}
},
methods:{
interaction() {
//综合型 推介使用
this.$http({
url: '', //这里填后端接口
method: 'get',
headers: {
'X-Requested-With': 'XMLHttpRequest' }
// params:{
// }
}).then(res => {
console.log('数据接收成功');
console.log(res.data);
this.barData = res.data;
});
},
drawChart(val) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('data-columnar'));
// 指定图表的配置项和数据
let option = {
grid: {
//坐标系的定位
left: 40,
bottom: 40
},
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: {
type: 'category', //类名轴
data: ['一等品', '二等品', '三等品'],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#262571'
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true,
textStyle: {
color: '#6FCEFF',
fontSize: 15 // 让字zhi体变大dao
}
},
axisTick: {
//x轴刻度相关设置
show: false
}
},
yAxis: {
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#262571'
}
},
axisLabel: {
textStyle: {
color: '#CFD4EB'
}
},
axisTick: {
//y轴刻度相关设置
show: false
},
splitLine: {
//网格线
lineStyle: {
color: '#262571'
}
}
},
series: [
{
name: '数量',
type: 'bar',
data: val,
barWidth: 40, //柱图宽度
itemStyle: {
normal: {
//柱形渐变色
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#63FFFF' // 0% 处的颜色
},
{
offset: 1,
color: '#6858FF' // 100% 处的颜色
}
],
false
),
label: {
//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下
show: true,
position: 'top', //标签的位置
formatter: '{c}', //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
color: '#6FCEFF'
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//根据窗口的大小变动图表 --- 重点
window.addEventListener('resize', () => {
if (myChart) {
myChart.resize();
}
});
}
},
mounted() {
this.drawChart();
this.interaction();
},
watch: {
barData(val, oldVal) {
console.log(1111, val, oldVal);//val：是新值 oldVal：是旧值
this.drawChart(val);
// if(this.interaction){
// if (val) {
// this.drawChart(val);
// } else {
// this.drawChart(oldVal);
// }
// }
}
},
}
这个问题的主要解决办法就是用到 watch：{}，然后 **drawChart(val){series:[ data:val]}; **经过测试这样就可以实现echarts动态渲染数据了，当然方法还有很多，这里只是我采取的一种方法，可以根据解决问题的思路使用其他方法，还有什么不懂的可以评论区留言，我看到了会尽量回复大家。