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>
    )
  } //渲染结束

} //组件结束

并不是什么高深的干货,只是自己的一点心得,希望对初学者朋友们有帮助。

    原文作者:失落的额头
    原文地址: https://segmentfault.com/a/1190000011917755
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞