Administrator
/
FenXiNspUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

echarts修改

This commit is contained in:
978184212@qq.com 2025-12-08 18:24:48 +08:00
parent 171d257b5b
commit fdda6f0f6d
1 changed files with 165 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
packDetail/pages/sjdyj/index.vue
View File

@ -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,
// 使用自定义样式
custom: {
lineDash: [10, 5] // 数组格式：[线段长度, 间隔长度]
}
});
}
// 最低阈值线 - 虚线 // 最低阈值线
if (lowValNum !== null) { if (lowValNum !== null) {
series.push({ series.push({
name: `最低阈值: ${lowValNum}`, name: `最低阈值: ${lowValNum}`,
data: Array(this.timeList?.length || 0).fill(lowValNum), data: Array(this.timeList?.length || 0).fill(lowValNum),
color: "#19D58A", color: "#19D58A",
lineType: "dashed", // 虚线 lineType: "dash",
pointShape: "none", // 不显示点 dashLength: 10,
show: true, gapLength: 5,
}); pointShape: "none",
} show: true,
custom: {
lineDash: [10, 5]
}
});
}
return { return {
categories: this.timeList.slice(0, 50) || [], categories: this.timeList.slice(0, 50) || [],
series: series, series: series,
chartOpts: this.getChartOpts(item.itemName, item.unit) chartOpts: this.getChartOpts(item.itemName, item.unit)
}; };
}); });
// 更新resolt数据 this.resolt = this.resolt.map((item, index) => {
this.resolt = this.resolt.map((item, index) => { return {
return { ...item,
...item, chartData: chartDataList[index] ? chartDataList[index].series : [],
chartData: chartDataList[index] ? chartDataList[index].series : [], categories: chartDataList[index] ? chartDataList[index].categories : [],
categories: chartDataList[index] ? chartDataList[index].categories : [], chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this.getChartOpts(item.itemName, item.unit)
chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this.getChartOpts(item.itemName, item.unit) };
}; });
});
console.log("处理后的趋势图数据", this.resolt);
}, },
// 获取图表配置 // 修改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; const total = allLabels.length;
if (i === 0 || i === Math.floor(total / 2) || i === total - 3) {
return val;
}
return '';
}
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle: true,
data: [{
title: unit || '单位',
}],
},
extra: {
area: {
type: "curve",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
},
tooltip: {
textStyle: {
fontSize: 12
},
format: (item, category, index, opts) => {
return `${category}\n${item.seriesName}: ${item.data}`
}
},
line: {
width: 2,
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. 第一个标签 // 根据系列索引判断是否为阈值线（索引1和2）
if (i === 0) { if (index === 1 || index === 2) {
return val; // 设置虚线
} ctx.setLineDash([10, 5]); // 10px线段，5px间隔
ctx.lineDashOffset = 0;
} else {
// 实线
ctx.setLineDash([]);
}
// 2. 中间标签 // 调用原始绘制逻辑
const middleIndex = Math.floor(total / 2); config.chart.option.extra.render.series.line.call(this, canvas, config, series, index);
if (total % 2 === 0 && i === middleIndex - 1) {
// 如果是偶数个，显示中间两个中的前一个
return val;
} else if (i === middleIndex) {
// 如果是奇数个，显示正中间
return val;
}
// 3. 倒数第三个标签 ctx.restore();
// 确保有足够的数据点 }
if (total >= 3) { }
const thirdLastIndex = total - 3; }
if (i === thirdLastIndex) { }
return val; };
}
}
// 如果数据少于3个，显示最后一个
else if (i === total - 1) {
return val;
}
return ''; // 其他标签返回空字符串
}
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle: true,
data: [{
title: unit || '单位',
}],
},
extra: {
area: {
type: "curve",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
},
tooltip: {
textStyle: {
fontSize: 12
},
format: (item, category, index, opts) => {
return `${category}\n${item.seriesName}: ${item.data}`
}
},
markLine: {
},
line: {
width: 2,
smooth: true
}
}
};
}, },
// 自定义图例渲染（如果需要） // 自定义图例渲染（如果需要）