---
name: Line
route: /Line
---

import { Demo, Demo11, Demo2, Demo3, Demo4, Demo5 } from './Demo';

## 线图相关

> 汇总说明

`series` 里面的 `after` 字段会显示在tooltip 数值后面  
`series[0]` 里面的 `th` 字段会显示在tooltip 标题部分  
`yLabelsFormat` 字段会显示在Y轴的 系统默认是 `{value}` 你自己可以在前后加东西  


### 条形渐变图
<Demo />

> 特有tootip  
配置方式  options 里面添加 tipFmt: 'formatter2', series里面添加  tipFormatter: '<div>入口曝光uv: 5,655<br />入口曝光uv: 5,655</div>' || Function

<Demo11 />

#### 调用方式

``` javascript
import { Line } from 'PBL-Highcharts';
const options = Line.AreaSpline({
    series:[
      {
        name: '小张',
        data: [3, 4, 3, 5, 4, 10, 12],
        after: 'mm',
        th: '自定义的标题',
        tipFormatter: () => '<div>入口曝光uv: 222<br />入口曝光uv: 11111</div>'
      },
      {
        name: '小潘',
        data: [1, 3, 4, 3, 3, 5, 4]
      }
    ],
    tipFmt: 'formatter2',
    yTitle: '入口名称',
    yLabelsFormat: '{value}%',
    yPlotLines:[{
			value: 9,
      text: '平均值',
    }],
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

// options 就是hichart配置项
```

#### 参数说明

| 参数 | 类型 |说明  |
| ---  | ---  | --- |
| series   | object[]   |  线图series 数据项 |
| yTitle?      | string[]   | 双y轴标题  |
| categories?  | string[]   | X轴 文字|
| yPlotLines?  | object[]   | 设置标示线 color? dashStyle? width? `value` `text` style?  |


 
 
 
 ### 条形和柱状图
<Demo2 />

#### 调用方式

``` javascript
import { Line } from 'PBL-Highcharts';
const options = Line.LineBar({
    lineSeries:[
      {
        name: '小张',
        data: [3, 4, 3, 5, 4, 10, 12]
      },
      {
        name: '小潘',
        data: [1, 3, 4, 3, 3, 5, 4]
      }
    ],
    barSeries: [{
      name: '小明',
      data: [53, 45, 63, 75, 48, 86, 52],
      after: 'css'
    }],
    yTitle: ['入口名称', '入口名称2'],
    yLabelsFormat: ['{value}cc', '{value}dd'],
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

// options 就是hichart配置项
```

#### 参数说明

| 参数 | 类型 |说明  |
| ---  | ---  | --- |
| lineSeries   | object[]   |  线图series 数据项 |
| barSeries    | object[]   |  柱状图series 数据项 |
| yTitle?      | string[]   | 双y轴标题  |
| categories?  | string[]   | X轴 文字|
| lineYPlotLines?  | object[]   | 设置标示线 color? dashStyle? width? `value` `text` style?  |
| barYPlotLines?  | object[]   | 设置标示线 color? dashStyle? width? `value` `text` style?  |


### min版本

<Demo3 />


``` javascript
import { Line, RenderChart } from 'PBL-Highcharts';
const op = Line.MinArea({
  series:[
    {
      data: [3, 4, 3, 5, 4, 10, 12],
    },
  ],
  categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
});

<RenderChart style={{width: 200, height: 80, background: '#ccc' }} option={op} />;

// options 就是hichart配置项
```

#### 参数说明

| 参数 | 类型 |说明  |
| ---  | ---  | --- |
| series       | {data: [], fillColor?:{}[]  |  series 数据项 |



### 双Y

<Demo4 />


``` javascript
import { Line, RenderChart } from 'PBL-Highcharts';
const op = Line.doubleY({
  leftYData:[
    {
      name: '小张',
      data: [3, 4, 3, 5, 4, 10, 12],
      type: 'areaspline',
      th: '大家诶我'
    },
    {
      name: '小潘',
      data: [1, 3, 4, 3, 3, 5, 4],
      type: 'areaspline'
    }
  ],
  rightYData: [{
    name: '小明',
    data: [53, 45, 63, 75, 48, 86, 52],
    after: 'css',
    type: 'column'
  }],
  leftYPlotLines:[{
    value: 9,
    text: '平均值',
  }],
  rightYPlotLines:[{
    value: 66,
    color: 'red',
    text: '平均值2',
  }],
  yTitle: ['入口名称', '入口名称2'],
  yLabelsFormat: ['{value}cc', '{value}dd'],
  categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
});


// options 就是hichart配置项
```

#### 参数说明

| 参数 | 类型 |说明  |
| ---  | ---  | --- |
| leftYData       |
| rightYData      |
| leftYPlotLines  |
| rightYPlotLines |
| yTitle          |
| yLabelsFormat   |
| categories      |






### 自定义tooltip
<Demo5 />


#### 调用方式

``` javascript
const options = Line.AreaSpline({
  series:[
    {
      name: '小张',
      data: [3, 4, 3, 5, 4, 10, 12],
      tipHead(e: any) {
        return `<th>标题</th><th>X轴${e.x}</th>`;
      },
      tipBody(e: any) {
        return e.points.map((val: any) => (
          `
            <tr>
              <td>${val.series.name}</td>
              <td>${val.y}</td>
            </tr>
          `
        )).join('')
      }
    },
    {
      name: '小潘',
      data: [1, 3, 4, 3, 3, 5, 4]
    }
  ],
  categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
});
```

#### 参数说明

`series[0]`里面配置  
tipHead? `function(e) => html` 配置头部  
tipBody? `function(e) => html` 配置主题  

注意`tipHead`需要返回 `tr` 里面的 `th`  
注意`tipBody`需要返回 `tr` 里面的 td数量与th相同