写一个盒子放图表
<div id="chart7"></div>
定义初始char7数据
添加监听
watch: {
char7: {
handler(newV) {
let list = newV;
if (!list) {
return;
}
if (this.myChart) {
this.myChart.dispose(); //销毁
}
this.myChart = null;
this.$nextTick(() => {
let x = [],
list1 = [];
list.forEach((item) => {
x.push(item.day); //x轴数据
list1.push(item.falseAlarm); //y轴数据
});
this.listX = x; //所有x轴数据
this.list1 = list1; //所有y轴数据
this.page = 3; //每页轮播的个数
if (x.length > 3) {
x = x.slice(0, 3); //每次轮播x轴数据
list1 = list1.slice(0, 3); //每次轮播y轴数据
}
this.myChart = echarts.init(document.getElementById("chart7")); //获取盒子创建画布
const options = {
// 悬浮时提示
tooltip: {
trigger: "item", //坐标轴触发
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
//图表距离画布边缘的距离
grid: {
left: "15%",
top: "12%",
right: "0%",
bottom: "25%",
},
xAxis: {
type: "category",
data: x,
axisLabel: {
interval: 0, //显示所有x轴标签
textStyle: {
fontSize: 12, //x轴字体大小
},
},
axisLine: {
lineStyle: {
color: "#fff", //x轴颜色
width: 1, //x轴宽度
},
},
},
yAxis: {
type: "value",
name: "单位:万元",
splitLine: {
lineStyle: {
color: ["#696969"], //平行于x轴的线,可写多个表隔行颜色
},
},
axisLabel: {
textStyle: {
fontSize: 10, //y轴字体大小
},
},
axisLine: {
lineStyle: {
color: "#fff", //y轴颜色
width: 1, //y轴宽度
},
},
},
series: [
{
name: "预计收入",
barMaxWidth: 20,
data: list1,
type: "bar",
color: "rgb(91,212,175)",
},
],
};
this.myChart.setOption(options, true);
if (this.listX.length > 3) {
this.setInter(x, list1);
}
});
},
deep: true,
immediate: true,
},
},
定时处理数据
setInter(x, y1) {
const that = this;
const listX = x,
listY1 = y1;
this.chartTimer = setInterval(function () {
if (that.page >= that.listX.length) {
that.page = 0;
}
listX.shift();
listY1.shift();
listX.push(that.listX[that.page]);
listY1.push(that.list1[that.page]);
that.page++;
that.myChart.setOption({
xAxis: {
data: listX,
},
series: [
{
name: "预计收入",
barMaxWidth: 20,
data: listY1,
type: "bar",
color: "rgb(91,212,175)",
},
],
});
}, 3000);
},