From 903a576cdcafb96be03d44fdd936d710067673dd Mon Sep 17 00:00:00 2001 From: lb Date: Tue, 19 Dec 2023 15:49:24 +0800 Subject: [PATCH] update --- src/components/Common/GasFlow/index.jsx | 11 + .../NatGasFlow/gasChart/chart.config.js | 195 +++++++++--------- .../components/GoodRateChart/index.jsx | 9 + 3 files changed, 120 insertions(+), 95 deletions(-) diff --git a/src/components/Common/GasFlow/index.jsx b/src/components/Common/GasFlow/index.jsx index 1ce07a8..a25ec75 100644 --- a/src/components/Common/GasFlow/index.jsx +++ b/src/components/Common/GasFlow/index.jsx @@ -144,6 +144,12 @@ function getOptions(showChart, hisState, runState) { data: v, type: "line", symbol: "circle", + // label: { + // show: true, + // position: "top", + // distance: 10, + // color: "#fffc", + // }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colors[i % colors.length] + "40" }, @@ -154,6 +160,11 @@ function getOptions(showChart, hisState, runState) { })), tooltip: { trigger: "axis", + axisPointer: { + type: "shadow", + }, + className: "xc-chart-tooltip", + // backgroundColor: '' }, }; } else { diff --git a/src/components/Common/NatGasFlow/gasChart/chart.config.js b/src/components/Common/NatGasFlow/gasChart/chart.config.js index 90ad5dc..2737b19 100644 --- a/src/components/Common/NatGasFlow/gasChart/chart.config.js +++ b/src/components/Common/NatGasFlow/gasChart/chart.config.js @@ -1,98 +1,103 @@ -import * as echarts from 'echarts'; -import { randomInt } from '../../../../utils'; +import * as echarts from "echarts"; +import { randomInt } from "../../../../utils"; export default function getOptions(seriesData, name) { - const colors = [ - '#12FFF5', - '#2760FF', - '#FFD160', - '#E80091', - '#8064ff', - '#ff8a3b', - '#8cd26d', - '#2aa1ff', - ]; - return { - color: colors, - grid: { top: 38, right: 12, bottom: 20, left: 48 }, - legend: { - show: true, - icon: 'roundRect', - top: 10, - right: 10, - padding: 0, - itemWidth: 8, - itemHeight: 8, - itemGap: 3, - height: 8, - textStyle: { - color: '#DFF1FE', - fontSize: 10, - }, - }, - xAxis: { - type: 'category', - data: Array(7) - .fill(1) - .map((_, index) => { - const today = new Date(); - const dtimestamp = today - index * 24 * 60 * 60 * 1000; - return `${new Date(dtimestamp).getMonth() + 1}.${new Date( - dtimestamp, - ).getDate()}`; - }) - .reverse(), - axisLabel: { - color: '#fff', - fontSize: 12, - }, - axisTick: { show: false }, - axisLine: { - lineStyle: { - width: 1, - color: '#213259', - }, - }, - }, - yAxis: { - name: '单位m³/h', - nameTextStyle: { - color: '#fff', - fontSize: 10, - align: 'right', - }, - type: 'value', - axisLabel: { - color: '#fff', - fontSize: 12, - formatter: '{value}', - }, - axisLine: { - show: true, - lineStyle: { - color: '#213259', - }, - }, - splitLine: { - lineStyle: { - color: '#213259a0', - }, - }, - }, - series: seriesData.map((arr, index) => ({ - name: index + 1 + '#' + name, - data: arr, - type: 'line', - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: colors[index] + '40' }, - { offset: 0.5, color: colors[index] + '20' }, - { offset: 1, color: colors[index] + '00' }, - ]), - }, - })), - tooltip: { - trigger: 'axis', - }, - }; + const colors = [ + "#12FFF5", + "#2760FF", + "#FFD160", + "#E80091", + "#8064ff", + "#ff8a3b", + "#8cd26d", + "#2aa1ff", + ]; + return { + color: colors, + grid: { top: 38, right: 12, bottom: 20, left: 48 }, + legend: { + show: true, + icon: "roundRect", + top: 10, + right: 10, + padding: 0, + itemWidth: 8, + itemHeight: 8, + itemGap: 3, + height: 8, + textStyle: { + color: "#DFF1FE", + fontSize: 10, + }, + }, + xAxis: { + type: "category", + data: Array(7) + .fill(1) + .map((_, index) => { + const today = new Date(); + const dtimestamp = today - index * 24 * 60 * 60 * 1000; + return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + dtimestamp + ).getDate()}`; + }) + .reverse(), + axisLabel: { + color: "#fff", + fontSize: 12, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: "#213259", + }, + }, + }, + yAxis: { + name: "单位m³/h", + nameTextStyle: { + color: "#fff", + fontSize: 10, + align: "right", + }, + type: "value", + axisLabel: { + color: "#fff", + fontSize: 12, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + color: "#213259", + }, + }, + splitLine: { + lineStyle: { + color: "#213259a0", + }, + }, + }, + series: seriesData.map((arr, index) => ({ + name: index + 1 + "#" + name, + data: arr, + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: colors[index] + "40" }, + { offset: 0.5, color: colors[index] + "20" }, + { offset: 1, color: colors[index] + "00" }, + ]), + }, + })), + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + className: "xc-chart-tooltip", + // backgroundColor: '' + }, + }; } diff --git a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx index ea0e9a8..7344e06 100644 --- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx +++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx @@ -167,7 +167,16 @@ function getOptions(dataList, showMore) { yAxis, tooltip: { trigger: "axis", + color: '#fff', formatter: "{b} {c}%", + axisPointer: { + type: "shadow", + }, + textStyle: { + color: '#fffc' + }, + className: "xc-chart-tooltip", + // backgroundColor: '' }, series: [ {