carDetectionReport/components/lineChart.vue

<template>
	<view style="width:100%; height:450rpx">
		<l-echart ref="chartRef" :id="id"></l-echart>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		name: "lineChart",
		props: {
			apiData: {
				type: Object, // 定义 props 类型
				default: null // 默认值
			},
			lineType: {
				type: String,
				default: ''
			},
			id: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		watch: {
			// 监听 message 的变化
			apiData(val) {
				// console.log('父组件传递的值发生变化：', val);
				this.init(val);
			},
			deep: true
		},
		mounted() {},
		methods: {
			async init(data) {
				let XData
				let valueData
				let unitMap = {
					yName: '',
					name1: '',
					name2: ''
				}
				if (this.lineType == '电压') {
					const formattedData = data.voltTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.voltMesValue,
						data2: data.voltReqValue,
					};
					unitMap.yName = '单位：V'
					unitMap.name1 = '需求电压'
					unitMap.name2 = '充电电压'
				} else if (this.lineType == '电流') {
					const formattedData = data.currentTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.currentMesValue,
						data2: data.currentReqValue,
					};
					unitMap.yName = '单位：A'
					unitMap.name1 = '需求电流'
					unitMap.name2 = '充电电流'
				} else if (this.lineType == 'BMS') {
					const formattedData = data.bmsAccuracyTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.bmsCurrentAccuracyValue,
						data2: data.bmsVoltAccuracyValue,
					};
					unitMap.yName = '单位：%'
					unitMap.name1 = 'BMS电流精度'
					unitMap.name2 = 'BMS电压精度'
				}

				let option = {
					tooltip: {
						trigger: "axis",
					},
					legend: {
						x: "right",
						textStyle: {
							color: "#fff"
						},
					},
					grid: {
						top: "15%",
						left: "1%",
						right: "3%",
						bottom: "3%",
						containLabel: true,
					},
					xAxis: {
						// name: "充电时间",
						// nameLocation: 'end',
						// nameTextStyle: {
						// 	color: 'rgb(127,127,127)', // 名称颜色
						// 	fontSize: 9, // 名称字体大小
						// 	fontWeight: 'bold' // 名称字体加粗
						// },
						type: "category",
						data: XData,
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: "#88A9CD",
							},
						},
						axisLabel: {
							textStyle: {
								color: "#88A9CD",
							},
						},
					},
					yAxis: [{
						name: unitMap.yName,
						type: "value",
						axisLabel: {
							textStyle: {
								color: "#88A9CD",
							},
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#88A9CD",
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "#88A9CD",
							},
						},
					}, ],
					series: [{
							name: unitMap.name1,
							type: "line",
							data: valueData.data1,
							symbolSize: 2, //标记的大小
							symbol: "circle",
							lineStyle: {
								width: 2,
								color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
										offset: 0,
										color: "#28B4FF",
									},
									{
										offset: 1,
										color: "#3CFDFF",
									},
								]),
								shadowColor: "rgba(158,135,255, 0.3)",
								// shadowBlur: 10,
								// shadowOffsetY: 20,
							},
							itemStyle: {
								normal: {
									color: "#28B4FF",
								},
							},
							smooth: true,
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(108,80,243,0.3)'
										},
										{
											offset: 1,
											color: 'rgba(108,80,243,0)'
										}
									], false),
									shadowColor: '#28B4FF',
									shadowBlur: 20
								}
							},
						},
						{
							name: unitMap.name2,
							type: "line",
							data: valueData.data2,
							symbolSize: 2, //标记的大小
							symbol: "circle",
							lineStyle: {
								width: 2,
								color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
										offset: 0,
										color: "#00FFA6",
									},
									{
										offset: 1,
										color: "#00A693",
									},
								]),
								shadowColor: "rgba(158,135,255, 0.3)",
								// shadowBlur: 10,
								// shadowOffsetY: 20,
							},
							itemStyle: {
								normal: {
									color: "#00FFA6",
								},
							},
							smooth: true,
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(0, 255, 166, 0.3)'
										},
										{
											offset: 1,
											color: 'rgba(0, 255, 166, 0)'
										}
									], false),
									shadowColor: '#28B4FF',
									shadowBlur: 20
								}
							},
						},
					],
				};
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(option)
				// 监听窗口大小改变事件，并调用resize方法
				window.onresize = function() {
					myChart.resize();
				};
			}
		}
	}
</script>

<style lang="less">

</style>