基于echarts 灵活封装react饼图组件
这段时间比较忙,没什么时间封装组件库,同事都不怎么会使用echarts,今天随手封装了一个echart的饼图, 百十来行的代码同事用了都说好!
废话不多说封装组件之前,首先要考虑我们的组件,都要包含哪些功能;
- 窗口随动,echart的窗口resize,是需要我们自己写的,这个肯定封装(注意要做防抖处理);
- 每次设置画布的元素的时候都需要传入宽高,这也需要,省事嘛;
- 鬼知道会不会有事件,所以事件也是肯定要的;
- 没有数据的时候画布不能空着,加一个暂无数据的展示;
- 我在代码中添加一个名为options的对象这里可以补充我没有封装的功能,比如需要图例可以自己定义,传进去也是一样的;
- 有增加自然就有删除,删除的属性为deleteOption, 和5一样都需要判断是否属性是否存在,存在则执行,不存在则忽略;
先看看完整体,有兴趣您就继续,没兴趣那就再见来不及握手:
看着还是可以的吧!别问我为什么没有图例,公司多数都是缩略图,图例基本用不上,为了一个不用的多封装一个功能没什么意思!
再看下声明的propTypes和 defaultProp 尽可能少的使用isRequired (个人意见,免得后续使用者,漏传就会报错)
是不是有点多? 还好吧,毕竟这么灵活!
作用看下注释就ok了!别说你看不懂啊!s,记住这两个 一定有,因为你不知道后面的使用者或不会传错,注释最好也留下,免得被挖坟!
再往下看,在componentDidMount周期中接受props的属性,组装自己的option:
注意:init的时候记住一定要接受key,保证页面的id唯一的,如果两个画板的id重复了,会导致其他处理第一个画板以后其他的画板都是白色的,echarts不会覆盖,所以加入你的画板没有东西,那就看下是不是画板元素存在子元素,或者已经画了图形,其次在init之后我们要clear清理画板 并且取消所有绑定函数(.off),不然下次刷新图形的时候,事件会在挂载
最后在挂一下代码吧,毕竟自己刚开始写博客,技术属实是不怎么样,虽然看的不多,万一要是有人看呢哈哈!!
import React, {PureComponent} from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/graphic';
import PropTypes from 'prop-types';
/*
* 饼图组件可支持环形切换,
* 包含无数据展示,onresize重绘事件
* 可以自定义option, 支持多种鼠标事件
* 暂时未封装图例,图例等其他功能可通过 options自己定义添加
* deleteOption: ['title', 'toolbox', 'tooltip', 'graphic'] 包含echarts含有的属性
*
* */
/*
* chartsData 数据格式
* const chartsData = [
* {value: 335, name: '直接访问'},
* {value: 310, name: '邮件营销'},
* {value: 234, name: '联盟广告'},
* ]
* */
const _eventType = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'];
class PieChart extends PureComponent {
constructor(props) {
super(props);
this.state = {}
}
static propTypes = {
chartsData: PropTypes.array.isRequired, // 图形数据
idPrefix: PropTypes.oneOfType([
PropTypes.string.isRequired, // 唯一标识区分多个饼图,
PropTypes.number.isRequired, // 唯一标识区分多个饼图,
]),
getCharts: PropTypes.func, // 把echarts 对象传出去
onResize: PropTypes.func, // 全局onResize事件,
eChartsEvent: PropTypes.func, // 图形点击事件, 返回这各图形的数据以及对应的param,echarts 对象
title: PropTypes.string, // 标题栏,名字
bgColor: PropTypes.string, // 背景色
chartColor: PropTypes.array, // 扇形区域颜色
radius: PropTypes.array, // 半径内圈半径不可以调小不然暂无数据的时候字放不下
center: PropTypes.array, // 位置调节
label: PropTypes.bool, // 是否展示label
maxShow: PropTypes.number, // 需 >= 0 最多展示几个扇形,不传则默认不处理,建议不要大于5
options: PropTypes.object, // 修改 更新的想要的配置,直接那eCharts的就可以
deleteOption: PropTypes.array, // 删除不需要的配置
eventType: PropTypes.oneOf(_eventType), // 事件类型
};
static defaultProps = {
title: '',
bgColor: "#fff",
chartColor: ['#1890ff', '#13c2c2', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#eb2f96', '#faad14'],
radius: ['0', '65%'],
center: ['50%', '55%'],
label: false,
eventType: 'click',
};
componentDidMount() {
const {
chartsData, idPrefix, getCharts, onResize, title, bgColor,
chartColor, radius, center, label, maxShow, deleteOption, options,
eChartsEvent, eventType
} = this.props;
let newChartsData = [];
if (maxShow && maxShow >= 0 && chartsData.length > maxShow) {
chartsData.sort((a, b) => {
return b.value - a.value;
});
newChartsData = chartsData.slice(0, maxShow);
let total = 0;
chartsData.map((item, index) => {
if (index > 4) {
total += item.value
}
});
newChartsData = [...newChartsData, {value: total, name: '其他'}];
}
else {
newChartsData = [...chartsData]
}
let myCharts = echarts.init(document.getElementById(`${idPrefix}_pie`));
if (getCharts && typeof func === 'function') {
getCharts(myCharts);
}
myCharts.clear();
_eventType.map(item => {
myCharts.off(item);
});
let option = {
color: newChartsData.length ? chartColor : '#bfbfbf',
title: {
text: title,
top: 20,
x: 'center'
},
toolbox: {
feature: {
saveAsImage: {
type: 'png',
title: '点击下载',
}
},
top: 13,
right: 13
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: title,
type: 'pie',
radius,
center,
avoidLabelOverlap: false,
label: {
show: label,
},
labelLine: {
normal: {
show: label
}
},
itemStyle: {
borderWidth: 2, //设置border的宽度有多大
borderColor: bgColor,
},
hoverAnimation: false,
hoverOffset: 0,
data: newChartsData.length ? newChartsData : [{value: 0, name: '暂无数据'}],
},
],
graphic: newChartsData.length
? null
: [{
type: 'text',
left: 'center',
top: radius[0] === '0' ? 'auto' : center[1],
bottom: 10,
cursor: 'auto',
style: {
text: '暂无数据',
textAlign: 'center',
fill: '#bfbfbf',
fontSize: 16,
stroke: '#bfbfbf',
lineWidth: 0
}
}]
};
if (deleteOption) {
deleteOption.map(item => {
delete option[item]
});
} // 删除函数
if (options) {
option = {...option, ...options}
} // 补充的options
myCharts.setOption(option);
if (eChartsEvent && typeof eChartsEvent === 'function') {
myCharts.on(eventType, 'series', params => {
eChartsEvent(params, chartsData, myCharts);
});
}
window.onresize = () => {
let target = this;
if (target.resizeFlag) {
clearTimeout(target.resizeFlag);
}
target.resizeFlag = setTimeout(function () {
myCharts.resize();
if (onResize && typeof onResize === 'function') {
onResize();
}
target.resizeFlag = null;
}, 100);
}
}
render() {
const {idPrefix} = this.props;
return (
<div
id={`${idPrefix}_pie`}
style={{width: '100%', height: '100%'}}/>
)
}
}
export default PieChart;
有兴趣的朋友可以关注下option中的graphic属性,和D3比较类似,有时间分享一下用这属性做的图形!!! 后期自己又优化了一下,代码部分可能有所变动
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。