getExceptionCount() {
return new Promise((resolve, reject) => {
getExceptionCount().then((res) => {
if (res.code === 1) {
this.boxData = res.data;
resolve();
} else {
reject();
}
});
}).then(() => {
if (this.boxData) {
this.initRBox();
}
}).catch((e) => {
console.log('Error', e);
});
},
initRBox() {
this.option = {
tooltip: {
trigger: "axis",
axisPointer: {
// 方法一
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
shadowStyle: {
color: "rgba(41, 95, 204, 0.2)",
},
},
borderColor: "rgba(0, 170, 255)", // 边框颜色
}, // 坐标轴指示器配置
textStyle: {
color: "rgba(255, 255, 255, 0.3)", // xy轴的提示文字颜色,不包含背景刻度线
},
color: ["#4CE0FF"],
grid: {
top: "25px",
left: "50px",
right: "20px",
bottom: "35px",
},
xAxis: [
{
type: "category",
data: this.boxData.date,
axisLine: {
show: true,
lineStyle: {
color: "#004080",
// width: 0,
type: "solid",
}, // x轴线的颜色以及宽度
},
// axisLabel: {
// show: true,
// textStyle: {
// color: "rgba(255, 255, 255, 0.3)",
// }
// }, // x轴文字的配置
splitLine: {
show: false,
lineStyle: {}, // 分割线配置
},
axisTick: {
show: false,
}, // x轴的刻度线
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#fff",
opacity: 0.1,
}, // 设置横向的线的颜色
},
axisLabel: {
show: true,
margin: 20,
// textStyle: {
// color: "rgba(255, 255, 255, 0.3)",
// }, // y轴的字体配置
},
},
],
series: [
{
data: this.boxData.data,
type: "line",
smooth: true,
symbolSize: 0, // 设置圆点大小为 0,即不显示圆点
},
],
};
this.myChart = this.$echarts.init(document.getElementById("rBox2")); // 图标初始化
this.myChart.setOption(this.option); // 渲染页面
var that = this;
this.EChartsTimer = setInterval(function () {
var index = Math.round(Math.random() * that.boxData.date.length);
if (index === 0) {
index = 1;
}
that.myChart.dispatchAction({
type: "showTip", // 提示框
seriesIndex: 0,
dataIndex: index, // 第 lightIndex 柱子高亮
});
}, 1000);
/* ECharts动态效果 */
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
mounted() {
this.getExceptionCount();
},
async getTopBoxData() {
const date = new Date();
const yearNum = date.getFullYear();
const monthNum = date.getMonth() + 1;
let getData = (firmScale) => {
return new Promise((resolve) => {
this.$u.api.dataScreen.getOperationCount({yearNum, monthNum, firmScale}).then((res) => {
resolve(res.data);
});
});
};
this.upBoxData = await getData(1);
this.downBoxData = await getData(2);
console.log(this.upBoxData, this.downBoxData)
},