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