echarts 多色环形图中间显示内容

最新推荐文章于 2024-03-12 11:14:18 发布

雨沫相与

最新推荐文章于 2024-03-12 11:14:18 发布

阅读量280

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/u011933026/article/details/134186268

版权

"echarts": "^5.2.0",

<template>
	<div :class="className" :style="{height:height,width:width}" id="myChart7" />
</template>

<script>
	import * as echarts from 'echarts';
	import resize from '@/utils/resize.js'
	
	export var data1 = [{
				value: 890,
				name: '扶贫帮困'
			},
			{
				value: 721,
				name: '卫生环保'
			},
			{
				value: 442,
				name: '科学普及'
			},
			{
				value: 466,
				name: '应急事件'
			},
			{
				value: 176,
				name: '法律服务'
			},
			{
				value: 674,
				name: '邻里互助'
			}

		]

		export default {
			 mixins: [resize],
			props: {
				className: {
					type: String,
					default: 'chart'
				},
				width: {
					type: String,
					default: '24vw'
				},
				height: {
					type: String,
					default: '20vh'
				},
				chartData: {
					type: Array,
					required: true
				}
			},
			data() {
				return {
					chart: null,
					timer: 0,
					number: '1293',
				}
			},
			watch: {
				chartData: {
					deep: true,
					handler(val) {
						this.setOption(val)
						// this.setOptions(val)
					}
				}
			},
			mounted() {
				// this.$nextTick(() => {
				this.initChart();
				// })
			},
			beforeDestroy() {
				if (!this.chart) {
					return
				}
				this.chart.dispose()
				this.chart = null
				// clearInterval(this.timer); //销毁定时器
			},
			methods: {
				// 清空当前实例
				clearHander() {
					if (this.chart) {
						// clearInterval(this.timer); //销毁定时器
						this.chart.dispose();
					}
				},
				initChart() {

					var myChart = echarts.init(document.getElementById('myChart7'));
					var option = {

						tooltip: {
							trigger: 'item',
							formatter: '{b}'
						},
						legend: {
							orient: 'vertical',
							right: 40,
							itemHeight: 10,
							itemWidth: 10,
							width: 100, //图例的宽度，想要对齐这个必须要有
							itemGap: 18, //各组的间距
							data: ['扶贫帮困', '卫生环保', '科学普及', '应急事件', '法律服务', '邻里互助'],
							// textStyle: { //图例文字的样式
							// 	color: '#A9D5E8',
							// 	fontSize: 12
							// },
							textStyle: {
								rich: {
									name: {
										fontSize: 14,
										color: "#A9D5E8",
										padding: [0, 50, 0, 0]
									},
									num: {
										fontSize: 14,
										fontWeight: 500,
										padding: [0, 0, 0, 0],
										color: "#A9D5E8"
									}
								}
							},
							formatter: function(name) {
								let tarValue;
								for (let i = 0; i < data1.length; i++) {
									if (data1[i].name == name) {
										tarValue = data1[i].value;
									}
								}
								return `{name|${name}}{num|${tarValue}}`;
							},
						},
						color: ['#FE6361', '#09CCFD', '#23C343', '#89E9E0', '#A871E3', '#0095FF'],
						series: [{
								name: '政治面貌',
								type: 'pie',
								x: 'left',
								radius: ['60%', '85%'],
								center: ['30%', '45%'], //第一个调整左右，第二个调整上下
								itemStyle: {
									borderRadius: 3,
									borderColor: '#0A2172',
									borderWidth: 2
								},
								label: {
									normal: {
										show: true,
										position: 'center',
										color: '#fff',
										formatter: '{total|1293}\n{active|总人数}',
										rich: {
											total: {
												fontSize: 32,
												fontWeight: 'bolder',
												color: '#fff'
											},
											active: {
												fontSize: 16,
												color: '#fff',
												lineHeight: 30,
											},
										}
									}
								},
								emphasis: {
									label: {
										show: true,
										fontSize: 14,
										color: '#fff',
									}
								},
								labelLine: {
									normal: {
										length: 4, // 改变标示线的长度
										lineStyle: {
											color: "#7DA4BE" // 改变标示线的颜色
										}
									},
								},

								data: data1,
							},
							{
								name: '外边框',
								type: 'pie',
								clockWise: false,
								radius: ['50%', '52%'], //边框大小
								center: ['30%', '45%'], //边框位置
								color: ['#0F2864'],
								data: [{
									value: 0,
									itemStyle: {
										normal: {
											borderType: 'dotted', //dotted 虚线
											borderWidth: 3, //设置边框粗细
											borderColor: 'rgba(83, 144, 148, 1)', //边框颜色
											// color: 'rgba(83, 144, 148, 1)',
										}
									}
								}]
							},
						]

					};

					myChart.setOption(option);
					window.addEventListener('resize', function() {
						myChart.resize()
					})
					// window.addEventListener('resize', myChart.resize);


				},


			}
		}
</script>