echarts修改
This commit is contained in:
978184212@qq.com
parent
171d257b5b
commit
fdda6f0f6d
|
|
@ -150,7 +150,7 @@
|
|||
resolt: [],
|
||||
chartData: {},
|
||||
opts: {
|
||||
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
color: ["#c3c3c3","#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 15],
|
||||
|
|
@ -479,7 +479,7 @@
|
|||
maskClick(e) {
|
||||
this.rangetime = e;
|
||||
},
|
||||
// 处理图表数据
|
||||
// 处理图表数据 - 修改getServerData方法
|
||||
getServerData(val) {
|
||||
const chartDataList = val.map(item => {
|
||||
const series = [];
|
||||
|
|
@ -495,33 +495,45 @@
|
|||
series.push({
|
||||
name: item.itemName,
|
||||
data: mainData,
|
||||
color: "#1890FF",
|
||||
color: "#c3c3c3",
|
||||
lineType: "solid",
|
||||
pointShape: "circle",
|
||||
show: true
|
||||
});
|
||||
|
||||
// 最高阈值线 - 虚线
|
||||
// 最高阈值线 - 尝试不同方式设置虚线
|
||||
if (highValNum !== null) {
|
||||
series.push({
|
||||
name: `最高阈值: ${highValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(highValNum),
|
||||
color: "#FF4242",
|
||||
lineType: "dashed", // 虚线
|
||||
pointShape: "none", // 不显示点
|
||||
// 尝试不同的虚线设置方式
|
||||
lineType: "dash", // 或者尝试 "dashed", "dot", "dashdot"
|
||||
dashLength: 10, // 设置虚线段的长度
|
||||
gapLength: 5, // 设置间隔的长度
|
||||
pointShape: "none",
|
||||
show: true,
|
||||
// 使用自定义样式
|
||||
custom: {
|
||||
lineDash: [10, 5] // 数组格式：[线段长度, 间隔长度]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 最低阈值线 - 虚线
|
||||
// 最低阈值线
|
||||
if (lowValNum !== null) {
|
||||
series.push({
|
||||
name: `最低阈值: ${lowValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(lowValNum),
|
||||
color: "#19D58A",
|
||||
lineType: "dashed", // 虚线
|
||||
pointShape: "none", // 不显示点
|
||||
lineType: "dash",
|
||||
dashLength: 10,
|
||||
gapLength: 5,
|
||||
pointShape: "none",
|
||||
show: true,
|
||||
custom: {
|
||||
lineDash: [10, 5]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -532,7 +544,6 @@
|
|||
};
|
||||
});
|
||||
|
||||
// 更新resolt数据
|
||||
this.resolt = this.resolt.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
|
|
@ -541,13 +552,12 @@
|
|||
chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this.getChartOpts(item.itemName, item.unit)
|
||||
};
|
||||
});
|
||||
console.log("处理后的趋势图数据", this.resolt);
|
||||
},
|
||||
|
||||
// 获取图表配置
|
||||
// 修改getChartOpts方法，添加对虚线的支持
|
||||
getChartOpts(itemName, unit) {
|
||||
return {
|
||||
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
color: ["#c3c3c3", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 5],
|
||||
|
|
@ -558,50 +568,21 @@
|
|||
itemGap: 10,
|
||||
margin: 10,
|
||||
},
|
||||
enableScroll: false, // 禁用滚动，显示所有数据
|
||||
enableScroll: false,
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
scrollShow: false, // 不显示滚动条
|
||||
labelCount: 3, // 设置显示3个标签（对应我们要显示的3个点）
|
||||
scrollShow: false,
|
||||
labelCount: 3,
|
||||
boundaryGap: 'justify',
|
||||
// 自定义标签显示：显示第一个、中间和倒数第三个数据
|
||||
labelFormatter: (val, i, allLabels) => {
|
||||
if (!allLabels || allLabels.length === 0) {
|
||||
return val;
|
||||
}
|
||||
if (!allLabels || allLabels.length === 0) return val;
|
||||
|
||||
const total = allLabels.length;
|
||||
|
||||
// 1. 第一个标签
|
||||
if (i === 0) {
|
||||
if (i === 0 || i === Math.floor(total / 2) || i === total - 3) {
|
||||
return val;
|
||||
}
|
||||
|
||||
// 2. 中间标签
|
||||
const middleIndex = Math.floor(total / 2);
|
||||
if (total % 2 === 0 && i === middleIndex - 1) {
|
||||
// 如果是偶数个，显示中间两个中的前一个
|
||||
return val;
|
||||
} else if (i === middleIndex) {
|
||||
// 如果是奇数个，显示正中间
|
||||
return val;
|
||||
}
|
||||
|
||||
// 3. 倒数第三个标签
|
||||
// 确保有足够的数据点
|
||||
if (total >= 3) {
|
||||
const thirdLastIndex = total - 3;
|
||||
if (i === thirdLastIndex) {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
// 如果数据少于3个，显示最后一个
|
||||
else if (i === total - 1) {
|
||||
return val;
|
||||
}
|
||||
|
||||
return ''; // 其他标签返回空字符串
|
||||
return '';
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
|
|
@ -629,11 +610,39 @@
|
|||
return `${category}\n${item.seriesName}: ${item.data}`
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
},
|
||||
line: {
|
||||
width: 2,
|
||||
smooth: true
|
||||
smooth: true,
|
||||
// 为所有线条添加虚线配置
|
||||
style: "dash", // 默认样式
|
||||
dashLength: 8, // 虚线长度
|
||||
gapLength: 4, // 间隔长度
|
||||
lineCap: "round" // 线帽样式
|
||||
},
|
||||
// 添加自定义渲染回调
|
||||
render: {
|
||||
series: {
|
||||
line: (canvas, config, series, index) => {
|
||||
// 自定义线条渲染函数
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.save();
|
||||
|
||||
// 根据系列索引判断是否为阈值线（索引1和2）
|
||||
if (index === 1 || index === 2) {
|
||||
// 设置虚线
|
||||
ctx.setLineDash([10, 5]); // 10px线段，5px间隔
|
||||
ctx.lineDashOffset = 0;
|
||||
} else {
|
||||
// 实线
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
// 调用原始绘制逻辑
|
||||
config.chart.option.extra.render.series.line.call(this, canvas, config, series, index);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue