@dfeidao/fd-wh000019

v4.6.201910171450

Published

4 years ago

雷达图

0High
0Medium
0Low

taoqf

feidao 01feidao dfeidao atom 飞道控件 ai

雷达图

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＝'４' />

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

雷达图

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