---
order: 2
group:
  title: 图表
  order: 1
---

## 柱状折线图


```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  option: {
    legend: {
      show: true,
      textStyle:{
        color:'#fff'
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '水量',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml',
        },
      },
      {
        type: 'value',
        name: '温度',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C',
        },
      },
    ],
    series: [

      {
        name: '降水量',
        type: 'bar',
      },
      {
        name: '平均温度',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 15,
      },
    ],
  },
  data: {
    xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    yData: [
      [2.6, 5.9, 9.0, 236.4, 28.7, 70.7, 7.6],[2.0, 2.2, 3.3, 20.5, 6.3, 10.2, 9.3],
    ],
  },
};

export default () => <Charts.BarLineChart {...props} />;
```

## API

| 参数   | 说明                                                                                        | 类型   |
| ------ | ------------------------------------------------------------------------------------------- | ------ |
| size   | 容器的宽高                                                                                  | object |
| data   | 图表数据                                                                                    | object |
| option | 图表配置项，具体配置请参照[echarts 配置项 ](https://www.echartsjs.com/zh/option.html#title) | object |

### data

| 参数  | 说明     | 类型  |
| ----- | -------- | ----- |
| xData | x 轴数据 | array |
| yData | y 轴数据 | array |

### size

| 参数   | 说明 | 类型           |
| ------ | ---- | -------------- |
| width  | 宽度 | number\|string |
| height | 高度 | number\|string |