echarts——环形图

该代码段展示了如何用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);
### Vue 中 ECharts 环形饼状动画效果实现 #### 创建表容器 为了在页面中显示环形饼状,首先需要创建一个用于容纳表的 `div` 容器。这可以通过定义 HTML 结构中的特定类名来完成。 ```html <div id="app"> <div class="echarts" ref="ringChart"></div> </div> ``` 此结构提供了放置表的空间,并允许通过 JavaScript 访问该元素以便初始化 ECharts 实例[^3]。 #### 初始化 ECharts 表实例 接下来,在 Vue 组件的方法或生命周期钩子内初始化 ECharts 的实例对象: ```javascript import * as echarts from 'echarts'; export default { mounted() { this.initRingChart(); }, methods: { initRingChart() { const chartDom = document.querySelector('.echarts'); const myChart = echarts.init(chartDom); let option; // 配置项设置... option && myChart.setOption(option); window.addEventListener('resize', function () { myChart.resize(); }); } } } ``` 这段代码展示了如何利用 `mounted()` 生命周期方法调用自定义函数 `initRingChart()` 来启动并配置表实例。 #### 设置基础选项与样式 对于环形饼状而言,重要的是调整半径参数使得形呈现为空心状态。此外,还可以设定其他视觉属性如颜色、标签位置等以增强美观度。 ```javascript option = { title: { text: '环形饼状', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], // 控制内外圈大小比例形成环形 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderWidth: 2 }, label: { show: true, position: 'outside' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'} ] } ] }; ``` 上述配置实现了基本的环形布局以及一些美化处理措施[^2]。 #### 添加动态更新功能 为了让表能够响应数据变化而自动刷新视,可以采用定时器或其他事件驱动机制触发重新加载操作。这里给出一种简单的方式——基于时间间隔定期更改数据源从而达到渐变过渡的效果。 ```javascript methods: { updateChartData() { setInterval(() => { // 修改原始数据集的一部分数值 const newData = [...this.seriesData]; newData[Math.floor(Math.random()*newData.length)].value += Math.round((Math.random()-0.5)*10)+1; // 更新到表配置里去 this.myChart.setOption({ series:[{ data:newData }] },true); // 启用不合并模式覆盖旧有配置 }, 2000); // 每隔两秒执行一次变更动作 } } ``` 这种方法能有效模拟出连续性的动画过程,给用户带来更生动直观的感受[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值