标签：百分比 白色 color WidthAdaptive myChart 环行 dataIndex var type

<template>
	<div id="xxxx" style="width: 100%; height: 100%;"></div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.myecharts();
			this.WidthAdaptive();
		},
		watch: {

		},
		methods: {
			WidthAdaptive(res) {
				var windth = window.screen.width;
				let fontSize = windth / 4422;
				return fontSize * res;
			},
			myecharts() {
				let myChart = this.$echarts.init(document.getElementById('xxxx'));

				// 数据
				const dataArray = [{
						name: '汉族',
						value: 50
					},
					{
						name: '回族',
						value: 30
					},
					{
						name: '满族',
						value: 10
					},
					{
						name: '其他',
						value: 10
					}
				]

				// 计算总数
				let total = dataArray.reduce((p, v) => {
					return p + v.value
				}, 0)

				// 颜色
				const color = ['#00D5FF', '#00BF8F', '#0095FF', '#FFCF40']

				// tooltip
				let tooltip = {
					trigger: 'item',
					show: true,
					backgroundColor: 'rgba(2, 26, 47, 0.62)',
					borderColor: 'transparent',
					padding: [8, 20, 8, 8],
					textStyle: {
						color: '#fff',
						opacity: 1,
						fontSize: this.WidthAdaptive(16),
					},
					axisPointer: {
						type: 'line'
					}
				}
				
				// graphic
				// const graphic = {
				// 	elements: [{
				// 		type: "image",
				// 		style: {
				// 			image: require("../../img/bg.png"),
				// 			width: this.WidthAdaptive(343),
				// 			height: this.WidthAdaptive(343),
				// 		},
				// 		left: 'center',
				// 		top: 'center',
				// 		silent: true,
				// 	}]
				// }

				// series
				const series = [{
					type: 'pie',
					radius: ['40%', '55%'],
					center: ['50%', '50%'],
					hoverAnimation: true,
					hoverOffset: this.WidthAdaptive(10),
					color: color,
					itemStyle: {
						borderColor: "rgba(2, 26, 47, 0.62)",
						borderWidth: this.WidthAdaptive(5)
					},
					label: {
						show: true,
						padding: [this.WidthAdaptive(-30), this.WidthAdaptive(-50), 0, this.WidthAdaptive(-50)],
						fontSize: this.WidthAdaptive(16),
						color: '#ffffff',
						formatter: '{d}%'
					},
					labelLine: {
						normal: {
							length: this.WidthAdaptive(20),
							length2: this.WidthAdaptive(90),
							lineStyle: {
								color: '#ffffff',
								opacity: 0.6
							}
						}
					},
					data: dataArray
				}]

				// 渲染
				var option = {
					tooltip,
					series,
					color,
					// graphic
				}
				myChart.setOption(option);
				window.onresize = myChart.resize;

				//获取最大值下标
				var ds = option.series[0].data;
				var max = ds[0];
				var indexs = 0;
				for (var i = 0; i < ds.length; i++) {
					if (max < ds[i]) {
						max = ds[i];
						indexs = i;
					}
				}

				//默认选中最大值
				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0, // 显示第几个series
					dataIndex: indexs // 显示第几个数据
				});


				let index = 0;
				myChart.on("mouseover", function(e) {
					if (e.dataIndex != index) {
						myChart.dispatchAction({
							type: "downplay",
							seriesIndex: 0,
							dataIndex: index
						});
					}
				});
				myChart.on("mouseout", function(e) {
					index = e.dataIndex;
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: e.dataIndex
					});
				});
			}
		},
	}
</script>

<style scoped>
</style>

标签：百分比,白色,color,WidthAdaptive,myChart,环行,dataIndex,var,type
来源： https://www.cnblogs.com/a973692898/p/16067526.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。