From fdda6f0f6d148fa3bb41b068db4fc5e2e4d5bce6 Mon Sep 17 00:00:00 2001 From: "978184212@qq.com" <978184212@qq.com> Date: Mon, 8 Dec 2025 18:24:48 +0800 Subject: [PATCH] =?UTF-8?q?echarts=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packDetail/pages/sjdyj/index.vue | 321 ++++++++++++++++--------------- 1 file changed, 165 insertions(+), 156 deletions(-) diff --git a/packDetail/pages/sjdyj/index.vue b/packDetail/pages/sjdyj/index.vue index 38237d6..a63d00f 100644 --- a/packDetail/pages/sjdyj/index.vue +++ b/packDetail/pages/sjdyj/index.vue @@ -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,164 +479,173 @@ maskClick(e) { this.rangetime = e; }, - // 处理图表数据 + // 处理图表数据 - 修改getServerData方法 getServerData(val) { - const chartDataList = val.map(item => { - const series = []; - - // 处理主要数据 - const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0)) - .map(value => Number(value) || 0); - - const highValNum = item.highVal ? Number(item.highVal) || 0 : null; - const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null; - - // 正常数据线 - 实线 - series.push({ - name: item.itemName, - data: mainData, - color: "#1890FF", - 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", // 不显示点 - show: true, - }); - } - - // 最低阈值线 - 虚线 - if (lowValNum !== null) { - series.push({ - name: `最低阈值: ${lowValNum}`, - data: Array(this.timeList?.length || 0).fill(lowValNum), - color: "#19D58A", - lineType: "dashed", // 虚线 - pointShape: "none", // 不显示点 - show: true, - }); - } - - return { - categories: this.timeList.slice(0, 50) || [], - series: series, - chartOpts: this.getChartOpts(item.itemName, item.unit) - }; - }); - - // 更新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) - }; - }); - console.log("处理后的趋势图数据", this.resolt); + const chartDataList = val.map(item => { + const series = []; + + // 处理主要数据 + const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0)) + .map(value => Number(value) || 0); + + const highValNum = item.highVal ? Number(item.highVal) || 0 : null; + const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null; + + // 正常数据线 - 实线 + series.push({ + name: item.itemName, + data: mainData, + 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: "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: "dash", + dashLength: 10, + gapLength: 5, + pointShape: "none", + show: true, + custom: { + lineDash: [10, 5] + } + }); + } + + return { + categories: this.timeList.slice(0, 50) || [], + series: series, + chartOpts: this.getChartOpts(item.itemName, item.unit) + }; + }); + + 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) { - return { - color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", - "#FC8452", "#9A60B4", "#ea7ccc" - ], - padding: [0, 15, 10, 5], - legend: { - show: true, - position: "top", - float: "right", - itemGap: 10, - margin: 10, - }, - enableScroll: false, // 禁用滚动，显示所有数据 - dataLabel: false, - xAxis: { - disableGrid: true, - scrollShow: false, // 不显示滚动条 - labelCount: 3, // 设置显示3个标签（对应我们要显示的3个点） - boundaryGap: 'justify', - // 自定义标签显示：显示第一个、中间和倒数第三个数据 - labelFormatter: (val, i, allLabels) => { - if (!allLabels || allLabels.length === 0) { - return val; - } - - const total = allLabels.length; - - // 1. 第一个标签 - if (i === 0) { - 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 ''; // 其他标签返回空字符串 - } - }, - 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 - } - } - }; + return { + color: ["#c3c3c3", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", + "#FC8452", "#9A60B4", "#ea7ccc" + ], + padding: [0, 15, 10, 5], + legend: { + show: true, + position: "top", + float: "right", + itemGap: 10, + margin: 10, + }, + enableScroll: false, + dataLabel: false, + xAxis: { + disableGrid: true, + scrollShow: false, + labelCount: 3, + boundaryGap: 'justify', + labelFormatter: (val, i, allLabels) => { + if (!allLabels || allLabels.length === 0) return val; + + 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和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(); + } + } + } + } + }; }, // 自定义图例渲染（如果需要）