# EChart 图表

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/echarts/freepass)
- 平台：PC
- 维护者：赵俊飞
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[EChart]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { ECharts } from "echarts/core";
import React, { Component } from "react";
import { constants, EChart } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-echarts`;

interface EChartDemoState {
  barEchartOpt: any;
  newOption: any
}
export default class EChartDemo extends Component<{}, EChartDemoState> {
  echarts: any;
  constructor(props: any) {
    super(props);

    this.state = {
      barEchartOpt: {
        title: {
          show: true,
          text: "销量柱状图"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      newOption: {
        series: [{
          type: 'custom',
          coordinateSystem: 'none',
          renderItem: (params: any, api: any) => {
            // console.log(this.echarts)
            return {
              type: 'myCustomShape',
              shape: {
                x: api.value(0),
                y: api.value(1),
                width: api.value(2),
                height: api.value(3)
              },
              style: {
                fill: 'red'
              }
            };
          },
          data: [[10, 20, 30, 40]]
        }]
      }
    }
  }

  getInstance = (echart: ECharts) => {
    console.log(echart);
  }
  onReady = (echarts: any) => {
    this.echarts = echarts;
    const MyShape = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
      },
      buildPath: function (ctx: any, shape: any) {
        ctx.moveTo(shape.x, shape.y);
        ctx.lineTo(shape.x + shape.width, shape.y);
        ctx.lineTo(shape.x, shape.y + shape.height);
        ctx.lineTo(shape.x + shape.width, shape.y + shape.height);
        ctx.closePath();
      }
    });
    echarts.graphic.registerShape('myCustomShape', MyShape);
  }
  render() {

    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-content`}>
          <EChart option={this.state.barEchartOpt} />
          {/* <EChart option={JSON.parse(JSON.stringify(this.state.barEchartOpt))} isEmpty={true} /> */}
          {/* <EChart option={this.state.newOption} onReady={this.onReady} /> */}
        </div>
      </div>
    )
  }
}
```

### 地图

地图

```jsx
import { ECharts } from "echarts/core";
import { Component } from "react";
import { constants, EChart, Select } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-echarts`;
const selectStyle = { width: 200 };

const options = [
  { id: '1000000', content: '世界地图' },
  { id: '100000', content: '中国' },
  { id: '110000', content: '北京市' },
  { id: '120000', content: '天津市' },
  { id: '130000', content: '河北省' },
  { id: '140000', content: '山西省' },
  { id: '150000', content: '内蒙古自治区' },
  { id: '210000', content: '辽宁省' },
  { id: '220000', content: '吉林省' },
  { id: '230000', content: '黑龙江省' },
  { id: '310000', content: '上海市' },
  { id: '320000', content: '江苏省' },
  { id: '330000', content: '浙江省' },
  { id: '340000', content: '安徽省' },
  { id: '350000', content: '福建省' },
  { id: '360000', content: '江西省' },
  { id: '370000', content: '山东省' },
  { id: '410000', content: '河南省' },
  { id: '420000', content: '湖北省' },
  { id: '430000', content: '湖南省' },
  { id: '440000', content: '广东省' },
  { id: '450000', content: '广西壮族自治区' },
  { id: '460000', content: '海南省' },
  { id: '500000', content: '重庆市' },
  { id: '510000', content: '四川省' },
  { id: '520000', content: '贵州省' },
  { id: '530000', content: '云南省' },
  { id: '540000', content: '西藏自治区' },
  { id: '610000', content: '陕西省' },
  { id: '620000', content: '甘肃省' },
  { id: '630000', content: '青海省' },
  { id: '640000', content: '宁夏回族自治区' },
  { id: '650000', content: '新疆维吾尔自治区' },
  { id: '710000', content: '台湾省' },
  { id: '810000', content: '香港特别行政区' },
  { id: '820000', content: '澳门特别行政区' },
];

export default class EChartDemo extends Component {

  state = {
    regionCode: "100000"
  }

  getInstance = (echart: ECharts) => {
    console.log(echart);
  }

  onSelectChange = (value: any) => {
    this.setState({ regionCode: value });
  }

  geoDataHandler = (geoData: any, geoInfo: { name: string, adcode: string }) => {
    if (geoInfo.adcode == '1000000') {
      // 修改世界地图的数据
    } if (geoInfo.adcode == '100000') {
      // 修改中国地图的数据
    }
    if (geoInfo.adcode == "310000") {
      // 修改上海市的数据
    }
    return geoData;
  }

  render() {

    const mapEchartOpt = {
      title: {
        show: true,
        text: "地图"
      },
      series: [
        {
          type: "map",
          mapType: '江苏省',
          data: [],
          map: "china",
          roam: true, // 允许缩放和平移
        }
      ],
      tooltip: {
        // trigger: 'item',
        // formatter: function (params:any) {
        //     return `${params.name} <br/>人口: 万`;
        // }
    },
    };
    const { regionCode } = this.state;
    return (
      <div className={prefixCls}>
        <Select value={regionCode} style={selectStyle} data={options} onChange={this.onSelectChange} />
        <div className={`${prefixCls}-content`}>
          <EChart
            getInstance={this.getInstance}
           
            option={mapEchartOpt}
            regionCode={regionCode}
            geoDataHandler={this.geoDataHandler}
          />
        </div>
      </div>
    )
  }
}
```

### 企业微信名称转译

企业微信扫码登录的场景处理

```jsx
import { ECharts } from "echarts/core";
import React, { Component } from "react";
import { constants, EChart } from "@weapp/ui";
import { convertWechatData, needConvertWechatData } from '@weapp/utils';

const prefixCls = `${constants.uiPcClsPrefix}-demo-echarts`;
interface EChartDemoState {
  barEchartOpt: any;
}
export default class EChartDemo extends Component<{}, EChartDemoState> {
  echarts: any;
  constructor(props: any) {
    super(props);

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

  componentDidMount() {
    if (needConvertWechatData()) {
      convertWechatData(["$userName=ChenWei$"]).then((data: any) => {
        this.setState({
          barEchartOpt: {
            title: {
              show: true,
              text: data[0]
            },
            tooltip: {},
            legend: {
              data
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: data[0],
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
        })
      })
    }
  }

  getInstance = (echart: ECharts) => {
    console.log(echart);
  }

  render() {

    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-content`}>
          <EChart option={this.state.barEchartOpt} />
        </div>
      </div>
    )
  }
}
```

### 数据为空时展示空列表

数据为空时展示空列表

```jsx
import { ECharts } from "echarts/core";
import React, { Component } from "react";
import { constants, EChart } from "@weapp/ui";
import { convertWechatData, needConvertWechatData } from '@weapp/utils';

const prefixCls = `${constants.uiPcClsPrefix}-demo-echarts`;
interface EChartDemoState {
  barEchartOpt: any;
}
export default class EChartDemo extends Component<{}, EChartDemoState> {
  echarts: any;
  constructor(props: any) {
    super(props);

    this.state = {
      barEchartOpt: {
        title: {
          show: true,
          text: "销量柱状图"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: []
          }
        ]
      }
    }
  }

  componentDidMount() {
    if (needConvertWechatData()) {
      convertWechatData(["$userName=ChenWei$"]).then((data: any) => {
        this.setState({
          barEchartOpt: {
            title: {
              show: true,
              text: data[0]
            },
            tooltip: {},
            legend: {
              data
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: data[0],
                type: "bar",
                data: []
              }
            ]
          }
        })
      })
    }
  }

  getInstance = (echart: ECharts) => {
    console.log(echart);
  }

  render() {

    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-content`}>
          <EChart isEmpty={true} option={this.state.barEchartOpt} />
        </div>
      </div>
    )
  }
}
```

## Tips

option的更多选项可参考[https://echarts.apache.org/zh/index.html](https://echarts.apache.org/zh/index.html)

## 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 | 否 |  |
