echart 在zhu显示图标_react中使用echarts配置图标信息提示框formatter内容

最近做项目是基于react.js框架，使用了蚂蚁金服的ANTD。ANTD组件中有图标组件，是基于G2，但我还是偏爱echarts，于是尝试在react中使用echarts，趟过了很多坑。本人小白，于是把自己趟过的坑记录下来分享给初学者们，我们大家一起学习进步。

坑1：第一次渲染数据为空，map循环报错。

描述：从services层得到服务，传进models层来处理，在返回给routes层，从routes层将数据直接写在需要获取该数据的组件标签上，例如：。这样将每一层、每个部分都独立出来，便于开发和维护，符合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] + '
项目数量 : ' + [params.data.value] + '
资金(万元) : ' + [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] + '
项目数量 : ' + [params.data.value] + '
资金(万元) : ' + [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 (

)

} //渲染结束

} //组件结束

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