import * as React from 'react'
import ReactEcharts from 'echarts-for-react'
export interface IProps {
}
interface IState {
flag: boolean
}
class SummaryStatistics extends React.Component<IProps, IState> {
echartsReact: any = undefined
constructor(props: IProps) {
super(props)
this.state = {
flag: true
}
this.echartsReact = React.createRef()
}
getOption () {
return {
color: ['#0095ff', '#33e0e0', '#4bc772', '#fcd132', '#ff607a'],
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'horizontal',
bottom: 0,
itemWidth: 15,
itemHeight: 10
},
grid: {
left: '3%',
right: '4%',
bottom: '0',
top: '3%',
containLabel: true
},
// 圆中心的数字
graphic: {
elements: [
{
type: 'text',
left: 'center',
top: '46%',
z: 2,
zlevel: 100,
style: {
text: '120',
fill: '#1890ff',
width: 100,
height: 30,
font: 'bolder 28px Microsoft YaHei'
}
}
]
},
// 圆中心的数字
// title: {
// text: '总考生数',
// left: 'center',
// top: '45%',
// textStyle: {
// color: '#031f2d',
// fontSize: 20,
// align: 'center'
// }
// },
series: [
{
name: '',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
legendHoverLink: false,
data: [
{ value: 32, name: '水库' },
{ value: 42, name: '河道断面' },
{ value: 32, name: '水文测站' },
{ value: 32, name: '灌区' },
{ value: 32, name: '水土保持工程' }
],
itemStyle: {
emphasis: {
shadowBlur: 0,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '16',
fontWeight: 'bold'
}
}
},
}
]
}
}
onChartover() {
// 当鼠标移到扇形图上数字清空
this.echartsReact.props.option.graphic.elements[0].style.text = ''
this.echartsReact.getEchartsInstance().setOption(this.echartsReact.props.option)
console.log(this.echartsReact.getEchartsInstance())
}
onChartout () {
// 当鼠标移到扇形图上数字出现
this.echartsReact.props.option.graphic.elements[0].style.text = '120'
this.echartsReact.getEchartsInstance().setOption(this.echartsReact.props.option) // 重新渲染
}
render() {
const onEvents = {
'mouseover': this.onChartover.bind(this),
'mouseout': this.onChartout.bind(this)
}
return (
<React.Fragment>
<ReactEcharts ref={(e) => { this.echartsReact = e }}
option={this.getOption()}
onEvents={onEvents}
style={{width: '100%', height: '253px'}}
/>
</React.Fragment>
)
}
}
export default SummaryStatistics
