@dfeidao/fd-wh000005

饼图

• Installation
• Tag
• Attributes
  • value
  • theme
  • legend-type
  • legend-hide
  • lengend-number
  • legend-position
  • legend-orient
  • tooltip-show
  • series-name
  • series-rose
  • series-center-w
  • series-center-h
  • series-radius
  • tooltip-formatter
  • show-label
  • label-position
  • label-formatter
• Methods
  • setAttribute
  • get_data_url
• Events
  • feidao-web事件绑定示例
  • fdwe-click
• Example
  • html
  • js

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

Installation

yarn add --dev @dfeidao/fd-wh000005

Tag

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

<fd-wh000005></fd-wh000005>

Attributes

value

渲染饼图的数据

例:

 <fd-wh000005 style="width: 40em;height: 20em;" value='[{"name": "直接访问","value": 335},{"name": "邮件营销","value": 810},{"name": "联盟广告","value": 600},{"name": "视频广告","value": 222},{"name": "搜索引擎","value": 1548}]'></fd-wh000005>

theme

饼图的主题，可选值为'dark','infographic','macarons','roma','shine','vintage'。默认为 'infographic' 。 示例:

theme = "macarons"

legend-type

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

legend-type = "scroll"

legend-hide

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

<fd-wh000005 legend-hide></fd-wh000005>

lengend-number

图例显示对应项的数值。

<fd-wh000005 lengend-number></fd-wh000005>

legend-position

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

legend-position = "2"

legend-orient

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

legend-orient = "horizontal"

tooltip-show

是否显示提示框组件，包括提示框浮层和 axisPointer。默认值为true

series-name

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

series-name = "xx"

series-rose

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

series-center-w

饼图的中心（圆心）横坐标相对于容器宽度的百分比。用于定位饼图展示的位置。[ default: '50%']

series-center-h

饼图的中心（圆心）纵坐标相对于容器高度的百分比。[ default: '50%']

series-radius

饼图的半径可以使用百分比'10%','20%',也可以使用像素'50','60'。控制饼图的大小。[ default: '60%'] 示例:

series-radius = "40%"
or
series-radius = "50"

tooltip-formatter

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

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

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

<fd-wh000005 tooltip-formatter='1'></fd-wh000005>

<fd-wh000005 tooltip-formatter='2'></fd-wh000005>

传入字符串模板示例:

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

show-label

是否显示标签，当组件上存在该属性时显示标签。 [ default: false ]

label-position

定位标签显示的位置,可选'outside','inner','center'。对应饼图的，'外侧'，'饼图扇区内部'，'饼图中心' [ default: 'outside' ] 示例

label-position = "outside"

label-formatter

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

字符串模板 模板变量有：

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

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

示例:

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

Methods

setAttribute

设置控件属性值

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

value 渲染图表的数据。

widget_node.setAttribute('value', '[{"name": "直接访问","value": 335},{"name": "邮件营销","value": 810},{"name": "联盟广告","value": 600},{"name": "视频广告","value": 222},{"name": "搜索引擎","value": 1548}]')

get_data_url

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

导出图表图片

<button id="fd-wh000005-002">get_img</button>
<img id="fd-wh000005-003" src="" />
<fd-wh000005 id="fd-wh000005-001" style="width: 40em;height: 20em;" theme="macarons"  tooltip-formatter=2 series-name='访问来源' lengend-number  value='[{"name": "直接访问","value": 335},{"name": "邮件营销","value": 810},{"name": "联盟广告","value": 600},{"name": "视频广告","value": 222},{"name": "搜索引擎","value": 1548}]'>
</fd-wh000005>

const fd_wh000005_001 = document.querySelector('#fd-wh000005-001');
const fd_wh000005_002 = document.querySelector('#fd-wh000005-002');
const fd_wh000005_003 = document.querySelector('#fd-wh000005-003');

fd_wh000005_002.addEventListener('click', () => {
    const src = fd_wh000005_001.get_data_url();
    fd_wh000005_003.src = src;
});

Events

feidao-web事件绑定示例

<fd-wh000005 data-feidao-actions="fdwe-click:a001"  value='[{"name": "直接访问","value": 335},{"name": "邮件营销","value": 810},{"name": "联盟广告","value": 600},{"name": "视频广告","value": 222},{"name": "搜索引擎","value": 1548}]'>
</fd-wh000005>

fdwe-click

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

<fd-wh000005 id="fd-wh000005-004" style="width: 40em;height: 20em;" theme="macarons"  tooltip-formatter=2 series-name='访问来源' lengend-number  value='[{"name": "直接访问","value": 335},{"name": "邮件营销","value": 810},{"name": "联盟广告","value": 600},{"name": "视频广告","value": 222},{"name": "搜索引擎","value": 1548}]'>
</fd-wh000005>

const fd_wh000005_004 = document.querySelector('#fd-wh000005-004');

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

Example

html

<img id="fd-wh000005-006" scr=""/>
<button id="fd-wh000005-007">get_img</button>
<button id="fd-wh000005-008">change_data</button>
<fd-wh000005 id="fd-wh000005-005" style="width: 400px;height: 200px;" theme="macarons"  tooltip-formatter=2 series-name='访问来源'
 lengend-number value='[{"name": "直接访问","value": 335},{"name": "邮件营销","value": 810},{"name": "联盟广告","value": 600},{"name": "视频广告","value": 222},{"name": "搜索引擎","value": 1548}]'>
</fd-wh000005>

js

const fd_wh000005_005 = document.querySelector('#fd-wh000005-005');
const fd_wh000005_007 = document.querySelector('#fd-wh000005-007');
const fd_wh000005_006 = document.querySelector('#fd-wh000005-006');
const fd_wh000005_008 = document.querySelector('#fd-wh000005-008');

fd_wh000005_005.addEventListener('fdwe-click', (e) => {
    console.log('---------- click -------', e.name, e.value);
});
fd_wh000005_007.addEventListener('click', () => {
    const src = fd_wh000005_005.get_data_url();
    fd_wh000005_006.src = src;
});
fd_wh000005_008.addEventListener('click', () => {
    fd_wh000005_005.setAttribute('value', '[{"name": "2直接访问","value": 164},{"name": "2邮件营销","value": 321},{"name": "2联盟广告","value": 185},{"name": "2视频广告","value": 22},{"name": "2搜索引擎","value": 223}]');
});