react 保持数据_react 中 echarts-for-react 数值改变重新渲染

谭坚诚
2023-12-01

import * as React from 'react'

import ReactEcharts from 'echarts-for-react'

export interface IProps {

}

interface IState {

flag: boolean

}

class SummaryStatistics extends React.Component{

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 (

{ this.echartsReact = e }}

option={this.getOption()}

onEvents={onEvents}

style={{width: '100%', height: '253px'}}

/>)

}

}

export default SummaryStatistics

 类似资料: