最近的工作真是一言难尽,准备了很久云策略又发现大环境此路不通,蛮打击的,话说多了,晚上回去一句话也不想说。。
好了,废话少说,代码写起来,认证考起来,改变不了别的就改变自己吧
思路是这样的,封装组件,使用者只关心数据和点击操作的后续处理
echart版本 "echarts": "^5.3.2"
import React, {
ReactElement,
useEffect,
useRef,
useState,
} from "react";
var echarts = require("echarts/lib/echarts"); //必须
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/chart/pie');
interface PieData {
pieData: any;
operate?: Function;
}
export default function PieReact({ pieData, operate }: PieData): ReactElement {
const [data, setData] = useState<any>(pieData);
const pie = useRef<HTMLDivElement | null>(null);
function initPie() {
let myChart = echarts.init(pie.current);
let options = setPieOption(data);
myChart.setOption(options);
myChart.on('click', function (params:any) {
if(operate){
operate(params);
}
});
}
function setPieOption(data: any) {
return {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
}
useEffect(() => {
setData(pieData);
initPie();
}, [pieData]);
return (
<>
<div className="pie-react">
<div
ref={pie}
style={{ width: "500px", height: "400px" }}
id="pie"
></div>
</div>
</>
);
}
调用的话
const App: React.FC = () => {
const pieData = [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
];
function Emphasize(data:any){
console.log(data);
}
return (
<div className="viewer-container">
<PieReact pieData={pieData} operate={Emphasize}/>
</div>
);
};