ghjg-digital-twin/src/echarts/options.js

import * as echarts from 'echarts'
import 'echarts-gl'
import { setOptions, nowSize } from "./echarts";


let waterLevel = null
export function setWaterLevel(ele, barData) {
	if (waterLevel) {
		waterLevel.dispose()
	}

	let maxData = [1000];
	let barWidth = 90

	let option = {
		background: 'transparent',
		grid: {
			top: '11%',
			left: '0%',
			bottom: '4%',
			right: '0%',
		},
		tooltip: {
			show: false,
		},
		animation: false,
		xAxis: [
			{
				show: false,
				type: 'category',
				data: [0],
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: false
				},


			},
		],

		yAxis: [{
			show: false,
		}],
		series: [
			{
				// name: '上部圆',
				type: 'pictorialBar',
				silent: true,
				symbolSize: [barWidth, 20],
				symbolOffset: [0, -10],
				symbolPosition: 'end',
				z: 20,
				zlevel: 10,
				data: maxData,
				itemStyle: {
					color: 'rgba(16, 89, 159, 1)',
				}
			},
			{
				// name: '背景圆柱',
				type: 'bar',
				silent: true,
				barWidth: barWidth,
				barGap: '10%', // Make series be overlap
				barCateGoryGap: '10%',
				z: 16,
				itemStyle: {
					color: 'rgba(19, 73, 112, 1)'
				},
				data: maxData,
			},
			{
				// name: '内部柱子',
				type: 'bar',
				silent: true,
				barWidth: barWidth,
				z: 19,
				barGap: '-100%',
				itemStyle: {
					// opacity: 0.7,
					color: function (params) {
						return new echarts.graphic.LinearGradient(0, 0, 0, 1,
							[
								{
									offset: 0,
									color: 'rgba(8, 78, 178, 1)'
								},
								{
									offset: 1,
									color: 'rgba(14, 154, 209, 1)',
								},
							],
							false
						);
					},
				},
				data: barData,
			},
			{
				// name: '上部圆',
				type: 'pictorialBar',
				silent: true,
				symbolSize: [barWidth, 20],
				symbolOffset: [0, -6],
				symbolPosition: 'end',
				z: 22,
				itemStyle: {
					color: function (params) {
						return new echarts.graphic.LinearGradient(0, 0, 0, 1,
							[
								{
									offset: 0,
									color: 'rgba(14, 154, 209, 1)',
								},
								{
									offset: 1,
									color: 'rgba(2, 81, 209, 1)'
								},

							],
							false
						);
					},
				},
				data: barData,
			},
			{
				// name: '底部圆',
				type: 'pictorialBar',
				silent: true,
				symbolSize: [barWidth, 20],
				symbolOffset: [0, 10],
				z: 21,
				itemStyle: {
					color: function (params) {
						return new echarts.graphic.LinearGradient(0, 0, 0, 1,
							[
								{
									offset: 0,
									color: 'rgba(0, 166, 253, 1)',
								},
								{
									offset: 1,
									color: 'rgba(1, 75, 200, 1)'
								},

							],
							false
						);
					},
				},
				data: barData,
			},
		],
	};
	waterLevel = setOptions(ele, option)
}

let entThroughput5 = null
export function setEntThroughput5(ele, dataIn) {
	if (entThroughput5) {
		entThroughput5.dispose()
	}
	let values = []
	dataIn.forEach(row => {
		values.push(row.ton)
	})

	let option = {
		backgroundColor: 'transparent',
		grid: [{
			left: "3%",
			right: "6%",
			bottom: "1%",
			top: "1%",
			containLabel: false,
		}],
		tooltip: {
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			textStyle: {
				color: "#eee",
				fontSize: nowSize(14),
				align: 'left'
			},
			axisPointer: {
				type: 'shadow'
			},
			formatter: function (params) {
				return dataIn[params[0].dataIndex].unitName + ' : ' + params[0].value
			}
		},
		xAxis: {
			axisLabel: {
				fontSize: nowSize(14),
				fontWeight: 700,
				margin: -nowSize(20),
				interval: 0
			},
			axisLine: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			data: [
				{ value: 'TOP01', textStyle: { color: 'rgba(255, 84, 31, 0.8)' } },
				{ value: 'TOP02', textStyle: { color: 'rgba(255, 170, 49, 0.8)' } },
				{ value: 'TOP03', textStyle: { color: 'rgba(77, 255, 148, 0.8)' } },
				{ value: 'TOP04', textStyle: { color: 'rgba(80, 186, 226, 0.8)' } },
				{ value: 'TOP05', textStyle: { color: 'rgba(127, 138, 255, 0.8)' } }
			]
		},
		yAxis: {
			show: false,
		},
		series: [
			{
				name: 'hill',
				type: 'pictorialBar',
				barCategoryGap: '-50%',
				symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
				label: {
					show: true,
					position: 'top',
					distance: -nowSize(10),
					formatter: function (params) {
						let label = dataIn[params.dataIndex].unitName
						if (label.length > 6) {
							label = label.slice(0, 6) + '...'
						}
						return '{value|' + params.value + '}\n{label|' + label + "}"
					},
					rich: {
						value: {
							fontSize: nowSize(16),
							fontFamily: 'Barlow',
							fontWeight: 600,
							color: "rgba(255,255,255,0.9)",
							padding: [nowSize(5), 0],
							align: 'center'
						},
						label: {
							fontSize: nowSize(12),
							fontWeight: 400,
							color: "rgba(255,255,255,0.7)",
						}
					}

				},
				itemStyle: {
					color: function (params) {
						let colorList = [
							{ color0: 'rgba(255, 84, 31, 0.5)', color1: 'rgba(255, 84, 31, 0.1)' },
							{ color0: 'rgba(255, 170, 49, 0.5)', color1: 'rgba(255, 170, 49, 0.1)' },
							{ color0: 'rgba(77, 255, 148, 0.5)', color1: 'rgba(77, 255, 148, 0.1)' },
							{ color0: 'rgba(80, 186, 226, 0.5)', color1: 'rgba(80, 186, 226, 0.1)' },
							{ color0: 'rgba(127, 138, 255, 0.5)', color1: 'rgba(127, 138, 255, 0.1)' },
						]
						return {
							type: "linear", x: 0, y: 0, x2: 0, y2: 1,
							colorStops: [
								{ offset: 0, color: colorList[params.dataIndex].color1 },
								{ offset: 1, color: colorList[params.dataIndex].color0 }
							],
							globalCoord: false
						}
					}
				},
				emphasis: {
					opacity: 1
				},
				data: values, // 修改值
				z: 10
			}
		]
	}

	entThroughput5 = setOptions(ele, option)
}

let sjjk = null
export function setSjjk(ele, dataIn) {
	if (sjjk) {
		sjjk.dispose()
	}

	let maxV = 0
	let month = []; let value = []; let total = []
	dataIn.forEach(i => {
		month.push(i.month)
		value.push(i.value)
		total.push(i.total)
		if (i.value > maxV) {
			maxV = i.value
		} else if (i.total > maxV) {
			maxV = i.total
		}
	})
	maxV += 5 - maxV % 5

	let option = {
		backgroundColor: "transparent",
		grid: {
			containLabel: true,
			left: "0%",
			right: "0%",
			top: "15%",
			bottom: "0%",
		},
		tooltip: {
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			textStyle: {
				color: "#eee",
				fontSize: nowSize(12),
				align: 'left'
			},
			axisPointer: {
				type: 'shadow'
			},
		},
		legend: {
			show: false,
		},
		xAxis: [
			{
				type: 'category',
				axisLine: { show: false },
				splitLine: { show: false },
				axisTick: { show: false },
				axisLabel: {
					color: 'rgba(255, 255, 255, 1)',
					fontSize: nowSize(12)
				},
				data: month
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '方量(万m2)',
				max: maxV,
				nameTextStyle: {
					color: 'rgba(255, 255, 255, 1)',
					fontSize: nowSize(12),
					align: 'left'
				},
				axisLine: { show: false },
				axisTick: { show: false },
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: 'rgba(151, 169, 217, 0.5)'
					}

				},
				axisLabel: {
					color: 'rgba(255, 255, 255, 0.7)',
					fontSize: nowSize(12),
				}
			},
			{
				type: 'value',
				name: '合计方量(万m2)',
				max: maxV,
				nameTextStyle: {
					color: 'rgba(255, 255, 255, 1)',
					fontSize: nowSize(12),
					align: 'right'
				},
				position: 'right',
				axisLine: { show: false },
				axisTick: { show: false },
				splitLine: {
					show: false,
				},
				axisLabel: {
					color: 'rgba(255, 255, 255, 0.8)',
					fontSize: nowSize(12),
				}
			}
		],
		series: [
			{
				name: '方量',
				silent: true,
				type: 'bar',
				barWidth: nowSize(11),
				itemStyle: {

					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0.3,
						color: 'rgba(67, 166, 255, 1)'
					}, {
						offset: 1,
						color: 'rgba(0, 44, 89, 1)'
					}]),
					opacity: 1,
				},
				yAxisIndex: 0,
				data: value,
			},
			{
				name: "方量",
				type: "scatter",
				silent: true,
				tooltip: {
					show: false
				},
				emphasis: {
					scale: false,
				},
				symbol: "rect",
				symbolSize: [nowSize(18), nowSize(5)],
				itemStyle: {
					color: 'rgba(161, 245, 255, 1)',
					shadowColor: "rgba(161, 245, 255, 0.7)",
					shadowBlur: nowSize(5),
					borderWidth: 1,
					opacity: 1,
				},
				z: 2,
				data: value,
				yAxisIndex: 0,
				animationDelay: 500,
			},
			{
				name: '合计方量',
				silent: true,
				type: 'line',
				symbol: 'emptyCircle',
				symbolSize: nowSize(11),
				yAxisIndex: 1,
				itemStyle: { color: 'rgba(143, 186, 236, 1)' },
				data: total,
			}
		]
	}
	sjjk = setOptions(ele, option)
}

let cbgn = null
export function setCbgn(ele, data) {
	if (cbgn) {
		cbgn.dispose()
	}
	const xData = data.map((i) => i.name);
	const yData = data.map((i) => i.value);

	const offsetX = nowSize(8);
	const offsetY = nowSize(4);
	// 绘制左侧面
	const CubeLeft = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0,
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint;
			const c0 = [shape.x, shape.y];
			const c1 = [shape.x - offsetX, shape.y - offsetY];
			const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
			const c3 = [xAxisPoint[0], xAxisPoint[1]];
			ctx
				.moveTo(c0[0], c0[1])
				.lineTo(c1[0], c1[1])
				.lineTo(c2[0], c2[1])
				.lineTo(c3[0], c3[1])
				.closePath();
		},
	});

	// 绘制右侧面
	const CubeRight = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0,
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint;
			const c1 = [shape.x, shape.y];
			const c2 = [xAxisPoint[0], xAxisPoint[1]];
			const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
			const c4 = [shape.x + offsetX, shape.y - offsetY];
			ctx
				.moveTo(c1[0], c1[1])
				.lineTo(c2[0], c2[1])
				.lineTo(c3[0], c3[1])
				.lineTo(c4[0], c4[1])
				.closePath();
		},
	});

	// 绘制顶面
	const CubeTop = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0,
		},
		buildPath: function (ctx, shape) {
			const c1 = [shape.x, shape.y];
			const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
			const c3 = [shape.x, shape.y - offsetX];
			const c4 = [shape.x - offsetX, shape.y - offsetY];
			ctx
				.moveTo(c1[0], c1[1])
				.lineTo(c2[0], c2[1])
				.lineTo(c3[0], c3[1])
				.lineTo(c4[0], c4[1])
				.closePath();
		},
	});

	// 注册三个面图形
	echarts.graphic.registerShape("CubeLeft", CubeLeft);
	echarts.graphic.registerShape("CubeRight", CubeRight);
	echarts.graphic.registerShape("CubeTop", CubeTop);

	const rightColor1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(44, 177, 226, 1)',
		},
		{
			offset: 1,
			color: 'rgba(44, 177, 226, 0)'
		}
	])
	const leftColor1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(7, 111, 139, 1)',
		},
		{
			offset: 1,
			color: 'rgba(7, 111, 139, 0)'
		}
	])
	const topColor1 = 'rgba(87, 189, 226, 1)'
	const rightColor2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(84, 192, 189, 1)',
		},
		{
			offset: 1,
			color: 'rgba(84, 192, 189, 0)'
		}
	])
	const leftColor2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(34, 111, 105, 1)',
		},
		{
			offset: 1,
			color: 'rgba(34, 111, 105, 0)'
		}
	])
	const topColor2 = 'rgba(114, 195, 193, 1)'

	let option = {
		backgroundColor: 'transparent',
		// 提示框
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(11, 28, 63, 0.9)',
			borderColor: '#2da0de',
			textStyle: {
				color: '#ccc'
			},
		},
		grid: {
			top: '20%',
			left: '0%',
			right: '0%',
			bottom: '15%',
		},
		xAxis: [
			// 立体柱状图由两部分堆叠组成 ，设置serve中xAxisIndex可进行堆叠
			// 横向柱状图 xAxis中 type设置成value yAxis设置category ，serve中设置yAxisIndex可进行堆叠
			{
				type: 'category',
				axisTick: { show: false },
				axisLine: { show: false },
				axisLabel: {
					interval: 0,
					rotate: 0,
					color: '#ddd',
					fontSize: nowSize(13),
					margin: nowSize(5), //刻度标签与轴线之间的距离。
				},
				data: xData,
			},
			{
				type: 'category',
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: { show: false },
				splitArea: { show: false },
				splitLine: { show: false },
				data: xData,
			},
		],
		yAxis: {
			show: false,
		},
		series: [
			{
				type: "custom",
				renderItem: (params, api) => {
					const location = api.coord([api.value(0), api.value(1)]);
					return {
						type: "group",
						children: [
							{
								type: "CubeLeft",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: params.dataIndex % 2 === 0 ? leftColor1 : leftColor2
								}
							},
							{
								type: "CubeRight",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: params.dataIndex % 2 === 0 ? rightColor1 : rightColor2
								},
							},
							{
								type: "CubeTop",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: params.dataIndex % 2 === 0 ? topColor1 : topColor2
								},
							},
						],
					};
				},
				data: yData,
			},
			{
				type: "bar",
				tooltip: {
					show: false
				},
				itemStyle: {
					color: "transparent",
				},
				label: {
					show: true,
					position: 'top',
					fontSize: nowSize(14),
					color: '#DFEEFA',
					offset: [0, nowSize(-9)],
					fontFamily: 'BarlowBold'
				},
				data: yData,
			},
		],
	};

	cbgn = setOptions(ele, option)
}

let fsdll = null
export function setFsdll(ele, dataIn) {
	if (fsdll) {
		fsdll.dispose()
	}
	let month = []; let value = [];
	dataIn.forEach(i => {
		month.push(i.month)
		value.push(i.value)
	})

	let option = {
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			textStyle: {
				color: "#ddd",
				fontSize: nowSize(12),
				align: 'left'
			}
		},
		grid: {
			containLabel: true,
			top: '10%',
			left: '5%',
			right: '5%',
			bottom: '5%',
		},
		xAxis: [
			{
				type: 'category',
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: true,
					color: '#ddd',
					fontSize: nowSize(12),
					interval: 1,
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				boundaryGap: false,
				data: month
			},
		],
		yAxis: [
			{
				splitLine: {
					show: true,
					lineStyle: {
						color: '#8292a3',
						type: 'dashed',
						type: [nowSize(9), nowSize(4)],
					}
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					fontSize: nowSize(10),
					color: '#ddd'
				},
				axisTick: {
					show: false,
				},
			},
		],
		series: [
			{
				type: 'line',
				symbol: 'circle',
				showSymbol: false,
				yAxisIndex: 0,
				lineStyle: {
					width: nowSize(3),
					color: 'rgba(59, 183, 229, 1)',
					shadowColor: 'rgba(59, 183, 229, 1)',
					shadowBlur: nowSize(15),
					shadowOffsetY: nowSize(-2)
				},
				label: {
					"show": false
				},
				itemStyle: {
					color: 'rgba(59, 183, 229, 1)',
					borderColor: 'rgba(59, 183, 229, 1)',
					borderWidth: nowSize(4),
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
						[
							{
								offset: 0,
								color: 'rgba(59, 183, 229, 0.4)',
							},
							{
								offset: 1,
								color: 'rgba(59, 183, 229, 0)',
							},
						],
						false
					),
				},
				data: value,
			},
		],
	};
	fsdll = setOptions(ele, option)
}