echarts 饼图悬浮背景透明

最新推荐文章于 2024-08-08 15:12:25 发布

Rkatsiteli

最新推荐文章于 2024-08-08 15:12:25 发布

阅读量3.1k

点赞数

分类专栏： Highcharts + Echarts配置文章标签： html5

本文链接：https://blog.csdn.net/qq_16559905/article/details/108012937

版权

本文介绍了如何在Echarts中实现饼图的悬浮背景透明效果，并提供了配置说明，包括默认悬浮显示浮层的设置以及文案居中展示的方法。通过示例代码和效果展示，帮助读者理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

实现：

1、可通过echat.dispatchAction默认悬浮展示浮层

2、可调节radius进行文案居中展示

效果如下图所示：

可通过配置查看：echartsPie

option = {
   
	"backgroundColor": "#171A2A",
	"grid": {
   
		"top": 0,
		"left": "0%",
		"right": "0%",
		"bottom": "10%",
		"containLabel": true
	},
	"tooltip": {
   
		"trigger": "item",
		"formatter": "{b} : {d}%",
		"padding": [
			5,
			7
		],
		"backgroundColor": "rgba(39, 43, 73, 1)",
		"extraCssText": "box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);z-index:1;",
		"triggerOn": "click"
	},
	"legend": {
   
		"orient": "vertical",
		"left": 0,
		"bottom": 60,
		"icon": "circle",
		"textStyle": {
   
			"fontSize": 12,
			"borderRadius": 12,
			"color": "#9799B4",
			"padding": [
				3,
				0,
				0,
				0
			]
		},
		"itemWidth"