import React, { Component } from "react";
import * as echarts from 'echarts';
class Chart1 extends Component {
constructor(props) {
super(props);
this.state = {
}
}
chart = null;
chartRef = React.createRef();
// 监听容器宽度事件
resizeObserver = null;
componentDidMount() {
this.chart = echarts.init(this.chartRef.current);
// this.refreash();
// 监听容器变化
this.resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
this.resize();
}
});
this.resizeObserver.observe(this.chartRef.current);
}
componentWillUnmount() {
this.resizeObserver.unobserve(this.chartRef.current);
}
resize = () => {
this.chart?.resize();
};
refreash = () => {
this.getChart()
}
getChart() {
let { opennessData } = this.props;
let all = 0;
for (var prop in opennessData) {
if(prop == "智慧中台" || prop == "总部网管" || prop == "省级网管"){
all = all + Number(opennessData[prop]);
}
}
console.log(all,9999999999999);
let option = {
tooltip: {
trigger: 'item'
},
legend: {
left: 'left',
top: '0%',
itemWidth: 15,
itemHeight: 15,
icon: "circle",
},
color: ['#327CFF', '#40BFB2', '#FFAF1C'],
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 个}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
top: '15%',
data: [
{ value: 0, name: '1' },
{ value: 0, name: '2' },
{ value: 0, name: '3' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
tooltip: {
formatter: function (value) {
console.log(value);
return value.data.name + '：' + ((Number(value.data.value) / all)*100).toFixed(2) + '%'
}
// formatter: '{b}：{c} 个',
},
}
]
};
this.chart?.clear();
this.chart?.setOption(option, true);
this.chart?.resize();
}
render() {
return (
<div className="chartBox">
<div className="title">
能力发布
</div>
<div className="chart_item">
<div id="chart_item" ref={this.chartRef} style={{ width: '95%', height: '95%' }}></div>
</div>
</div>
)
}
}
export default Chart1
