React使用echarts-for-react

參考npm文檔：[echarts-for-react](echarts-for-react)

由于npm上已經有針對react項目出的echarts插件,是以在這裡直接安裝

第一步：npm安裝echarts-for-react

npm install --save echarts-for-react
npm install echarts --save //如果有報錯找不到echarts子產品，需要在安裝一下exharts'
           

第二步：引入子產品群組件

import echarts from 'echarts' 
import echarts from 'echarts/lib/echarts'

<ReactEcharts option={this.getOption()} />
           

第三步：參考echarts官網執行個體添加option參數

參考官網：ECharts Demo

getOption =()=> {
    let option = {
        title:{
          text:'使用者騎行訂單'
        },
        tooltip:{   //展示資料
          trigger:'axis'
        },
        xAxis:{
          data:['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis:{
          type:'value'
        },
        series:[
          {
            name:'訂單量',
            type:'bar',
            data:[1000,2000,1500,3000,2000,1200,800]
          }
        ]
    }
    return option;
  }
           

注意：由于引入echarts檔案太大，是以一般按需引入，完整項目代碼如下：

import React from 'react';
import {Card} from 'antd';
import echartTheme from './../themeLight'
//不是按需加載的話檔案太大
//import echarts from 'echarts'
//下面是按需加載
import echarts from 'echarts/lib/echarts'
//導入折線圖
import 'echarts/lib/chart/line';  //折線圖是line,餅圖改為pie,柱形圖改為bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
export default class Line extends React.Component{
  componentWillMount(){
    //主題的設定要在willmounted中設定
    echarts.registerTheme('Imooc',echartTheme);
  }
  getOption =()=> {
    let option = {
      title:{
        text:'使用者騎行訂單',
        x:'center'
      },
      tooltip:{
        trigger:'axis',
      },
      xAxis:{
        data:['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis:{
        type:'value'
      },
      series:[
        {
          name:'OFO訂單量',
          type:'line',   //這塊要定義type類型，柱形圖是bar,餅圖是pie
          data:[1000,2000,1500,3000,2000,1200,800]
        }
      ]
    }
   return option
  }

  render(){
    return(
      <div>
        <Card title="折線圖表之一">
            <ReactEcharts option={this.getOption()} theme="Imooc"  style={{height:'400px'}}/>
        </Card>

      </div>
    )
  }
}
           

注意：按需加載是引入node_modules檔案夾中的js檔案，是以，如果記得改import 'echarts/lib/chart/line'; 折線圖不用改，餅圖和柱形圖line分别改為pie和bar

https://github.com/topvae/echar