# MEChart 图表

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/echarts/freepass)
- 平台：移动端
- 维护者：李戈峰
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MEChart]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component } from "react";
import { MEChart } from "@weapp/ui";

export default class EChartDemo extends Component {

  render() {
    const echartOpt = { 
      title: {
        show: true,
        text: "销量柱状图"
      },
      tooltip: {},
      legend: {
        data: ["销量"]
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };

    return (
      <div>
        <MEChart option={echartOpt} />
      </div>
    );
  }
}
```

### 采用getInstance实例调用

采用getInstance实例调用

```jsx
import React, { Component } from "react";
import { MEChart } from "@weapp/ui";

export default class EChartDemo3 extends Component {
    instance: any;
    
    getInstance = (el: any) => {
        this.instance = el;

        console.log('------',this.instance);
        
    }

    
  render() {
    const echartOpt = { 
      title: {
        show: true,
        text: "销量柱状图"
      },
      tooltip: {},
      legend: {
        data: ["销量"]
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };

    return (
      <div>
        <MEChart getInstance={this.getInstance}  option={echartOpt} />
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| option | echats 的选项，请参考 echarts 选项帮助 | EchartOption | 否 |  |
| districtName | 地图图表地区名称 | string | 否 | 中国 |
| regionCode | 区域码 | 否 |  | 100000 |
| needResize | 自动计算图表宽高，能解决父容器宽高动态变化的场景问题, 但会导致动画中断 | boolean | 否 | true |
| renderer | 图表渲染方式 可选值为 `canvas`、`svg` | string | 否 | canvas |
| isEmpty | 是否展示为空列表 | boolean | 否 | false |
| getInstance | 获取 echarts 实例的回调函数 | (echart: EchartsInterface ) => void | fasle |  |
| onReady | 获取 echarts 的回调函数   (echarts: any) => coid | 否 |  |  |
| geoDataHandler | 地图geo数据处理器 | (echarts: AnyObj, geoInfo: { name: string, adcode: string }) => void | 否 |  |
