react中使用echarts配置圖標信息提示框formatter內容

最近作項目是基於react.js框架，使用了螞蟻金服的ANTD。ANTD組件中有圖標組件，是基於G2，但我仍是偏心echarts，因而嘗試在react中使用echarts，趟過了不少坑。本人小白，因而把本身趟過的坑記錄下來分享給初學者們，咱們你們一塊兒學習進步。

坑1：第一次渲染數據爲空，map循環報錯。
描述：從services層獲得服務，傳進models層來處理，在返回給routes層，從routes層將數據直接寫在須要獲取該數據的組件標籤上，例如：<Echatrs data={getData}/>。這樣將每一層、每一個部分都獨立出來，便於開發和維護，符合react的初衷及意義。
狀態：未找到好的辦法解決，望高人詳細指點
解決方式：不從services、models層走，直接在當前的組件中獲取數據，而且寫到周期函數componentDidMount中。
以下：

componentDidMount() {
let postData = {'arg_ou': 'XXXXbu'men'};
let queryData = request('/microservice/cost/overviewbypoint/search_project_type_distribution',postData);
queryData.then(projectTypeData=>{
  if (projectTypeData.RetCode === '1') {
    let data = projectTypeData.DataRows;
    let myChart = echarts.init(this.refs.pieReact); //初始化echarts
    let options = this.setPieOption(data);//要定義一個setPieOption函數將data傳入option裏面
    myChart.setOption(options) //設置options
  }
});  
}

坑2：自由配置echarts中鼠標劃過工具提示框裏的內容
描述：每一個圖標組件都有該功能，叫tooltip，在echarts官方文檔中有相關介紹，但只給了4個默認的參數，若想自由配置就須要本身寫。上網搜了半天都沒找到詳細的方法，只有簡單的描述。如今大神們寫教程都很簡潔，不考慮咱們這種小白的水平，根本看不懂啊~ 而且好多帖子寫的方法都不對，在那糊弄人
狀態：已解決。（如有更好的方法歡迎大神留言告知）
解決方式：首先將數據循環進data裏，此處我判斷了一下是否爲空

data:data.length?
              data.map(function (item) {
                return (
                  {
                    value: item.projCount,
                    name: item.name,
                    replaceMoney: item.replaceMoney
                  }
                )
              })
              :
              []

而後在tooltip下的fomatter裏寫方法，獲得想要展現的內容，並進行簡單的排版，以下：

tooltip: {
    trigger: 'item',
    formatter:  function (params) {
      return [params.name] + '<br/>項目數量 : ' + [params.data.value] + '<br/>資金(萬元) : ' + [params.data.replaceMoney]
    }
  },

ok，目前就這兩處問題簡單總結了一下，下面貼上該組件的完整代碼，在react中的餅狀圖pie爲例：

import React from 'react'; //引入react
import 'echarts/lib/chart/pie' //引入餅狀圖表
import 'echarts/lib/component/tooltip' //圖表提示
import 'echarts/lib/component/toolbox' //圖表提示色點

import request from '../../../utils/request';

//導入echarts
let echarts = require('echarts/lib/echarts');

//定義名爲Pie的餅狀圖組件
export default class Pie extends React.PureComponent {
  //配置狀態
  constructor(props) {
    super(props);
  }

  //配置圖表屬性及基本樣式
  setPieOption = (data) => {
    return {
      tooltip: {
        trigger: 'item',
        formatter:  function (params) {
          return [params.name] + '<br/>項目數量 : ' + [params.data.value] + '<br/>資金(萬元) : ' + [params.data.replaceMoney]
        }
      },
      calculable: true,
      series: {
        name: '詳情',
        type: 'pie',
        radius: [10, 60],
        center: ['50%', '50%'],
        roseType: 'area',
        data:data.length?
          data.map(function (item) {
            return (
              {
                value: item.projCount,
                name: item.name,
                replaceMoney: item.replaceMoney
              }
            )
          })
          :
          []
      }
    }//return結束
  };

  //生命週期進行中
  componentDidMount() {
    let postData = {'arg_ou': 'XXXXbu'men'};
    let queryData = request('/microservice/cost/overviewbypoint/search_project_type_distribution',postData);
    queryData.then(projectTypeData=>{
      if (projectTypeData.RetCode === '1') {
        let data = projectTypeData.DataRows;
        let myChart = echarts.init(this.refs.pieReact); //初始化echarts
        let options = this.setPieOption(data);//要定義一個setPieOption函數將data傳入option裏面
        myChart.setOption(options) //設置options
      }
    });
  }



  //渲染到DOM，此處寬高爲相對單位，便於作自適應
  render() {
    return (
      <div ref="pieReact" style={{width: "100%", height: "35vh"}}></div>
    )
  } //渲染結束

} //組件結束

並非什麼高深的乾貨，只是本身的一點心得，但願對初學者朋友們有幫助。