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

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

			};
		},
		watch: {
			// 监听 message 的变化
			apiData(val) {
				// console.log('父组件传递的值发生变化：', val);
				this.init(val);
			}
		},
		methods: {
			async init(data) {
				let option = {
					title: {
						show: false,
						text: 'SOC准确度',
						textStyle: {
							color: '#FFFFFF'
						},
						left: '300px',
						top: '300'

					},
					tooltip: {
						show: false,
						formatter: "{b} <br> {c}%"

					},
					legend: {
						show: false,
						icon: "circle",
						bottom: '43%',
						left: '20%',
						itemWidth: 7,
						itemHeight: 7,
						itemGap: 40,
						textStyle: {
							color: '#89A7AF',
						},
						data: [{
								name: 'SOC准确度'
							},
							// {
							// 	name: '危化品'
							// },
						]
					},
					xAxis: [{
						type: 'value',
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false,
						}
					}],
					yAxis: [{
						position: 'right', // 将Y轴标签设置到最右边
						offset: -3,
						type: 'category',
						data: ['SOC'],
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: 'rgba(136, 169, 205, 1)',
							}
						}

					}],
					series: [{
							name: 'SOC准确度',
							type: 'bar',
							barWidth: 16,
							label: {
								normal: {
									borderWidth: 10,
									distance: 20,
									align: 'center',
									verticalAlign: 'middle',
									show: true,
									position: 'top',
									formatter: '{c}%',
									color: '#fff'
								}
							},
							itemStyle: {
								color: '#55ffff'
							},
							data: [{
								value: data.socAccuracy,
								itemStyle: {
									normal: {
										color: {
											type: 'bar',
											colorStops: [{
												offset: 0,
												color: '#55ffff' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#55ffff' // 100% 处的颜色
											}],
											globalCoord: false, // 缺省为 false

										}
									}
								}
							}]
						},
						// {
						// 	name: '危化品',
						// 	type: 'bar',
						// 	barWidth: 16,
						// 	stack: '危货种类占比',
						// 	itemStyle: {
						// 		color: '#00ff7f'
						// 	},
						// 	label: {
						// 		normal: {
						// 			borderWidth: 10,
						// 			distance: 20,
						// 			align: 'center',
						// 			verticalAlign: 'middle',
						// 			// borderRadius: 1,
						// 			// borderColor: '#00ff7f',
						// 			// backgroundColor: '#00ff7f',
						// 			show: true,
						// 			position: 'top',
						// 			formatter: '90%',
						// 			color: '#fff'
						// 		}
						// 	},
						// 	data: [{
						// 		value: 30,
						// 		itemStyle: {
						// 			normal: {
						// 				color: {
						// 					type: 'bar',
						// 					colorStops: [{
						// 						offset: 0,
						// 						color: '#00ff7f' // 0% 处的颜色
						// 					}, {
						// 						offset: 1,
						// 						color: '#00ff7f' // 100% 处的颜色
						// 					}],
						// 					globalCoord: false, // 缺省为 false

						// 				}
						// 			}
						// 		}
						// 	}]
						// },
					]
				}
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(option)
				// 监听窗口大小改变事件，并调用resize方法
				window.onresize = function() {
					myChart.resize();
				};
			}
		}
	}
</script>

<style lang="less">

</style>