diff --git a/src/components/Common/Energy/EnergyCostChart/index.jsx b/src/components/Common/Energy/EnergyCostChart/index.jsx index df5bfd7..7bc8ddd 100644 --- a/src/components/Common/Energy/EnergyCostChart/index.jsx +++ b/src/components/Common/Energy/EnergyCostChart/index.jsx @@ -1,126 +1,141 @@ -import cls from './index.module.css'; -import { randomInt } from '../../../../utils'; -import * as echarts from 'echarts'; -import { Switch, Radio } from 'antd'; -import ReactECharts from 'echarts-for-react'; +import cls from "./index.module.css"; +import { randomInt } from "../../../../utils"; +import * as echarts from "echarts"; +import { Switch, Radio } from "antd"; +import ReactECharts from "echarts-for-react"; const EnergyCostChart = (props) => { - const options = { - color: ['#FFD160', '#12FFF5', '#2760FF'], - grid: { top: 32, right: 12, bottom: 56, left: 48 }, - 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³', - 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', - }, - }, - interval: 10, - min: 0, - max: 100, - }, - series: [ - { - data: Array(7) - .fill(1) - .map((_) => { - return randomInt(60, 100); - }), - type: 'line', - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#FFD16040' }, - { offset: 0.5, color: '#FFD16020' }, - { offset: 1, color: '#FFD16010' }, - ]), - }, - // smooth: true, - }, - ], - tooltip: { - trigger: 'axis', - }, - }; + const options = { + color: ["#FFD160", "#12FFF5", "#2760FF"], + grid: { top: 32, right: 12, bottom: 56, left: 48 }, + 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³", + 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", + }, + }, + interval: 10, + min: 0, + max: 100, + }, + series: [ + { + data: Array(7) + .fill(1) + .map((_) => { + return randomInt(60, 100); + }), + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#FFD16040" }, + { offset: 0.5, color: "#FFD16020" }, + { offset: 1, color: "#FFD16010" }, + ]), + }, + // smooth: true, + }, + ], + tooltip: { + trigger: "axis", + }, + }; - function handleSwitchChange(val) { - } + function handleSwitchChange(val) {} - return ( -