npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@dfeidao/fd-wh000020

v4.6.201910171452

Published

嵌套环形图

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

taoqftaoqf

Keywords

feidao01feidaodfeidaoatom飞道控件ai

Readme

嵌套环形图

https://dfeidao.gitee.io/widgets/

Installation

yarn add --dev @dfeidao/fd-wh000020

Tag

value 属性是必传的, 控件的宽高必须设定

<fd-wh000020></fd-wh000020>

Attributes

value

渲染嵌入环图的数据

数据有关联时,外环是内环的子集,会将外环的数据根据内环的排序进行排序.传入的数据示例如下. 关联字段id-field,pid-field的值与vule中的值一致. 例:

no: 为一个扇区数据的唯一标识, key值由id-field指定.
parent: 扇区的父节点, key值由pid-field指定. 根节点的parent值固定为`root`
name:该扇区数据的名称.
value:该扇区数据的值.
color:该扇区的显示的颜色,如果该字段没有传入则随机一个颜色.
 <fd-wh000020 style="width: 40em;height: 20em;" id-field='no' pid-field='parent' value='[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#708090"},{"no":"2","parent":"root","value":2380,"name":"二楼电量","color":"pink"},{"no":"3","parent":"root","value":800,"name":"三楼电量","color":"pink"},{"no":"4","parent":"root","value":550,"name":"四楼电量","color":"green"},{"no":"131","parent":"2","name":"#2","value":335},{"no":"4131","parent":"1","name":"#1","value":810},{"no":"1312","parent":"2","name":"#2_2","value":600,"color":"pink"},{"no":"1313","parent":"4","name":"#4","value":222},{"no":"4134","parent":"3","name":"#3","value":1548}]'></fd-wh000020>

当没有关联时无需构造联动字段id-field,pid-field且无需传. 数据类型为二维数组,二维数组里的第一个数组为最内环图的数据,由内往外以此类推. 例:

 <fd-wh000020 style="width: 40em;height: 20em;" value='[[{"value":950,"name":"一楼电量","color":"#708090"},{"value":2380,"name":"二楼电量","color":"pink"},{"value":800,"name":"三楼电量","color":"pink"},{"value":550,"name":"四楼电量","color":"green"}],[{"name":"#2","value":335},{"name":"#1","value":810},{"name":"#2_2","value":600,"color":"pink"},{"name":"#4","value":222},{"name":"#3","value":1548}]]'></fd-wh000020>

theme

嵌入环形图的主题，可选值为'dark','infographic','macarons','roma','shine','vintage'。。 示例:

theme = "macarons"

legend-type

图例的类型。可选值：'plain'：普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用. 示例:

legend-type = "scroll"

legend-hide

是否隐藏图例组件。图例默认是显示的，如果设置了该属性则图例隐藏。( true )

<fd-wh000020 legend-hide></fd-wh000020>

lengend-number

图例显示对应项的数值。

<fd-wh000020 lengend-number></fd-wh000020>

legend-position

图例组件在容器中显示的位置，可选值为'1', '2', '3', '4'，分别对应 '左上角', '右上角', '右下角', '左下角'。 示例

legend-position = "2"

legend-orient

图例列表的布局朝向。可选值为'horizontal' 水平，'vertical' 垂直。 示例

legend-orient = "horizontal"

tooltip-show

是否显示提示框组件，包括提示框浮层和 axisPointer。

series-name

系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 示例

series-name = "xx"

series-rose

是否展示成南丁格尔图，通过半径区分数据大小。只要组件具有该属性则展示成南丁格尔图

series-center-w

嵌入环形图的中心（圆心）横坐标相对于容器宽度的百分比。用于定位嵌入环形图展示的位置。

series-center-h

嵌入环形图的中心（圆心）纵坐标相对于容器高度的百分比。

tooltip-formatter

提示框浮层内容。可选值为'1', '2', 也可以传入字符串模板。不设置该值则不显示提示框

  1. 数据项名称 : 数值 (百分比)
  2. 系列名称 数据项名称 : 数值 (百分比)

所有dot支持的模板{{=it.name}} <br/>换行 示例

<fd-wh000020 tooltip-formatter='1'></fd-wh000020>
<fd-wh000020 tooltip-formatter='2'></fd-wh000020>

传入字符串模板示例:

<fd-wh000020 tooltip-formatter='{{=it.name}} {a} <br/>{b} : {c} ({d}%)'></fd-wh000020>

show-label

是否显示标签，当组件上存在该属性时显示标签。

label-position

定位标签显示的位置,目前除最外环图能控制外,内环图只采用'inner'形式,可选'outside','inner','center'。对应嵌入环形图的，'外侧'，'嵌入环形图扇区内部'，'嵌入环形图中心' 示例

label-position = "outside"

label-formatter

标签的字符串模板，可选。

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{d}：数据值的百分比数。

所有dot支持的模板{{=it.name}}
\n换行

示例:

<fd-wh000020 label-formatter="{a} \n {c} \n {{=it.name}} \n {{=it.percent}} %" />

min-radius

最内环图的外半径,通过外半径设置起始环图的大小,指定的大小数值为百分比大小.

min-radius = "20"

border-color

每个扇区的边框颜色设置,与背景色设置相同可以达成透明的效果.

border-color = '#F8F8FF'

min-ring-width

最内圆的环宽度设置,设置的数值为百分比大小.

min-ring-width = '10'

ring-conf

每个环图的配置项,数据格式为对象数组,配置顺序从内到外,数组里的第一个对象为最内的环图,以此类推.优先生效每个环图各自的配置项,当它们各自的配置项没有传入时,使用公共的配置项.公共的配置项为传入的属性.例如: series-name='访问来源'

提供配置项参数如下:

label_formatter: 每个环单独的formatter,不存在时使用属性label-formatter.
series_name: 系名称, 不存在时使用series-name属性.
show_label: 显示标签,不存在时使用show-label属性.
clearance: 当前环与外围环的间隙大小,指定的数值大小为百分比的大小.[defalut: "1"]
ring_width: 当前环图的环宽度,指定的数值大小为百分比的大小.[defalut: "20"]
border_width: 每个环图边框的宽度.[defalut: 2]
all_ring_color: 该环形全部扇区的颜色设置,与all-ring-color属性同时配置时该属性优先生效.与value属性里的color同时配置时,color优先生效.

示例:

<fd-wh000020 ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true},{"clearance":"1","ring_width":"20", "border_width":0,"all_ring_color":"red"}]' />

all-ring-color

设置环形图每个扇区的颜色,改参数不能与value属性里的color同时设置,value属性里的color设置与该属性同时设置时,color参宿优先生效.

示例:

<fd-wh000020 all-ring-color='#f65b2c' />

show-title

是否显示title,传入显示不传不显示

<fd-wh000020 show-title />

subtext

副文本标题

<fd-wh000020 subtext='20.7%' />

subtext-color

副文本标题颜色

<fd-wh000020 subtext-color='#2cc8f6' />

text

文本标题

<fd-wh000020 text='负载率' />

text-color

文本标题颜色

<fd-wh000020 text-color='#aaa' />

text-font

标题文本字体大小

<fd-wh000020 text-font='18' />

subtext-font

副标题文本字体大小

<fd-wh000020 subtext-font='18' />

legend-text-color

图例的文本颜色

<fd-wh000020 legend-text-color='red' />

title-left

控件内文本标题距离控件左侧边的距离,可以设置成百分比数，像素px

<fd-wh000020 title-x='50%' />

title-top

控件内文本标题距离顶部的距离，可以设置成百分比数，像素px

<fd-wh000020 title-y='50%' />

Methods

setAttribute

设置控件属性值

以下属性的改变控件会发生改变

value 渲染图表的数据。

widget_node.setAttribute('value', '[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#708090"},{"no":"2","parent":"root","value":2380,"name":"二楼电量","color":"pink"},{"no":"3","parent":"root","value":800,"name":"三楼电量","color":"pink"},{"no":"4","parent":"root","value":550,"name":"四楼电量","color":"green"},{"no":"131","parent":"2","name":"#2","value":335},{"no":"4131","parent":"1","name":"#1","value":810},{"no":"1312","parent":"2","name":"#2_2","value":600,"color":"pink"},{"no":"1313","parent":"4","name":"#4","value":222},{"no":"4134","parent":"3","name":"#3","value":1548}]')

get_data_url

无参数，返回一个 base64 的 URL，可以设置为Image的src。

导出图表图片

<button id="fd-wh000020-002">get_img</button>
<img id="fd-wh000020-003" src="" />
<fd-wh000020 id="fd-wh000020-001" style="width: 40em;height: 20em;" theme="macarons" label-type=3 legend-position='1'
		legend-orient='vertical' tooltip-formatter="{a} <br>{b}<br> {c} {d}" lengend-number label-position="outside"
		label-formatter="{a}\n {b} \n{c} \n{d}%" series-name='访问来源' show-label min-ring-width='30' min-radius='45'
		border-color='#F8F8FF' id-field='no' pid-field='parent'
		value='[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#708090"},{"no":"2","parent":"root","value":2380,"name":"二楼电量","color":"pink"},{"no":"3","parent":"root","value":800,"name":"三楼电量","color":"pink"},{"no":"4","parent":"root","value":550,"name":"四楼电量","color":"green"},{"no":"131","parent":"2","name":"#2","value":335},{"no":"4131","parent":"1","name":"#1","value":810},{"no":"1312","parent":"2","name":"#2_2","value":600,"color":"pink"},{"no":"1313","parent":"4","name":"#4","value":222},{"no":"4134","parent":"3","name":"#3","value":1548}]'
		ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true},{"clearance":"1","ring_width":"20","border_width": 2}]'>
</fd-wh000020>
const fd_wh000020_001 = document.querySelector('#fd-wh000020-001');
const fd_wh000020_002 = document.querySelector('#fd-wh000020-002');
const fd_wh000020_003 = document.querySelector('#fd-wh000020-003');

fd_wh000020_002.addEventListener('click', () => {
    const src = fd_wh000020_001.get_data_url();
    fd_wh000020_003.src = src;
});

Events

feidao-web事件绑定示例

<fd-wh000020 data-feidao-actions="fdwe-click:a001" label-type=3 legend-position='1'
		legend-orient='vertical' tooltip-formatter="{a} <br>{b}<br> {c} {d}" lengend-number label-position="outside"
		label-formatter="{a}\n {b} \n{c} \n{d}%" series-name='访问来源' show-label min-ring-width='30' min-radius='45'
		border-color='#F8F8FF' id-field='no' pid-field='parent'
		value='[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#708090"},{"no":"2","parent":"root","value":2380,"name":"二楼电量","color":"pink"},{"no":"3","parent":"root","value":800,"name":"三楼电量","color":"pink"},{"no":"4","parent":"root","value":550,"name":"四楼电量","color":"green"},{"no":"131","parent":"2","name":"#2","value":335},{"no":"4131","parent":"1","name":"#1","value":810},{"no":"1312","parent":"2","name":"#2_2","value":600,"color":"pink"},{"no":"1313","parent":"4","name":"#4","value":222},{"no":"4134","parent":"3","name":"#3","value":1548}]'
		ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true},{"clearance":"1","ring_width":"20","border_width": 2}]'>
</fd-wh000020>

fdwe-click

点击事件,返回点击节点的Event，可以通过 name 和 value 属性，分别获得点击项名称和值

<fd-wh000020 id="fd-wh000020-004" style="width: 40em;height: 20em;" theme="macarons" label-type=3 legend-position='1'
		legend-orient='vertical' tooltip-formatter="{a} <br>{b}<br> {c} {d}" lengend-number label-position="outside"
		label-formatter="{a}\n {b} \n{c} \n{d}%" series-name='访问来源' show-label min-ring-width='30' min-radius='45'
		border-color='#F8F8FF' id-field='no' pid-field='parent' title-x='50' title-y='50'
		value='[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#708090"},{"no":"2","parent":"root","value":2380,"name":"二楼电量","color":"pink"},{"no":"3","parent":"root","value":800,"name":"三楼电量","color":"pink"},{"no":"4","parent":"root","value":550,"name":"四楼电量","color":"green"},{"no":"131","parent":"2","name":"#2","value":335},{"no":"4131","parent":"1","name":"#1","value":810},{"no":"1312","parent":"2","name":"#2_2","value":600,"color":"pink"},{"no":"1313","parent":"4","name":"#4","value":222},{"no":"4134","parent":"3","name":"#3","value":1548}]'
		ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true},{"clearance":"1","ring_width":"20","border_width": 2}]'>
</fd-wh000020>
const fd_wh000020_004 = document.querySelector('#fd-wh000020-004');

fd_wh000020_004.addEventListener('fdwe-click', (e) => {
    console.log('---------- click -------', e.name, e.value);
});

Example

html

嵌套环图1

<img id="fd-wh000020-006" scr=""/>
<button id="fd-wh000020-007">get_img</button>
<button id="fd-wh000020-008">change_data</button>
<fd-wh000020 id="fd-wh000020-005" style="width: 400px;height: 200px;" theme="macarons" label-type=3 legend-position='1'
		series-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter="{a} <br>{b}<br> {c} {d}"
		lengend-number label-position="outside" label-formatter="{a}\n {b} \n{c} \n{d}%" series-name='访问来源' show-label
		min-ring-width='30' min-radius='45' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'
		sub_text='20.7%' title-x='50' title-y='50'
		value='[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#708090"},{"no":"2","parent":"root","value":2380,"name":"二楼电量","color":"pink"},{"no":"3","parent":"root","value":800,"name":"三楼电量","color":"pink"},{"no":"4","parent":"root","value":550,"name":"四楼电量","color":"green"},{"no":"131","parent":"2","name":"#2","value":335},{"no":"4131","parent":"1","name":"#1","value":810},{"no":"1312","parent":"2","name":"#2_2","value":600,"color":"pink"},{"no":"1313","parent":"4","name":"#4","value":222},{"no":"4134","parent":"3","name":"#3","value":1548}]'
		ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true},{"clearance":"1","ring_width":"20","border_width": 2}]'>
</fd-wh000020>

嵌套环图2

<fd-wh000020 id="fd-wh000020-005" style="width: 400px;height: 200px;" theme="macarons" label-type=3 legend-position='1'
		series-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter="{a} <br>{b}<br> {c} {d}"
		lengend-number label-position="outside" label-formatter="{a}\n {b} \n{c} \n{d}%" series-name='访问来源' show-label
		min-ring-width='20' min-radius='45' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'
		all-ring-color='#f65b2c' subtext='20.7%' text='负载率' text-color='#aaa' subtext-color='#2cc8f6' title-x='50' title-y='50'
		value='[[{"value":950,"name":"一楼电量"},{"value":2380,"name":"二楼电量"},{"value":800,"name":"三楼电量"},{"value":550,"name":"四楼电量"}],[{"name":"#2","value":335},{"name":"#1","value":810},{"name":"#2_2","value":600,"color":"pink"},{"name":"#4","value":222},{"name":"#3","value":1548}]]'
		ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true,"border_width": 0,"all_ring_color":""},{"clearance":"1","ring_width":"20","border_width": 2}]'>
</fd-wh000020>

环图1

<fd-wh000020 id="fd-wh000020-005" style="width: 400px;height: 200px;" theme="macarons" label-type=3 legend-position='1'
		series-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter="{a} <br>{b}<br> {c} {d}"
		lengend-number label-position="outside" label-formatter="{a}\n {b} \n{c} \n{d}%" series-name='访问来源' show-label
		min-ring-width='10' min-radius='75' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'
		all-ring-color='#f65b2c' subtext='20.7%' text='负载率' text-color='#aaa' subtext-color='#2cc8f6' title-x='50' title-y='50'
		value='[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#2cc9f6"},{"no":"2","parent":"root","value":2380,"name":"二楼电量"},{"no":"3","parent":"root","value":800,"name":"三楼电量"},{"no":"4","parent":"root","value":550,"name":"四楼电量"}]'
		ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true,"border_width": 0,"all_ring_color":"#aaa"},{"clearance":"1","ring_width":"20","border_width": 2}]'>
</fd-wh000020>

环图2

<fd-wh000020 id="fd-wh000020-005" style="width: 400px;height: 200px;" theme="macarons" label-type=3 legend-position='1'
		series-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter="{a} <br>{b}<br> {c} {d}"
		lengend-number label-position="outside" label-formatter="{a}\n {b} \n{c} \n{d}%" series-name='访问来源' show-label
		min-ring-width='10' min-radius='75' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'
		all-ring-color='#f65b2c' subtext='20.7%' text='负载率' text-color='#aaa' subtext-color='#2cc8f6' title-x='50' title-y='50'
		value='[[{"value":950,"name":"一楼电量","color":"#2cc9f6"},{"value":2380,"name":"二楼电量"},{"value":800,"name":"三楼电量"},{"value":550,"name":"四楼电量"}],[{"name":"#2","value":335},{"name":"#1","value":810},{"name":"#2_2","value":600,"color":"pink"},{"name":"#4","value":222},{"name":"#3","value":1548}]]'
		ring-conf='[{"formatter":"{b}","series_name":"访问来源1","show_label":true,"border_width": 0,"all_ring_color":"#aaa"},{"clearance":"1","ring_width":"20","border_width": 2}]'>
</fd-wh000020>

js

const fd_wh000020_005 = document.querySelector('#fd-wh000020-005');
const fd_wh000020_007 = document.querySelector('#fd-wh000020-007');
const fd_wh000020_006 = document.querySelector('#fd-wh000020-006');
const fd_wh000020_008 = document.querySelector('#fd-wh000020-008');

fd_wh000020_005.addEventListener('fdwe-click', (e) => {
    console.log('---------- click -------', e.name, e.value);
});
fd_wh000020_007.addEventListener('click', () => {
    const src = fd_wh000020_005.get_data_url();
    fd_wh000020_006.src = src;
});
fd_wh000020_008.addEventListener('click', () => {
    fd_wh000020_005.setAttribute('value', '[{"no":"1","parent":"root","value":950,"name":"一楼电量","color":"#708090"},{"no":"2","parent":"root","value":2380,"name":"二楼电量","color":"pink"},{"no":"3","parent":"root","value":800,"name":"三楼电量","color":"pink"},{"no":"4","parent":"root","value":550,"name":"四楼电量","color":"green"},{"no":"131","parent":"2","name":"#2","value":335},{"no":"4131","parent":"1","name":"#1","value":810},{"no":"1312","parent":"2","name":"#2_2","value":600,"color":"pink"},{"no":"1313","parent":"4","name":"#4","value":222},{"no":"4134","parent":"3","name":"#3","value":1548}]');
});