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

111
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,7 +479,7 @@
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 = [];
@ -495,33 +495,45 @@
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"
dashLength: 10, // 设置虚线段的长度
gapLength: 5, // 设置间隔的长度
pointShape: "none",
show: true, 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,
gapLength: 5,
pointShape: "none",
show: true, show: true,
custom: {
lineDash: [10, 5]
}
}); });
} }
@ -532,7 +544,6 @@
}; };
}); });
// 更新resolt数据
this.resolt = this.resolt.map((item, index) => { this.resolt = this.resolt.map((item, index) => {
return { return {
...item, ...item,
@ -541,13 +552,12 @@
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],
@ -558,50 +568,21 @@
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) { if (!allLabels || allLabels.length === 0) return val;
return val;
}
const total = allLabels.length; const total = allLabels.length;
if (i === 0 || i === Math.floor(total / 2) || i === total - 3) {
// 1. 第一个标签
if (i === 0) {
return val; return val;
} }
return '';
// 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 ''; // 其他标签返回空字符串
} }
}, },
yAxis: { yAxis: {
@ -629,11 +610,39 @@
return `${category}\n${item.seriesName}: ${item.data}` return `${category}\n${item.seriesName}: ${item.data}`
} }
}, },
markLine: {
},
line: { line: {
width: 2, 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();
}
}
} }
} }
}; };