xuchang-new/src/components/Common/TodayFaultTotal/index.jsx

import cls from './index.module.css';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-react';

function FaultTotal(props) {
	const options = {
		color: [
			'#2760FF',
			'#5B9BFF',
			'#FFD160',
			'#8167F6',
			'#99D66C',
			'#FF8A40',
			'#12FFF5',
		],
		grid: { top: 42, right: 12, bottom: 20, left: 48 },
		legend: {
			top: 10,
			padding: 5,
			itemWidth: 12,
			itemHeight: 12,
			itemGap: 12,
			height: 12,
			textStyle: {
				color: '#DFF1FE',
				fontSize: 12,
			},
		},
		xAxis: {
			type: 'category',
			data: Array(5)
				.fill(1)
				.map((_, index) => {
					return '产线' + (index + 1);
				}),
			axisLabel: {
				color: '#fff',
				fontSize: 12,
			},
			axisTick: { show: false },
			axisLine: {
				lineStyle: {
					width: 1,
					color: '#213259',
				},
			},
		},
		yAxis: {
			name: '单位/个',
			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: [
			{
				name: '缺陷1',
				type: 'bar',
				stack: 'abcd',
				emphasis: {
					focus: 'series',
				},
				data: [320, 332, 301, 334, 390, 330, 320],
			},
			{
				name: '缺陷2',
				type: 'bar',
				stack: 'abcd',
				emphasis: {
					focus: 'series',
				},
				data: [120, 132, 101, 134, 90, 230, 210],
			},
			{
				name: '缺陷3',
				type: 'bar',
				stack: 'abcd',
				emphasis: {
					focus: 'series',
				},
				data: [220, 182, 191, 234, 290, 330, 310],
			},
			{
				name: '缺陷4',
				type: 'bar',
				stack: 'abcd',
				emphasis: {
					focus: 'series',
				},
				data: [150, 232, 201, 154, 190, 330, 410],
			},
			{
				name: '缺陷5',
				type: 'bar',
				stack: 'abcd',
				emphasis: {
					focus: 'series',
				},
				data: [862, 1018, 964, 1026, 1679, 1600, 1570],
			},
			{
				name: '缺陷6',
				type: 'bar',
				barGap: 20,
				barWidth: 12,
				stack: 'abcd',
				emphasis: {
					focus: 'series',
				},
				data: [620, 732, 701, 734, 1090, 1130, 1120],
			},
		],
		tooltip: {
			trigger: 'axis',
		},
	};

	function handleDateChange(v) {
		console.log('date ', v);
	}

	// 根据使用的页面决定背景的大小
	const bgSize =
		props.page == 'home' ? ['middle', 'short'] : ['middle', 'long'];

	return (
		<GraphBase
			icon="battery"
			title="产线缺陷统计"
			dateOptions={['日', '周', '月', '年']}
			onDateChange={handleDateChange}
			size={bgSize}
			style={{ width: '600px' }}
		>
			<div className={cls.chart}>
				<ReactECharts option={options} style={{ height: '100%' }} />
			</div>
		</GraphBase>
	);
}

export default FaultTotal;