echarts——环形图

贝塔贝卡贝

于 2023-07-18 10:58:29 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/131782607

该代码段展示了如何用Echarts库初始化一个图表，创建一个带有动态效果的饼图，其中包含两个环形层，内层固定颜色，外层使用径向渐变色，并有动画效果。主要涉及到的配置项包括数据值、样式、动画类型和延迟时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

const value_ze = 60
const value2_ze = 30
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
	title: {
		text: `目标完成率`,
		subtext: [`{a|${value_ze}}`, '{b|%}'].join(''),

		itemGap: 10,
		textStyle: {
			fontSize: '14',
			color: '#fff',
			fontWeight: 500
		},
		subtextStyle: {
			rich: {
				a: {
					fontSize: '32',
					color: '#fff',
					fontWeight: 500,
					fontFamily: "numStyle"
				},
				b: {
					fontSize: '14',
					color: '#fff',
					padding: [8, 0, 0, 6]
				},
			}
		},
		left: 'center',
		top: '35%',
	},
	grid: {
		top: '0%',
		left: '0%',
		right: '0%',
		bottom: '0%',
		containLabel: true
	},
	visualMap: {
		show: false,
	},
	series: [
		{
			name: '',
			type: 'pie',
			radius: ['94%', '96%'],
			center: ['50%', '50%'],
			itemStyle: {
				label: {
					show: false,
				},
			},
			hoverAnimation: false,
			data: [
				{
					value: 100,
					label: {
						show: false,
					},
					itemStyle: {
						normal: {
							color: "#0b5d75"
						}
					},
				}
			],
		},

		{
			type: 'pie',
			radius: ['76%', '86%'],
			center: ['50%', '50%'],
			data: [
				{
					value: value_ze,
					itemStyle: {
						normal: {
							color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
								{
									offset: 0.25,
									color: '#00dddd' // 0% 处的颜色
								},
								{
									offset: 0.5,
									color: '#2491ff' // 0% 处的颜色
								},
								{
									offset: 0.75,
									color: '#00b7ff' // 0% 处的颜色
								},
								{
									offset: 1,
									color: '#fff' // 100% 处的颜色
								}
							])
						}
					},
				},
				{ value: value2_ze, itemStyle: { color: 'rgba(34, 145, 255, 0.3)' } },
			],

			label: {
				//将视觉引导图关闭
				show: false,
			},
			// 初始化echarts的动画效果
			animationType: 'scale',
			animationEasing: 'elasticOut',
			animationDelay: function (idx) {
				return Math.random() * 200;
			}
		}
	]
};
myChart.setOption(option);