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