@dfeidao/fd-wh000019 v4.6.201910171450
雷达图
- Installation
- Tag
- Attributes
-
value
-series-indicator
-theme
-legend-type
-legend-hide
-lengend-number
-legend-position
-legend-orient
-tooltip-show
-series-center-w
-series-center-h
-series-radius
-tooltip-formatter
-show-label
-label-formatter
-indicator-formatter
-background-color
-series-icon
-series-item-gap
-keep-point
-axisLine-color
-indicator-text-color
-indicator-hidden
-series-shape
-splitLine-color
-split-number
-title-hidden
-title-text
-symbol-size
-area-color
-title-fontsize
-title-left
-title-top
- Methods
-
setAttribute
-get_data_url
- Events
- feidao-web事件绑定示例
-
fdwe-click
- Example - html - js
https://dfeidao.gitee.io/widgets/
Installation
yarn add --dev @dfeidao/fd-wh000019
Tag
value,series-indicator 属性是必传的, 控件的宽高必须设定
<fd-wh000019></fd-wh000019>
Attributes
value
渲染雷达图的数据
例:
<fd-wh000019 style="width: 40em;height: 20em;" value='[{"name":"北京","value":[267,216,280,4.8,108,64]},{"name":"上海","value":[222,155,126,4.8,55,64]}]'></fd-wh000019>
series-indicator
渲染雷达图指示器的数据
<fd-wh000019 style="width: 40em;height: 20em;" series-indicator='[{"name":"完好率","max":300},{"name":"节电率","max":250},{"name":"负载率","max":300},{"name":"功能性","max":5},{"name":"舒适度","max":200},{"name":"能效比","max":100}]'></fd-wh000019>
theme
雷达图的主题,可选值为'dark','infographic','macarons','roma','shine','vintage'。 示例:
theme = "macarons"
legend-type
图例的类型。可选值:'plain':普通图例。'scroll':可滚动翻页的图例。当图例数量较多时可以使用。 示例:
legend-type = "scroll"
legend-hide
是否隐藏图例组件。图例默认是显示的,如果设置了该属性则图例隐藏。( true )
<fd-wh000019 legend-hide></fd-wh000019>
lengend-number
图例显示对应项的数值。
<fd-wh000019 lengend-number></fd-wh000019>
legend-position
图例组件在容器中显示的位置,可选值为'1', '2', '3', '4', '5,分别对应 '左上角', '右上角', '右下角', '左下角','正下方'. 示例
legend-position = "2"
legend-orient
图例列表的布局朝向。可选值为'horizontal' 水平,'vertical' 垂直。 示例
legend-orient = "horizontal"
tooltip-show
是否显示提示框组件,包括提示框浮层和 axisPointer。
series-center-w
雷达图的中心(圆心)横坐标相对于容器宽度的百分比。用于定位雷达图展示的位置。
series-center-h
雷达图的中心(圆心)纵坐标相对于容器高度的百分比.
series-radius
雷达图的半径可以使用百分比'10%','20%',也可以使用像素'50','60'。控制雷达图的大小。 示例:
series-radius = '40%'
or
series-radius = '50'
tooltip-formatter
提示框浮层内容。
所有dot支持的模板{{=it.name}}
<br/>
换行,{a}系列名称
提示框显示内容都采用dot语法来构造,回调对象返回了
seriesName:string,系列名称
value:number[],每个指示器当前的数值与name通过索引对应
name:{name:string,max:number},..,指示器的配置项.
示例
传入字符串模板示例:
<fd-wh000019 tooltip-formatter='{a}<br/>{{~it.name:v:i}}{{=v.name}}:{{=it.value[i]}}<br/>{{~}}'></fd-wh000019>
show-label
是否显示标签,当组件上存在该属性时显示标签。
label-formatter
标签的字符串模板,可选。
字符串模板 模板变量有:
{a}:系列名。
{b}:数据名。
{c}:数据值。
{d}:数据值的百分比数。
所有dot支持的模板{{=it.name}}
\n换行
示例:
<fd-wh000019 label-formatter="{a} \n {c} \n {{=it.name}} \n {{=it.percent}} %" />
indicator-formatter
指示器字符串模板.
{b}:指示器名称
{c}:指示器数值
{d}: 指示器所占的百分比数
所有dot支持的模板{{=it.name}}
\n换行
示例:
<fd-wh000019 indicator-formatter="{b} \n {d}% \n {{=it.name}} \n {{=it.percent}} %" />
background-color
控件的背景色,设置了该属性就一定要传值,不适用就删除该属性.
<fd-wh000019 background-color='red' />
series-icon
图例标记的icon,提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'.
<fd-wh000019 series-icon='circle' />
series-item-gap
图例标记之间的距离
<fd-wh000019 series-item-gap='20' />
keep-point
保留的小数位数
<fd-wh000019 keep-point='2' />
axisLine-color
轴线的颜色
<fd-wh000019 axisLine-color='red' />
indicator-text-color
指示器文本的颜色
<fd-wh000019 indicator-text-color='red' />
indicator-hidden
隐藏指示器名称
<fd-wh000019 indicator-hidden />
series-shape
雷达图类型,'polygon' 和 'circle'。矩形与圆形.
<fd-wh000019 series-shape'polygon' />
splitLine-color
轴之间的分割线的颜色
<fd-wh000019 splitLine-color='red' />
split-number
指示器轴的分割段数
<fd-wh000019 split-number='4' />
title-hidden
隐藏标题
<fd-wh000019 title-hidden />
title-text
文本标题,设置该属性则显示该属性的值,不设置则显示计算的值.
<fd-wh000019 title-text='666' />
symbol-size
拐点的大小
<fd-wh000019 symbol-size='20' />
area-color
区域填充颜色
<fd-wh000019 area-color='red' />
title-fontsize
主题文本的字体大小
<fd-wh000019 title-fontsize='15' />
title-left
控件内文本标题距离控件左侧边的距离,可以设置成百分比数,像素px
<fd-wh000019 title-x='50%' />
title-top
控件内文本标题距离顶部的距离,可以设置成百分比数,像素px
<fd-wh000019 title-y='50%' />
Methods
setAttribute
设置控件属性值
以下属性的改变控件会发生改变
value
渲染图表的数据。
widget_node.setAttribute('value', '[{"name":"北京","value":[267,216,280,4.8,108,64]},{"name":"上海","value":[222,155,126,4.8,55,64]}]')
get_data_url
无参数,返回一个 base64 的 URL,可以设置为Image的src。
导出图表图片
<button id="fd-wh000019-002">get_img</button>
<img id="fd-wh000019-003" src="" />
<fd-wh000019 id="fd-wh000019-001" style="width: 40em;height: 20em;" theme="dark" tooltip-formatter="{d}" series-icon='circle'
series-center-w='50%' series-center-h='50%' label-formatter='{a}\n{c}' legend-position='5' series-item-gap='20'
in_formatter='{a}:{b}:{c}' show-label legend-orient='horizontal' keep-point='2' series-shape='polygon'
axisLine-color='rgba(238, 197, 102, 0.5)' indicator-text-color='rgb(238, 197, 102)' series-radius='70%'
symbol-size='10' title-text='' split-number='4' splitLine-color='rgba(238, 197, 102, 0.5)' area-color='pink'
series-indicator='[{"name":"完好率","max":300},{"name":"节电率","max":250},{"name":"负载率","max":300},{"name":"功能性","max":5},{"name":"舒适度","max":200},{"name":"能效比","max":100}]'
value='[{"name":"北京","value":[267,216,280,4.8,108,64]},{"name":"上海","value":[222,155,126,4.8,55,64]}]'>
</fd-wh000019>
const fd_wh000019_001 = document.querySelector('#fd-wh000019-001');
const fd_wh000019_002 = document.querySelector('#fd-wh000019-002');
const fd_wh000019_003 = document.querySelector('#fd-wh000019-003');
fd_wh000019_002.addEventListener('click', () => {
const src = fd_wh000019_001.get_data_url();
fd_wh000019_003.src = src;
});
Events
feidao-web事件绑定示例
<fd-wh000019 data-feidao-actions="fdwe-click:a001" theme="dark" tooltip-formatter="{d}" series-icon='circle'
series-center-w='50%' series-center-h='50%' label-formatter='{a}\n{c}' legend-position='5' series-item-gap='20'
in_formatter='{a}:{b}:{c}' show-label legend-orient='horizontal' keep-point='2' series-shape='polygon'
axisLine-color='rgba(238, 197, 102, 0.5)' indicator-text-color='rgb(238, 197, 102)' series-radius='70%'
symbol-size='10' title-text='' split-number='4' splitLine-color='rgba(238, 197, 102, 0.5)' area-color='pink'
series-indicator='[{"name":"完好率","max":300},{"name":"节电率","max":250},{"name":"负载率","max":300},{"name":"功能性","max":5},{"name":"舒适度","max":200},{"name":"能效比","max":100}]'
value='[{"name":"北京","value":[267,216,280,4.8,108,64]},{"name":"上海","value":[222,155,126,4.8,55,64]}]'>
</fd-wh000019>
fdwe-click
点击事件,返回点击节点的Event,可以通过 name 和 value 属性,分别获得点击项名称和值
<fd-wh000019 id="fd-wh000019-004" style="width: 40em;height: 20em;" theme="dark"
tooltip-formatter="{a}<br/>{{~it.name:v:i}}{{=v.name}}:{{=it.value[i]}}<br/>{{~}}" series-icon='circle'
series-center-w='50%' series-center-h='50%' label-formatter='{a}\n{c}' legend-position='5' series-item-gap='20'
show-label legend-orient='horizontal' keep-point='2' series-shape='polygon'
indicator-formatter='{b}\n{c}aa{{=it.percent*100}}aa\n{d}%' axisLine-color='rgba(238, 197, 102, 0.5)'
indicator-text-color='rgb(238, 197, 102)' series-radius='70%' symbol-size='10' title-text='' split-number='4'
splitLine-color='rgba(238, 197, 102, 0.5)' area-color='pink'
series-indicator='[{"name":"完好率","max":300},{"name":"节电率","max":250},{"name":"负载率","max":300},{"name":"功能性","max":5},{"name":"舒适度","max":200},{"name":"能效比","max":100}]'
value='[{"name":"北京","value":[267,216,280,4.8,108,64]},{"name":"上海","value":[222,155,126,4.8,55,64]}]'>
</fd-wh000019>
const fd_wh000019_004 = document.querySelector('#fd-wh000019-004');
fd_wh000019_004.addEventListener('fdwe-click', (e) => {
console.log('---------- click -------', e.name, e.value);
});
Example
html
<img id="fd-wh000019-006" scr=""/>
<button id="fd-wh000019-007">get_img</button>
<button id="fd-wh000019-008">change_data</button>
<fd-wh000019 id="fd-wh000019-005" style="width: 400px;height: 200px;" theme="dark" tooltip-formatter="{a}</br>{b}" series-icon='circle'
series-center-w='50%' series-center-h='50%' label-formatter='{a}\n{c}' legend-position='5' series-item-gap='20'
show-label legend-orient='horizontal' keep-point='2' series-shape='polygon'
indicator-formatter='{b}\n{c}aa{{=it.percent*100}}aa\n{d}%' axisLine-color='rgba(238, 197, 102, 0.5)'
indicator-text-color='rgb(238, 197, 102)' series-radius='70%' symbol-size='10' title-text='' split-number='4'
splitLine-color='rgba(238, 197, 102, 0.5)' area-color='pink' title-x='50' title-y='50'
series-indicator='[{"name":"完好率","max":300},{"name":"节电率","max":250},{"name":"负载率","max":300},{"name":"功能性","max":5},{"name":"舒适度","max":200},{"name":"能效比","max":100}]'
value='[{"name":"北京","value":[267,216,280,4.8,108,64]},{"name":"上海","value":[222,155,126,4.8,55,64]}]'>
</fd-wh000019>
</fd-wh000019>
js
const fd_wh000019_005 = document.querySelector('#fd-wh000019-005');
const fd_wh000019_007 = document.querySelector('#fd-wh000019-007');
const fd_wh000019_006 = document.querySelector('#fd-wh000019-006');
const fd_wh000019_008 = document.querySelector('#fd-wh000019-008');
fd_wh000019_005.addEventListener('fdwe-click', (e) => {
console.log('---------- click -------', e.name, e.value);
});
fd_wh000019_007.addEventListener('click', () => {
const src = fd_wh000019_005.get_data_url();
fd_wh000019_006.src = src;
});
fd_wh000019_008.addEventListener('click', () => {
fd_wh000019_005.setAttribute('value', '[{"name":"北京","value":[267,216,280,4.8,108,64]},{"name":"上海","value":[222,155,126,4.8,55,64]}]');
});
5 years ago
5 years ago