vue使用echarts画图，前后端通信，当后端数据发生改变，前端获取到新的数据，但是图不变！ - OSCHINA
let echarts = require("echarts");
export default {
data() {
return {
myChart: "",
series1: [],
};
},
methods: {
//画图
drawChart() {
this.myChart = this.$echarts.init(document.getElementById("container"));
let _that = this;
// 接收后端发送过来的数据
this.$axios({
method: "get",
url: "/api/production",
})
.then((res) => {
var result = res.data;
//循环series内的数据
if (this.series1) {
this.series1 = [];
for (var i = 0; i < result.length; i++) {
this.series1.push({
type: "custom",
name: result[i].name,
renderItem: function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height,
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
}
);
return (
rectShape && {
type: "rect",
shape: _that.$echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height,
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
}
),
style: api.style(),
}
);
},
itemStyle: {
opacity: 1,
},
encode: {
x: [1, 2],
y: 0,
},
data: result[i].equipment,
});
}
}
//指定图表的配置项和数据
var option = {
color: [
"#f7797d",
"#2C5364",
"#40E0D0",
"#12c2e9",
"#1565C0",
"#6b6b83",
"#11998e",
"#c94b4b",
"#00b09b",
"#CAC531",
],
legend: {
show: true,
orient: "vertical",
right: 30,
top: 35,
itemGap: 35,
textStyle: {
//图例文字的样式
fontSize: 35,
},
},
grid: {
height: 813,
width: 1290,
top: 65,
},
xAxis: {
type: "time",
splitNumber: 15,
axisLine: {
show: true,
},
axisLabel: {
rotate: -11,
margin: 20,
fontWeight: "bold",
fontSize: 20,
},
},
yAxis: [
{
splitLine: {
//网格线
lineStyle: {
type: "solid", //设置网格线类型
},
show: true, //隐藏或显示
},
axisLabel: {
fontWeight: "bold",
fontSize: 30,
},
data: [
"1#倒油台",
"2#回火炉",
"1#回火炉",
"1#清洗机",
"4#加热炉",
"3#加热炉",
"2#加热炉",
"1#加热炉",
],
},
],
series: this.series1,
};
this.myChart.setOption(option, true);
})
.catch((error) => {
console.log(error);
});
},
},
mounted() {
this.drawChart();
},
watch: {
//观察option的变化
option: {
handler(newVal, oldVal) {
if (this.myChart) {
if (newVal) {
this.myChart.setOption(newVal);
} else {
this.myChart.setOption(oldVal);
}
} else {
this.drawChart();
}
},
//对象内部属性的监听，关键。
deep: true,
},
},
};代码如上，数据库数据发生了改变，但是图却没有改变，不知道具体应该怎么写，麻烦大佬指点一下，谢谢！！！
Original url: Access
Created at: 2020-09-08 09:45:51
Category: default
Tags: none
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论