❤
npm
Sign UpSign In

@dfeidao/fd-wh000020
TypeScript icon, indicating that this package has built-in type declarations

4.6.201910171452 • Public • Published

嵌套环形图

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}]');
});

Readme

Keywords

Package Sidebar

Install

npm i @dfeidao/fd-wh000020

Repository

gitee.com/dfeidao/widgets

Weekly Downloads

1

Version

4.6.201910171452

License

MIT

Unpacked Size

62.4 kB

Total Files

6

Last publish

Collaborators

  • taoqf
Try on RunKit
Report malware