<!-- 
    filename: ISRAChart.vue
    author: liubin
    date: 2023-12-12 09:05:25
    description: 
-->

<template>
	<div class="isra-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'

export default {
	name: 'ISRAChart',
	mixins: [resize],
	components: {},
	props: {},
	data() {
		return {
			chart: null,
			colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
			chartData: [],
			option: {
				tooltip: {
					trigger: 'item',
				},
				legend: {
					bottom: '3%',
					left: 'center',
					icon: 'circle',
					textStyle: {
						color: '#fff'
					}
				},
				title: {
					text: 0,
					subtext: '总数',
					top: '43%',
					left: '49%',
					textAlign: 'center',
					textStyle: {
						fontSize: 32,
						lineHeight: 16,
						color: '#fff',
					},
					subtextStyle: {
						fontSize: 16,
						color: '#fff00',
					},
				},
				series: []
			},
		};
	},
	mounted() {
		this.initChart();
	},
	activated() {
	},
	computed: {
		israChartMsg() {
			return this.$store.state.websocket.israKiln
		}
	},
	watch: {
		israChartMsg: {
			handler(newVal, oldVal) {
				console.log(newVal)
				this.chartData = newVal
				console.log('newVal============')
				this.updateChart()
			}
		}
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el);
			this.chart.setOption(this.option);
		},
		updateChart() {
			console.log('update')
			let num = 0
			this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
				num+=i.num
			})
			this.chart.setOption({
				title:{
					text: num,
					subtext: '总数',
					top: '43%',
					left: '49%',
					textAlign: 'center',
					textStyle: {
						fontSize: 32,
						lineHeight: 16,
						color: '#fff',
					},
					subtextStyle: {
						fontSize: 16,
						color: '#fff00',
					},
				},
				series:[{
						name: 'Access From',
						type: 'pie',
						radius: ['45%', '65%'],
						avoidLabelOverlap: true,
						label: {
							show: true,
							position: 'outside',
							formatter: ({ dataIndex, percent }) => {
								const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
								return `{${styleName}|${percent}%}`;
							},
							rich: {
								a: {
									color: '#2760ff',
									fontSize: 24,
									borderWidth: 0,
									textBorderWidth: 0,
								},
								b: {
									color: '#518eec',
									fontSize: 24,
									borderWidth: 0,
									textBorderWidth: 0,
								},
								c: {
									color: '#0ee8e4',
									fontSize: 24,
									borderWidth: 0,
									textBorderWidth: 0,
								},
								d: {
									color: '#ddb523',
									fontSize: 24,
									borderWidth: 0,
									textBorderWidth: 0,
								},
							},
						},
						labelLine: {
							show: true,
						},
						itemStyle: {
							borderRadius: 12
						},
						data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
						name:item.name,
						value: item.num,
						itemStyle:{
							color:{
								type: 'linear',
								x: 1,
								y: 1,
								x2: 0,
								y2: 0,
								global: false,
								colorStops:[
									{offset: 0,color: this.colors[index%4]},
									{offset: 1,color: this.colors[index%4]+'33'}
								]
							}
						}
					}))}]
			})
		}
	},
};
</script>

<style scoped lang="scss">
.isra-chart {
	width: 100%;
	height: 100%;
}
</style>
