Echars 旭日图鼠标浮动显示value值

效果如图所示：

可能是搜索方法的问题，想要在旭日图上实现鼠标浮动，显示value，百度后都说旭日图不支持tooltip。反复翻官方文档后找到一个属性可以实现。

官方文档如图

下为修改后的官方示例：

原实例链接为：https://echarts.apache.org/examples/zh/editor.html?c=sunburst-visualMap

var data = [{name: 'Grandpa',children: [{name: 'Uncle Leo',value: 15,children: [{name: 'Cousin Jack',value: 2},{name: 'Cousin Mary',value: 5,children: [{name: 'Jackson',value: 2}]},{name: 'Cousin Ben',value: 4}]},{name: 'Aunt Jane',children: [{name: 'Cousin Kate',value: 4}]},{name: 'Father',value: 10,children: [{name: 'Me',value: 5,itemStyle: {color: 'red'}},{name: 'Brother Peter',value: 1}]}]},{name: 'Mike',children: [{name: 'Uncle Dan',children: [{name: 'Cousin Lucy',value: 3},{name: 'Cousin Luck',value: 4,children: [{name: 'Nephew',value: 2}]}]}]},{name: 'Nancy',children: [{name: 'Uncle Nike',children: [{name: 'Cousin Betty',value: 1},{name: 'Cousin Jenny',value: 2}]}]}
];
option = {tooltip: {trigger : 'item'},visualMap: {type: 'continuous',min: 0,max: 10,inRange: {color: ['#2F93C8', '#AEC48F', '#FFDB5C', '#F98862']}},series: {type: 'sunburst',data: data,radius: [0, '90%'],label: {rotate: 'radial'}}
};

在option 中增加

tooltip: {trigger : 'item'}

后续效果，等时间充足再完善

Echars 旭日图鼠标浮动显示value值相关推荐

echarts 饼图/环形图鼠标经过显示文本标签图例icon
文章目录鼠标经过显示文本标签效果关键部分图例 icon 效果关键部分完整实现鼠标经过显示文本标签效果关键部分 label: { // 饼图图形上的文本标签normal: { // ...
echarts雷达图鼠标悬浮显示单轴数据
雷达图效果展示雷达图默认只能展示一圈的数据,而不能展示一个轴向的数据,具体图片效果如下问题描述在雷达图的tooltip中的 formatter: function (params){}打印出pa ...
双y轴设置颜色_项目实战：Qt多段Y轴折线图框架（双Y轴段折线、支持拽拖、浮动游标显示X值各段Y值、实时下位机数据）...
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/111660400长期持续带来更多项目与技术分享 ...
10.【CSS定位】：position、z-index、dispaly(none)、visibility、overflow hot new 模块 + 淘宝焦点图布局 +土豆网鼠标经过显示遮罩
文章目录 [CSS定位] 一.定位 1.1 为什么需要定位? 1.2 定位组成 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 absolute( ...
Echars 折线图自动向右平移显示数据(数据量大的时候适应)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Ech ...
案例——淘宝轮播图和土豆网鼠标经过显示遮罩
综合案例 - 淘宝轮播图 1 效果图 5.2 布局分析 3 步骤 1. 大盒子我们类名为: tb-promo 淘宝广告 2. 里面先放一张图片. 3. 左右两个按钮用链接就好了. 左箭头 ...
PADS显示元件值并打印贴片图
PADS显示元件值并打印贴片图 1.首先,可以设置只显示顶层和顶层丝印层 Ctrl+Alt+C,在"显示颜色设置"中,把不想显示的层前面的勾去掉,点"确定". ...
chart.js ajax 折线图,如何在ChartJs 的折线图中显示数据值或索引标签
如何在Chartjs的折线图中显示数据值或索引值,如图所示: 图例.PNG 简介 Chart.js是一款不依赖任何外部js库的图标插件,具体的使用方法可查看Chart.js官网. 需求 Chart.j ...
文本溢出显示省略号，鼠标浮动查看全部内容
目录 1.文本溢出显示省略号 2.鼠标浮动查看全部内容 1.文本溢出显示省略号今天做项目时遇到一种需求:文本溢出截断省略,上网查阅了一下,还是挺简单的,但是考虑到自己疑似老年痴呆的大脑,就在这里整理 ...

Echars 旭日图鼠标浮动显示value值

Echars 旭日图鼠标浮动显示value值相关推荐

最新文章

热门文章

Echars 旭日图 鼠标浮动 显示value值

Echars 旭日图 鼠标浮动 显示value值相关推荐

最新文章

热门文章

Echars 旭日图鼠标浮动显示value值

Echars 旭日图鼠标浮动显示value值相关推荐