柱状图＆折线图

• Installation
• Tag
• Attributes
  • value
  • x
  • x-name
  • y-left
  • y-right
  • y-left-name
  • y-right-name
  • bar
  • bar-max-width
  • line
  • theme
  • legend-hide
  • legend-left
  • legend-top
  • tooltip-formatter
  • zoom-inside-hide
  • zoom-slider-hide
  • data-zoom-start
  • data-zoom-end
  • show-label
  • label-position
  • label-formatter
  • show-average
  • show-max
  • show-min
  • x-label-interval
  • x-label-rotate
  • mark-lines
  • y-left-formatter
  • y-right-formatter
• Methods
  • setAttribute
  • get_data_url
• Events
  • feidao-web事件绑定示例
  • fdwe-click
• Example
  • 动态数据
  • 完整功能示例
  • 百分比轴示例

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

Installation

yarn add --dev @dfeidao/fd-wh000006

Tag

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

<fd-wh000006 style="width:500px;height:150px;"></fd-wh000006>

Attributes

value

渲染图表的数据。

例：

<fd-wh000006 id="widget_000006" style="width: 40em;height: 20em;" x="time"  value='[{"time":"1997/12/09","收入":"961","客流量":"2","销售量":"2"},{"time":"1997/12/10","收入":"991","客流量":"3","销售量":"243"},{"time":"1997/12/11","收入":"891","客流量":"7","销售量":"122"},{"time":"1997/12/12","收入":"101","客流量":"7","销售量":"32"},{"time":"1997/12/13","收入":"961","客流量":"7","销售量":"323"},{"time":"1997/12/14","收入":"991","客流量":"7","销售量":"124"},{"time":"1997/12/15","收入":"81","客流量":"7","销售量":"152"},{"time":"1997/12/16","收入":"111","客流量":"7","销售量":"173"},{"time":"1997/12/17","收入":"961","客流量":"7","销售量":"142"},{"time":"1997/12/18","收入":"991","客流量":"7","销售量":"137"},{"time":"1997/12/19","收入":"891","客流量":"8","销售量":"103"},{"time":"1997/12/20","收入":"101","客流量":"7","销售量":"142"}]'>
</fd-wh000006>

x

作为x轴数据的字段名。

x-name

x坐标轴的名称。

y-left

对应左y轴数据的字段名。【String Array】 示例：

y-left='["销售量","收入"]'

y-right

对应右y轴数据的字段名。【String Array】 示例：

y-right='["销售量","收入"]'

y-left-name

左y轴名称

y-right-name

右y轴名称

bar

显示为柱状图，示例 bar='["客流量","收入"]'。【Array】

bar-max-width

设置柱状图的最大宽度，实例 bar-max-width='30px',如果未设置默认为'20px'

line

显示为折线图，示例 line='["销售量"]'。【Array】

theme

主题，可选值为'dark','infographic','macarons','roma','shine','vintage'。[ default: 'infographic' ]

legend-hide

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

<fd-wh000006 style="width: 40em;height: 20em;" x="time" legend-hide value='[{"time":"1997/12/09","收入":"961","客流量":"2","销售量":"2"},{"time":"1997/12/10","收入":"991","客流量":"3","销售量":"243"},{"time":"1997/12/11","收入":"891","客流量":"7","销售量":"122"},{"time":"1997/12/12","收入":"101","客流量":"7","销售量":"32"},{"time":"1997/12/13","收入":"961","客流量":"7","销售量":"323"},{"time":"1997/12/14","收入":"991","客流量":"7","销售量":"124"},{"time":"1997/12/15","收入":"81","客流量":"7","销售量":"152"},{"time":"1997/12/16","收入":"111","客流量":"7","销售量":"173"},{"time":"1997/12/17","收入":"961","客流量":"7","销售量":"142"},{"time":"1997/12/18","收入":"991","客流量":"7","销售量":"137"},{"time":"1997/12/19","收入":"891","客流量":"8","销售量":"103"},{"time":"1997/12/20","收入":"101","客流量":"7","销售量":"142"}]'>
</fd-wh000006>

legend-left

图例离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

legend-top

图例离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

tooltip-formatter

默认有一种显示情况，也可以传入字符串模板，模板支持两种方式。示例:

<fd-wh000006 tooltip-formatter="{b0}: {c0}<br />{b1}: {c1}<br/> 百分比： {{=it[0].value * 0.01}}%">
</fd-wh000006>

{a}（系列名称），{b}（类目值），{c}（数值）

zoom-inside-hide

是否隐藏滑动型缩放组件。默认显示。

<fd-wh000006 zoom-inside-hide>
</fd-wh000006>

zoom-slider-hide

是否隐藏拖动型缩放组件。默认显示。

data-zoom-start

区域缩放的起点。单位%[ default: 0 ]

data-zoom-end

区域缩放的终点。单位%[ default: 100 ]

show-label

每一项上边都显示数值标签

<fd-wh000006 show-label>
</fd-wh000006>

label-position

标签的位置，可选值 'top'，'left'，'right'，'bottom'，'inside'，'insideLeft'，'insideRight'，'insideTop'，'insideBottom'，'insideTopLeft'，'insideBottomLeft'，'insideTopRight'，'insideBottomRight'

默认为 'top'

label-formatter

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

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。

所有dot支持的模板{{=it.name}}

示例:

<fd-wh000006 label-formatter="{a} and {c} and {{=it.name}} and {{=it.value * 0.01}} %" />

label换行示例：

label-formatter的值有一个换行

<fd-wh000006 id="widget"  show-label style="width:500px;height:800px"  x="时间" bar='["客流量", "收入"]' y-left='["收入"]' label-formatter="{a}
{c}" value='[{"时间":"1997/12/09","收入":"961","客流量":"2","销售量":"2"},{"时间":"1997/12/10","收入":"991","客流量":"3","销售量":"243"},{"时间":"1997/12/11","收入":"891","客流量":"7","销售量":"122"},{"时间":"1997/12/12","收入":"101","客流量":"7","销售量":"32"},{"时间":"1997/12/13","收入":"961","客流量":"7","销售量":"323"},{"时间":"1997/12/14","收入":"991","客流量":"7","销售量":"124"},{"时间":"1997/12/15","收入":"81","客流量":"7","销售量":"152"},{"时间":"1997/12/16","收入":"111","客流量":"7","销售量":"173"},{"时间":"1997/12/17","收入":"961","客流量":"7","销售量":"142"},{"时间":"1997/12/18","收入":"991","客流量":"7","销售量":"137"},{"时间":"1997/12/19","收入":"891","客流量":"8","销售量":"103"},{"时间":"1997/12/20","收入":"101","客流量":"7","销售量":"142"}]'>
</fd-wh000006>

show-average

显示平均线

show-max

显示最大值标记点

show-min

显示最小值标记点

设置了该属性则会出现数值标签, 默认不显示

x-label-interval

设置x轴标签隔几个柱子显示,传0为每个柱子都显示标签【number】

x-label-rotate

设置x轴标签倾斜角度【number】

30为逆时针旋转30度, -30为顺时针旋转30度

mark-lines

设置标线【Array】

数据格式示例:

// key 和value 的值中的key相对应，name为显示的文字，y为刻度，color为标线的颜色
// color传为"",则使用默认的颜色

mark-lines='[{"key":"客流量","name":"--1--","y":1,"color":"red"},{"key":"收入","name":"--2--","y":500,"color":"yellow"}]'

y-left-formatter

左y轴的字符串模板，可选。

y-right-formatter

右y轴的字符串模板，可选。

Methods

setAttribute

设置控件属性值

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

value 渲染图表的数据。

get_data_url

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

导出图表图片

<button id="get_img">get_img</button>
<img id="img" src="" />
<fd-wh000006 id="widget" style="width: 40em;height: 20em;background-color: white;" class="display-b ht200" bar='["客流量","收入"]' theme="macarons" x="time" x-name="时间" value='[{"time":"1997/12/09","收入":"961","客流量":"2","销售量":"2"},{"time":"1997/12/10","收入":"991","客流量":"3","销售量":"243"},{"time":"1997/12/11","收入":"891","客流量":"7","销售量":"122"},{"time":"1997/12/12","收入":"101","客流量":"7","销售量":"32"},{"time":"1997/12/13","收入":"961","客流量":"7","销售量":"323"},{"time":"1997/12/14","收入":"991","客流量":"7","销售量":"124"},{"time":"1997/12/15","收入":"81","客流量":"7","销售量":"152"},{"time":"1997/12/16","收入":"111","客流量":"7","销售量":"173"},{"time":"1997/12/17","收入":"961","客流量":"7","销售量":"142"},{"time":"1997/12/18","收入":"991","客流量":"7","销售量":"137"},{"time":"1997/12/19","收入":"891","客流量":"8","销售量":"103"},{"time":"1997/12/20","收入":"101","客流量":"7","销售量":"142"}]'>
</fd-wh000006>

const widget = document.querySelector('#widget');
const get_img = document.querySelector('#get-img');
const img = document.querySelector('#img');

get_img.addEventListener('click', () => {
    const src = widget.get_data_url();
    img.src = src;
});

Events

feidao-web事件绑定示例

<fd-wh000006 id="widget" data-feidao-actions="fdwe-click:a001">

fdwe-click

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

<fd-wh000006 id="widget" style="width: 40em;height: 20em;" x="time" bar='["客流量", "收入", "销售量"]' legend-hide value='[{"time":"1997/12/09","收入":"961","客流量":"2","销售量":"2"},{"time":"1997/12/10","收入":"991","客流量":"3","销售量":"243"},{"time":"1997/12/11","收入":"891","客流量":"7","销售量":"122"},{"time":"1997/12/12","收入":"101","客流量":"7","销售量":"32"},{"time":"1997/12/13","收入":"961","客流量":"7","销售量":"323"},{"time":"1997/12/14","收入":"991","客流量":"7","销售量":"124"},{"time":"1997/12/15","收入":"81","客流量":"7","销售量":"152"},{"time":"1997/12/16","收入":"111","客流量":"7","销售量":"173"},{"time":"1997/12/17","收入":"961","客流量":"7","销售量":"142"},{"time":"1997/12/18","收入":"991","客流量":"7","销售量":"137"},{"time":"1997/12/19","收入":"891","客流量":"8","销售量":"103"},{"time":"1997/12/20","收入":"101","客流量":"7","销售量":"142"}]'>

const widget = document.querySelector('#widget');

widget.addEventListener('fdwe-click', (p) => {
    console.log(p.name + ":" + p.value, p.extra);
});

Example

动态数据

要传入的html代码

<button id="change_data">change_data</button>
<fd-wh000006 id="widget" x="time" style="width: 40em;height: 20em;background-color: white;" class="display-b ht200" bar='["客流量","收入"]' theme="macarons" x-name="时间" value='[{"time":"1997/12/09","收入":"961","客流量":"2","销售量":"2"},{"time":"1997/12/10","收入":"991","客流量":"3","销售量":"243"},{"time":"1997/12/11","收入":"891","客流量":"7","销售量":"122"},{"time":"1997/12/12","收入":"101","客流量":"7","销售量":"32"},{"time":"1997/12/13","收入":"961","客流量":"7","销售量":"323"},{"time":"1997/12/14","收入":"991","客流量":"7","销售量":"124"},{"time":"1997/12/15","收入":"81","客流量":"7","销售量":"152"},{"time":"1997/12/16","收入":"111","客流量":"7","销售量":"173"},{"time":"1997/12/17","收入":"961","客流量":"7","销售量":"142"},{"time":"1997/12/18","收入":"991","客流量":"7","销售量":"137"},{"time":"1997/12/19","收入":"891","客流量":"8","销售量":"103"},{"time":"1997/12/20","收入":"101","客流量":"7","销售量":"142"}]'>
</fd-wh000006>

要传入的js代码

const widget = document.getElementById('widget');
const change_data = document.getElementById('change_data');

change_data.addEventListener('click', () => {
    widget.setAttribute('value', '[{"time": "1997/12/09","收入": "961","客流量": "2"}, {"time": "1997/12/10","收入": "991","客流量": "3"}, {"time": "1997/12/11","收入": "891","客流量": "7"}, {"time": "1997/12/12","收入": "101","客流量": "7"}, {"time": "1997/12/13","收入": "961","客流量": "7"}, {"time": "1997/12/14","收入": "991","客流量": "7"}, {"time": "1997/12/15","收入": "81","客流量": "7"}, {"time": "1997/12/16","收入": "111","客流量": "7"}, {"time": "1997/12/17","收入": "961","客流量": "7"}, {"time": "1997/12/18","收入": "991","客流量": "7"}, {"time": "1997/12/19","收入": "891","客流量": "8"}, {"time": "1997/12/20","收入": "101","客流量": "7"}]');
});

完整功能示例

要传入的html代码

<button id="change_data">change_data</button>
<fd-wh000006 id="widget" style="width: 40em;height: 20em;background-color: white;" class="display-b ht200" x="时间" bar='["客流量", "收入"]' line='["销售量"]'y-left='["收入"]' y-left-name="自定义的左y轴名称" y-right-name="自定义的右y轴名称" y-right='["客流量"]' theme="macarons" x-name="时间" value='[{"时间":"1997/12/09","收入":"961","客流量":"2","销售量":"2"},{"时间":"1997/12/10","收入":"991","客流量":"3","销售量":"243"},{"时间":"1997/12/11","收入":"891","客流量":"7","销售量":"122"},{"时间":"1997/12/12","收入":"101","客流量":"7","销售量":"32"},{"时间":"1997/12/13","收入":"961","客流量":"7","销售量":"323"},{"时间":"1997/12/14","收入":"991","客流量":"7","销售量":"124"},{"时间":"1997/12/15","收入":"81","客流量":"7","销售量":"152"},{"时间":"1997/12/16","收入":"111","客流量":"7","销售量":"173"},{"时间":"1997/12/17","收入":"961","客流量":"7","销售量":"142"},{"时间":"1997/12/18","收入":"991","客流量":"7","销售量":"137"},{"时间":"1997/12/19","收入":"891","客流量":"8","销售量":"103"},{"时间":"1997/12/20","收入":"101","客流量":"7","销售量":"142"}]'>
</fd-wh000006>

要传入的js代码

const widget = document.getElementById('widget');
const change_data = document.getElementById('change_data');

console.log(widget);
widget.addEventListener('fdwe-click', (e) => {
    console.log('click', e.name, e.value);
});
change_data.addEventListener('click', () => {
    widget.setAttribute('value', '[{"time": "1997/12/09","收入": "961","客流量": "2"}, {"time": "1997/12/10","收入": "991","客流量": "3"}, {"time": "1997/12/11","收入": "891","客流量": "7"}, {"time": "1997/12/12","收入": "101","客流量": "7"}, {"time": "1997/12/13","收入": "961","客流量": "7"}, {"time": "1997/12/14","收入": "991","客流量": "7"}, {"time": "1997/12/15","收入": "81","客流量": "7"}, {"time": "1997/12/16","收入": "111","客流量": "7"}, {"time": "1997/12/17","收入": "961","客流量": "7"}, {"time": "1997/12/18","收入": "991","客流量": "7"}, {"time": "1997/12/19","收入": "891","客流量": "8"}, {"time": "1997/12/20","收入": "101","客流量": "7"}]');
});

百分比轴示例

<fd-wh000006 id="widget" percent data-zoom-start=0 data-zoom-end=40 x-label-interval='1' tooltip-formatter="{a}:{b}<br/>{{=it[1].value * 100}}%" xLabel-rotate='-50' show-lable style="width:500px;height:500px" x="时间"
	bar='["销售量","客流量"]' y-left='["销售量","客流量"]' y-left-formatter="{{=it*100}}%" value='[{"时间":"1997/12/09","销售量":"0.5","客流量":"0.6"},{"时间":"1997/12/10","销售量":"0.2","客流量":"0.1"},{"时间":"1997/12/11","销售量":"0.3","客流量":"0.3"}]'>
</fd-wh000006>