一。组件
import React, {Component} from 'react'
import echarts from 'echarts'
class Chart extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
// this.loadChart()
setTimeout(() => {
this.loadChart()
})
}
loadChart() {
const {chartData} = this.props;
// console.log(this.chart)
this.chartObj = echarts.init(this.chart);
this.chartObj.clear();
const option = {
tooltip: {
trigger: 'item',
// formatter: '{a} <br/>{b}: {c} ({d}%)',
formatter: '{a} <br/>{b} ({d}%)',
},
legend: {
orient: 'vertical',
bottom: 60,
right: 30,
data: [{
name: '可激活:' + chartData.activableCount,
textStyle: {
color: '#71B6F9' // 图例文字颜色
}
}, {
name: '已激活:' + chartData.activedCount,
textStyle: {
color: '#FCB247' // 图例文字颜色
}
}, {
name: '已停用:' + chartData.haltCount,
textStyle: {
color: '#7F8DFF' // 图例文字颜色
}
}]
},
series: [
{
name: chartData.partner,
type: 'pie',
radius: ['30%', '40%'],
center: ['50%', '50%'],
avoidLabelOverlap: true,
label: {
normal: {
show: true,
position: 'outside',
formatter: '{b}:{d}%'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold',
},
},
},
labelLine: {
normal: {
show: true,
},
},
data: [
{
value: chartData.activableCount,
name: '可激活:' + chartData.activableCount,
itemStyle: {color: '#71B6F9'}
},
{
value: chartData.activedCount,
name: '已激活:' + chartData.activedCount,
itemStyle: {color: '#FCB247'}
},
{
value: chartData.haltCount,
name: '已停用:' + chartData.haltCount,
itemStyle: {color: '#7F8DFF'}
},
],
},
],
};
this.chartObj.setOption(option);
window.onresize = function () {
location.reload()
}
}
render() {
return (
<div style={{height: '300px'}} className="chart" ref={c => this.chart = c}/>
)
}
}
export default Chart
二。引用
传入的值是个对象
<Chart chartData={item.agent}/>