yudao-dev/src/views/databoard/components/ISRAChart.vue

<!-- 
    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';

export default {
	name: 'ISRAChart',
	components: {},
	props: {},
	data() {
		return {
			chart: null,
			option: {
				color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
				tooltip: {
					trigger: 'item',
				},
				title: {
					text: 11234,
					subtext: '总数',
					top: '43%',
					left: '49%',
					textAlign: 'center',
					textStyle: {
						fontSize: 32,
						lineHeight: 16,
						color: '#fff',
					},
					subtextStyle: {
						fontSize: 16,
						color: '#fff7',
					},
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: ['60%', '85%'],
						avoidLabelOverlap: true,
						label: {
							show: true,
							position: 'outside',
							formatter: ({ dataIndex, percent }) => {
								// console.log(
								// 	['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
								// 	percent
								// );
								const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
								return `{${styleName}|${percent}%}`;
							},
							rich: {
								a: {
									color: '#2760ff',
									fontSize: 18,
									borderWidth: 0,
									textBorderWidth: 0,
								},
								b: {
									color: '#518eec',
									fontSize: 18,
									borderWidth: 0,
									textBorderWidth: 0,
								},
								c: {
									color: '#0ee8e4',
									fontSize: 18,
									borderWidth: 0,
									textBorderWidth: 0,
								},
								d: {
									color: '#ddb523',
									fontSize: 18,
									borderWidth: 0,
									textBorderWidth: 0,
								},
							},
						},
						labelLine: {
							show: true,
						},
						itemStyle: {
							borderRadius: 12,
							// borderColor: 'transparent',
							// borderWidth: 20
						},
						data: [
							{
								value: 1048,
								name: '缺陷1',
								itemStyle: {
									color: {
										type: 'linear',
										x: 1,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [
											{
												offset: 0,
												color: '#2760ff', // 0% 处的颜色
											},
											// {
											// 	offset: 0.6,
											// 	color: 'transparent', // 80% 处的颜色
											// },
											{
												offset: 1,
												color: '#2760ff33', // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									},
								},
							},
							{
								value: 735,
								name: '缺陷2',
								itemStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 1,
										y2: 0,
										colorStops: [
											{
												offset: 0,
												color: '#518eec', // 0% 处的颜色
											},
											// {
											// 	offset: 0.6,
											// 	color: 'transparent', // 80% 处的颜色
											// },
											{
												offset: 1,
												color: '#518eec33', // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									},
								},
							},
							{
								value: 580,
								name: '缺陷3',
								itemStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 1,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: '#0ee8e4', // 0% 处的颜色
											},
											// {
											// 	offset: 0.6,
											// 	color: 'transparent', // 80% 处的颜色
											// },
											{
												offset: 1,
												color: '#0ee8e433', // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									},
								},
							},
							{
								value: 484,
								name: '缺陷4',
								itemStyle: {
									color: {
										type: 'linear',
										x: 1,
										y: 0,
										x2: 0,
										y2: 0,
										colorStops: [
											{
												offset: 0,
												color: '#ddb523', // 0% 处的颜色
											},
											// {
											// 	offset: 0.6,
											// 	color: 'transparent', // 70% 处的颜色
											// },
											{
												offset: 1,
												color: '#ddb52333', // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									},
								},
							},
						],
					},
				],
			},
		};
	},
	mounted() {
		this.initChart();
	},
	activated() {
		// this.initChart();
	},
	computed: {},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el);
			this.chart.setOption(this.option);
		},
	},
};
</script>

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