react 中 echarts-for-react 数值改变重新渲染
<div class="cnblogs_code"><pre><span style="color: rgba(0, 0, 0, 1)">import * as React from 'react'
import ReactEcharts from 'echarts-for-react'
export interface IProps {
}
interface IState {
flag: boolean
}
class SummaryStatistics extends React.Component</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">IProps</span><span style="color: rgba(255, 0, 0, 1)">, IState</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"> {
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.style.text = ''
this.echartsReact.getEchartsInstance().setOption(this.echartsReact.props.option)
console.log(this.echartsReact.getEchartsInstance())
}
onChartout () {
// 当鼠标移到扇形图上数字出现
this.echartsReact.props.option.graphic.elements.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 (
</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">React</span><span style="color: rgba(255, 0, 0, 1)">.Fragment</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">ReactEcharts </span><span style="color: rgba(255, 0, 0, 1)">ref</span><span style="color: rgba(0, 0, 255, 1)">={(e) =</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"> { this.echartsReact = e }}
option={this.getOption()}
onEvents={onEvents}
style={{width: '100%', height: '253px'}}
/>
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">React.Fragment</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
)
}
}
export default SummaryStatistics</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/whlBooK/p/11243738.html
頁:
[1]