78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import PoverPage from "@/pages/poverPage";
|
|
import { Modal } from "antd";
|
|
import * as echarts from "echarts";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const Pover = () => {
|
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
|
const initChart = () => {
|
|
var myChart = echarts.init(document.getElementById("pover"));
|
|
var option = {
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["基干民兵", "普通民兵", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
},
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
bottom: "45%",
|
|
right: "5%",
|
|
left: "12%",
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: false, // 去除网格线
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
type: "bar",
|
|
barWidth: 10, // 设置柱子粗细
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
};
|
|
useEffect(() => {
|
|
initChart();
|
|
}, []);
|
|
const openPoverHander = () => {
|
|
setIsModalOpen(true);
|
|
};
|
|
return (
|
|
<>
|
|
<div
|
|
onClick={openPoverHander}
|
|
style={{ width: "100%", height: "100%" }}
|
|
id="pover"
|
|
></div>
|
|
<Modal
|
|
title="力量汇总"
|
|
className="owner_model"
|
|
width={"80%"}
|
|
open={isModalOpen}
|
|
afterClose={() => {}}
|
|
onOk={() => {}}
|
|
footer={null}
|
|
onCancel={() => {
|
|
setIsModalOpen(false);
|
|
}}
|
|
>
|
|
<PoverPage />
|
|
{/* <p>cascsa</p> */}
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Pover;
|