@dfeidao/fd-wh000006 v4.6.201908061911
柱状图&折线图
- 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
-x-formatter
-stack
- Methods
-
setAttribute
-get_data_url
- Events
- feidao-web事件绑定示例
-
fdwe-click
- Example
-
动态数据
-完整功能示例
-百分比轴示例
-数据叠加显示
- ChangeLogs - latest - 4.6.201908051108 - 4.6.201908021805 不兼容升级 - 4.6.201908021406
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轴的字符串模板, 支持 dot 模板格式。
y-right-formatter
右y轴的字符串模板, 支持 dot 模板格式。
x-formatter
x轴的字符串模板, 支持 dot 模板格式。
stack
设置数据堆叠。同组的数据叠加显示。
例如: stack='["销售量","客流量","销售额"]'
同一组的销售量和客流量的数据将叠加显示。
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" data-zoom-start=0 data-zoom-end=40 x-label-interval='1' tooltip-formatter="{a}:{b}<br/>{{=it[1].value * 100}}%" x-label-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>
数据叠加显示
<fd-wh000006 id="widget" zoom-inside-hide zoom-slider-hide data-zoom-start=0 data-zoom-end=500 show-lable
style="width:500px;height:500px" x="时间" bar='["销售量","客流量","销售额","利润"]' line='[]' y-left='["销售量","客流量"]'
value='[{"时间":"1997/12/09","销售量":"50","客流量":"60","销售额":"72","利润":"50"},{"时间":"1997/12/10","销售量":"20","客流量":"10","销售额":"15","利润":"12"},{"时间":"1997/12/11","销售量":"30","客流量":"30","销售额":"30","利润":"64"}]' stack='[["销售量","客流量"],["销售额","利润"]]'>
</fd-wh000006>
ChangeLogs
latest
- 添加stack属性,设置同组的数据叠加显示。
- 修复不设置bar属性报错的问题
4.6.201908051108
新增属性y-left-formatter, y-right-formatter,允许用户设置y轴刻度的显示形式
4.6.201908021805 不兼容升级
- 规范属性命名,单词之间使用中划线
- 拓展formater
4.6.201908021406
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago