import React from 'react'
import ReactEcharts from 'echarts-for-react'

const ModuleLoadChartComponent = () => {
  const option = {
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
    }],
  }

  let code = '<ReactEcharts \n' +
                    '    option={this.getOtion()} \n' +
                    "    style={{height: '350px', width: '100%'}}  \n" +
                    "    modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']} \n" +
                    "    className='react_for_echarts' />"
  return (
    <div className="examples">
      <div className="parent">
        <label> load echarts module as you wish <strong>reduce the file size</strong>: </label>
        <ReactEcharts
          option={option}
          style={{ height: '350px', width: '100%' }}
          modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']}
          className="react_for_echarts"
        />
        <label> code below: </label>
        <pre>
          <code>{code}</code>
        </pre>
      </div>
    </div>
  )
}

export default ModuleLoadChartComponent