echarts饼图:实现多层图表同步自动轮播,鼠标悬浮时停止轮播,移出鼠标后重新开始轮播效果

这篇具有很好参考价值的文章主要介绍了echarts饼图:实现多层图表同步自动轮播,鼠标悬浮时停止轮播,移出鼠标后重新开始轮播效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求描述

需要用echarts实现一个圆环饼图,在圆环中心显示每个系列的具体数据,加载成功后图表系列自动高亮轮播展示;当用户鼠标悬浮某一系列的图形时,停止自动轮播并高亮显示该图形,移出鼠标后重新开始轮播
echarts多个图表进行轮播,echarts,前端,html5,echarts

参考代码

option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['56%', '64%'], // 通过设置内径与外径将饼图变为圆环饼图
      itemStyle: {
        borderRadius: 40 // 设置圆环的圆角弧度
      },
      emphasis: { // 设置高亮时显示标签
        label: {
          show: true
        },
        scale: true, // 设置高亮时放大图形
        scaleSize: 20
      },
      label: { // 设置图形标签样式
        show: false, // 未高亮时不显示标签,否则高亮时显示的标签会与静态的标签重叠
        position: 'center',
        // 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
        formatter: '{d_style|{d}}{per_style|%}\n{b_style|{b}}',
        // 为标签内容指定样式,只能设置series-pie.label支持的样式
        rich:{
          d_style:{
            fontSize: 80
          },
          per_style:{
            fontSize: 60
          },
          b_style:{
            fontSize: 42
          }
        }
      },
      data: [ // 饼图数据
        { value: 1048, name: 'Search Engine'},
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
let changePieInterval = setInterval(selectPie, 1000); // 设置自动切换高亮图形的定时器

function highlightPie() { // 取消所有高亮并高亮当前图形
  for(var idx in option.series[0].data)
    // 遍历饼图数据,取消所有图形的高亮效果
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: idx
    });
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
}

myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时,停止自动切换并高亮鼠标悬浮的图形
	if(changePieInterval)
		clearInterval(changePieInterval);
	currentIndex = params.dataIndex;
	highlightPie();
});

myChart.on('mouseout', (params) => { // 用户鼠标移出时,重新开始自动切换
  if(changePieInterval)
    clearInterval(changePieInterval);
  changePieInterval = setInterval(selectPie, 1000);
});

function selectPie() { // 高亮效果切换到下一个图形
  var dataLen = option.series[0].data.length;
  currentIndex = (currentIndex + 1) % dataLen;
  highlightPie();
}

到这里运行看效果

echarts圆环饼图示例
(开发echarts图表时,对照配置项文档和API文档,到官网的在线示例中调试非常方便哟~)

饼图标签相关配置项tips

series-pie. label:没有任何交互时,静态展示的标签(始终展示,即使设置为隐藏也可以通过这个配置项规定饼图标签的样式)
series-pie. select. label:当系列设置“selected”为true时展示的标签(设置series的selectedMode和data项的selected为true后始终展示)
series-pie.emphasis. label:当鼠标悬浮或通过代码触发高亮时才会展示的标签

饼图plus

在公司的大屏展示项目中,需要实现类似下图的轮播饼图效果:
echarts多个图表进行轮播,echarts,前端,html5,echarts
观察此效果图,思路如下:
①大致可以看出,此图为一个大饼图中嵌套小饼图,且两图同步高亮;
②外圈可以用一个只有一条数据的饼图系列实现(需禁用其高亮样式);
③选中一块大饼图时,需在外侧显示阴影:由于echarts没有合适的径向渐变颜色样式,这里可以叠三个透明度递减的较大饼图实现;将这3层阴影饼图的初始透明度设置为0(隐藏非高亮状态的图块)即可

饼图plus代码

/* CSDN博客网址:https://blog.csdn.net/qq_36604536/article/details/123905221 */

/*********************** 饼图构造相关 ***********************/
// 饼图配色(自定义)
const chartColorList = ["#5470c6", "#91cc75", "#ffdc60", "#ee6666", "#73c0de"];
// 饼图测试数据
let testData = [
	{value: 1048, name: 'Search Engine'},
	{value: 735, name: 'Direct'},
	{value: 580, name: 'Email'},
	{value: 484, name: 'Union Ads'},
	{value: 300, name: 'Video Ads'}
];

// 由于这套饼图中除了“大饼”外的饼图构造非常相似(只有“大饼”高亮时显示中间的标签)
// 可以用一个数组存储其中不相同的配置,然后遍历配置数组自动生成所有serie
const pieSeriesSettings = [
	{
		name: '内部小饼', // 饼图名称
		radius: ['46%', '53%'], // 饼图内径/外径尺寸
		opacity: 0.56, // 普通状态下的透明度
		empyOpacity: 0.6, // 高亮状态下的透明度
		scaleSize: 14, // 高亮状态下图形放大的尺寸
		isBorder: false // 是否是外圈(外圈只有一条数据,否则与“大饼”数据相同)
	},
	{
		name: '外圈', radius: ['80%', '82%'], opacity: 0.6, empyOpacity: 0.6, scaleSize: 10, isBorder: true
	},
	{
		name: '大饼阴影1', radius: ['50%', '65%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影2', radius: ['51%', '66%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影3', radius: ['52%', '67%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影4', radius: ['53%', '68%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影5', radius: ['54%', '69%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影6', radius: ['55%', '70%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	}
];

let serieList = [];
serieList.push({
	name: '大饼',
	z: 10, // 放在最上层
	type: 'pie',
	radius: ['56%', '63%'], // 通过设置内径与外径将饼图变为圆环饼图
	itemStyle: {
		borderRadius: 40 // 设置圆环的圆角弧度
	},
	emphasis: { // 设置高亮时显示标签
		label: {
			show: true
		},
		scale: true, // 设置高亮时放大图形
		scaleSize: 18
	},
	label: { // 设置图形标签样式
		show: false, // 未高亮时不显示标签,否则高亮时显示的标签会与静态的标签重叠
		position: 'center',
		// 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
		formatter: '{d_style|{d}}{per_style|%}\n{b_style|{b}}',
		// 为标签内容指定样式,只能设置series-pie.label支持的样式
		rich: {
			d_style: {
				fontSize: 80
			},
			per_style: {
				fontSize: 60
			},
			b_style: {
				fontSize: 42
			}
		}
	},
	data: testData
});

for (let pieSetting of pieSeriesSettings) {
	serieList.push({
		name: pieSetting.name,
		z: 1, // 放在最下层
		type: 'pie',
		radius: pieSetting.radius, // 通过设置内径与外径将饼图变为圆环饼图
		itemStyle: {
			color: pieSetting.isBorder ? '#fff' : null,
			borderRadius: 40, // 设置圆环的圆角弧度
			opacity: pieSetting.opacity // 设置普通状态下圆环的透明度
		},
		emphasis: { // 设置高亮时不显示标签
			disabled: pieSetting.isBorder, // 外圈需关闭高亮效果
			itemStyle: {
				opacity: pieSetting.empyOpacity // 设置高亮状态下圆环的透明度
			},
			label: {
				show: false
			},
			scale: !pieSetting.isBorder, // 外圈需关闭高亮放大效果
			scaleSize: pieSetting.scaleSize
		},
		label: { // 设置图形标签样式
			show: false // 未高亮时不显示标签,否则高亮时显示的标签会与静态的标签重叠
		},
		data: pieSetting.isBorder ? [{value: 1, name: 'border'}] : testData
	});
}

option = {
	backgroundColor: "#000002",
	color: chartColorList, // 设置饼图全局配色
	tooltip: { // 设置悬停标签
		trigger: "item",
		formatter: params => {
			// console.log(params)
			if(params.seriesName === "大饼") { // 只有在大饼上悬停时显示提示框
				return `${params.name}<br/>数量:${params.value}<br/>占比:${params.percent}`
			} else {
				return ''
			}
		}
	},
	series: serieList
};
console.log(option); // 可以打印出具体的option便于理解其结构

/*********************** 饼图轮播相关 ***********************/
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
let changePieInterval = setInterval(selectPie, 1000); // 设置自动切换高亮图形的定时器

function highlightPie() { // 取消所有高亮并高亮当前图形
	// 显示当前图形的tooltip
	myChart.dispatchAction({ // 隐藏所有tooltip
		type: 'hideTip'
	})
	myChart.dispatchAction({ // 显示当前图形的tooltip
		type: 'showTip',
		seriesIndex: 0, // 大饼在序列列表第一个
		dataIndex: currentIndex
	})

	for (let optIdx in option.series) {
		let opt = option.series[optIdx].data;
		if (opt.length < 2) // 外圈(只有一条数据)
			continue;

		// 遍历饼图数据,取消所有图形的高亮效果, 高亮当前图形
		for (let idx in opt)
			myChart.dispatchAction({
				type: idx != currentIndex ? 'downplay' : 'highlight',
				seriesIndex: optIdx,
				dataIndex: idx
			});
	}
}

myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时,停止自动切换并高亮鼠标悬浮的图形
	if (params.seriesName === "外圈") // 鼠标悬浮到外圈时,不进行交互
		return;
	if(changePieInterval)
		clearInterval(changePieInterval);
	currentIndex = params.dataIndex;
	highlightPie();
});

myChart.on('mouseout', (params) => { // 用户鼠标移出时,重新开始自动切换
	if(changePieInterval)
		clearInterval(changePieInterval);
	changePieInterval = setInterval(selectPie, 1000);
});

function selectPie() { // 高亮效果切换到下一个图形
	var dataLen = testData.length;
	currentIndex = (currentIndex + 1) % dataLen;
	highlightPie();
}

还是到这里运行看效果

echarts圆环饼图示例

关于饼图发光效果

由于(在笔者的认知范围内)echarts没有提供可以完美地实现饼图发光效果的方法,这里使用了叠加多层半透明饼图模仿发光效果的方式:
echarts多个图表进行轮播,echarts,前端,html5,echarts
作为一种实验性的尝试,如果将饼图plus中添加的阴影数量增加至6个,得到的展示效果更接近“发光”:

const pieSeriesSettings = [
	{
		name: '内部小饼', // 饼图名称
		radius: ['46%', '53%'], // 饼图内径/外径尺寸
		opacity: 0.56, // 普通状态下的透明度
		empyOpacity: 0.6, // 高亮状态下的透明度
		scaleSize: 14, // 高亮状态下图形放大的尺寸
		isBorder: false // 是否是外圈(外圈只有一条数据,否则与“大饼”数据相同)
	},
	{
		name: '外圈', radius: ['80%', '82%'], opacity: 0.6, empyOpacity: 0.6, scaleSize: 10, isBorder: true
	},
	{
		name: '大饼阴影1', radius: ['50%', '65%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影2', radius: ['51%', '66%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影3', radius: ['52%', '67%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影4', radius: ['53%', '68%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影5', radius: ['54%', '69%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	},
	{
		name: '大饼阴影6', radius: ['55%', '70%'], opacity: 0, empyOpacity: 0.1, scaleSize: 16, isBorder: false
	}
];

最终的发光饼图在线示例:isqqw-多层轮播饼图

追加需求:显示当前图形的提示框

在评论区看到有小伙伴提问,本杂鱼尝试实现此效果后在此记录,效果如下图:
echarts多个图表进行轮播,echarts,前端,html5,echarts
详细代码已更新到isqqw-多层轮播饼图,具体改动内容有两处:
① 配置tooltip
tooltip配置项与series同级,由于此图表中有不止一个饼图系列,需要设置仅显示“大饼”的tooltip;标签内容配置可参考这篇博客:echarts:饼图标签formatter的使用/饼图自定义标签。
echarts多个图表进行轮播,echarts,前端,html5,echarts

② 轮播时显示选中图形的tooltip
与高亮/取消高亮类似,显示/隐藏提示框也可以通过dispatchAction触发图表行为来实现,可参考action. tooltip。
echarts多个图表进行轮播,echarts,前端,html5,echarts
此外,tooltip会根据悬停在图形上鼠标的位置来显示,通过dispatchAction触发显示时其位置可能不太美观,官网文档中支持指定showTip的(x, y)坐标触发,也许可以自行计算tooltip出现的理想位置坐标进行触发,这一点请感兴趣的小伙伴自行探讨叭~

比官网更丰富的echarts示例!

强烈推荐一个有非常丰富的echarts在线示例的网站:PPChart,但由于遭到DDOS攻击,PPChart服务不太稳定,大家也可以访问PPChart开发者推荐的另外两个站点:madeapie、isqqw,目前笔者关于echarts的博客代码都已在isqqw创建在线示例o^~^o

参考文档

[1] echarts圆环饼图示例
[2] echarts饼图配置项
[3] echarts标签内容格式器
[4] echarts事件与行为
[5] echarts鼠标事件文章来源地址https://www.toymoban.com/news/detail-647302.html

到了这里,关于echarts饼图:实现多层图表同步自动轮播,鼠标悬浮时停止轮播,移出鼠标后重新开始轮播效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2、vue3分别配置echarts多图表的同步缩放

    大家好!我是yma16,本文分享在vue2和vue3中配置echarts的多图表同步缩放 背景: 解决echarts的多图表x轴同步联动的问题 echarts的datazoom api对外暴露 原理: echarts的实例存在datazoom缩放的方法, 所以只需要在datazoom事件触发其他图表的datazoom即可实现同步缩放 注意: x轴的范围要一

    2024年02月09日
    浏览(69)
  • echarts部分图表自带鼠标滚轮滑动整体缩放效果与拖拽整体移动效果,如何取消?

    部分echarts图表在可视区域自带鼠标滚轮缩放和拖拽移动效果。这个效果在部分场景中是多余的, 怎么将其效果取消呢? roam:true(可拖动,可缩放);false(不可拖动,不可缩放) dome Tips 实现满足上诉需求的属性即 roam。 部分echarts图表类型 不存在roam属性,即该类型图表不支

    2024年02月04日
    浏览(37)
  • vue中使用echarts与echarts-gl 实现3D饼图环形饼图

    注意:我不知道版本差异会不会有影响(可以指定版本 也可以借鉴我的) 指定版本命令 加个@后面跟版本号即可 成功之后可以在package.json中检查是否安装成功(如上图) 引入位置:我没有在main.js中全局引用,而是哪个页面用到就引入哪里 代码: 注意:我没有封装起来(你

    2024年02月03日
    浏览(33)
  • echarts实现3D饼图

    echarts是一款强大的数据可视化工具,它可以帮助我们快速、简单地创建各种图表。 要在echarts中实现3D饼图,需要使用echarts的 series 系列中的 pie3D 组件。 下面是一个简单的例子,展示如何使用echarts创建3D饼图: 上面的代码中,我们使用了 pie3D 组件,并设置了半径范围为 [\\\'

    2024年02月16日
    浏览(35)
  • 用echarts实现3d饼图

    安装echarts和echarts-gl npm install echarts npm install echarts-gl echarts版本5.x的话需要对应echarts-gl版本2.x echarts版本4.x的话需要对应echarts-gl版本1.x 指定版本命令 npm install echarts-gl@1.1.2 1.关键函数,生成扇形的曲面参数方程,用于 series-surface Documentation - Apache ECharts官网series-surface介绍 

    2024年02月16日
    浏览(23)
  • echarts 实现3D饼图

    2023.6.30今天我学习了如何使用echarts渲染一个3d的饼图,效果如下: 相关代码如下:

    2024年02月17日
    浏览(37)
  • echarts如何实现3D饼图(环形图)?

    一、实现的效果 二、具体步骤 1.安装依赖 npm install echarts  2.引入echarts import * as echarts from \\\'echarts\\\';  注意:这里需要用到echarts-gl,必须单独引入才可以 import \\\'echarts-gl\\\'; 3.echarts部分代码 我知道这部分内容很多,但只要cv去用就可以了, getParametricEquation 这个函数不用改(我也不

    2024年03月28日
    浏览(74)
  • vue3+heightchart实现3D饼图,echarts3D饼图,3D饼图引导线实现

     附上 heightcharts 官网地址  Highcharts 演示 | Highcharts https://www.hcharts.cn/demo/highcharts 首先需要下载一下 heightcharts执行命令  然后初始化: 如此你就得到了一个3D饼图 

    2024年02月13日
    浏览(27)
  • ECharts实现简单饼图和柱状图

    前端使用vue,后端使用SpringBoot 前端使用vue,后端使用SpringBoot Python可视化案例数据资源-CSDN文库 可以点个免费的赞吗!!!    

    2024年01月21日
    浏览(31)
  • echarts3d饼图实现

    效果图: 安装echarts 在package.json文件中添加 完整代码如下(示例): HTML代码 js脚本代码  

    2024年02月16日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包