npm package: @feidao-msz/fd-wh000006
Description: 柱状图＆折线图
Author: taoqf
Latest version: 4.6.201908021904

# 柱状图＆折线图

<!-- TOC -->

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

<!-- /TOC -->

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

## Installation

```sh
yarn add --dev @dfeidao/fd-wh000006
```

## Tag

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

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

## Attributes

### `value`

渲染图表的数据。

例：

```html
<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】
示例：

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

### `y-right`

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

```text
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`

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

```html
<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`

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

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

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

### `zoom-inside-hide`

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

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

### `zoom-slider-hide`

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

### `data-zoom-start`

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

### `data-zoom-end`

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

### `show-label`

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

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

### `label-position`

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

默认为 'top'

### `label-formatter`

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

```doc
字符串模板 模板变量有：

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

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

示例:

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

label换行示例：

> label-formatter的值有一个换行

```html
<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】

数据格式示例:

```js
// 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。

导出图表图片

```html
<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>
```

```javascript
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事件绑定示例

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

### `fdwe-click`

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

```html
<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"}]'>
```

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

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

## Example

### `动态数据`

要传入的html代码

```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代码

```javascript
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代码

```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代码

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

### `百分比轴示例`

```html
<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>
```