xuchang-screen/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx

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 SmokeTrendChart = (props) => {
	const options = {
		color: ['#FFD160', '#12FFF5', '#2760FF'],
		grid: { top: 38, right: 12, bottom: 20, 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³/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',
				},
			},
			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,
			},
			{
				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: '#12FFF540' },
						{ offset: 0.5, color: '#12FFF520' },
						{ offset: 1, color: '#12FFF510' },
					]),
				},
				// smooth: true,
			},
			{
				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: '#2760FF40' },
						{ offset: 0.5, color: '#2760FF20' },
						{ offset: 1, color: '#2760FF10' },
					]),
				},
				// smooth: true,
			},
		],
		tooltip: {
			trigger: 'axis',
		},
	};

	function handleSwitchChange(val) {
		// val: boolean
		console.log('switch change', val);
	}

	return (
		<div className={cls.energyCostChart}>
			<div className={cls.titleBar}>
				<h2>能耗趋势图</h2>
				<Switch defaultChecked onChange={handleSwitchChange} />
				<div className={cls.legend}>
					<span className="legend__title">班次详情</span>
					<ul className="legend__list">
						<li>总量</li>
						<li>白班</li>
						<li>夜班</li>
					</ul>
				</div>
			</div>

			<div className={`${cls.choiceBar} flex items-center justify-between`}>
				<Radio.Group
					defaultValue="oxygen"
					buttonStyle="solid"
					className={`${cls.radioGroup} flex items-center justify-between`}
				>
					<Radio.Button value="oxygen" className="radio-group__item">
						氧气含量
					</Radio.Button>
					<Radio.Button value="so2" className="radio-group__item">
						二氧化硫
					</Radio.Button>
					<Radio.Button value="no" className="radio-group__item">
						一氧化氮
					</Radio.Button>
					<Radio.Button value="no2" className="radio-group__item">
						二氧化氮
					</Radio.Button>
				</Radio.Group>

				<Radio.Group
					defaultValue="week"
					buttonStyle="solid"
					className={cls.radioGroup}
				>
					<Radio.Button value="day" className="radio-group__item">
						日
					</Radio.Button>
					<Radio.Button value="week" className="radio-group__item">
						周
					</Radio.Button>
					<Radio.Button value="month" className="radio-group__item">
						月
					</Radio.Button>
					<Radio.Button value="year" className="radio-group__item">
						年
					</Radio.Button>
				</Radio.Group>
			</div>
			<ReactECharts option={options} />
		</div>
	);
};

export default SmokeTrendChart;