react中使用echarts配置图标信息提示框formatter内容
最近做项目是基于react.js框架,使用了蚂蚁金服的ANTD。ANTD组件中有图标组件,是基于G2,但我还是偏爱echarts,于是尝试在react中使用echarts,趟过了很多坑。本人小白,于是把自己趟过的坑记录下来分享给初学者们,我们大家一起学习进步。 坑1:第一次渲染数据为空,map循环报错。 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中鼠标划过工具提示框里的内容 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,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> ) } //渲染结束 } //组件结束 并不是什么高深的干货,只是自己的一点心得,希望对初学者朋友们有帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |