import React, { useEffect, useState } from "react";
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import "./index.css"
import { urls } from "../../utils/utils";
import { Spin, message } from "antd";
//渲染图形
const myChart = (xData, yData) => {
const myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
baseOption: {
tooltip: {
trigger: "axis",
// 自定义tooltip
formatter: function (params) {
var res = '<p>X轴类目:' + params[0].name + '</p>'
for (var i = 0; i < params.length; i++) {
res += '<p> Y轴数据:' + params[i].data + '</p>'
}
return res;
},
},
color: "#00A0E8",//柱状图的颜色
grid: {
left: '2%',
//距离左边的距离
right: '1%', //距离右边的距离
bottom: '10%', //距离下边的距离
top: '8%', //距离上边的距离
},
xAxis: {
type: 'category',
data: xData,
"axisLine": { //X轴
"show": true,
lineStyle: {
color: "rgba(0,0,0,0.25)",
}
},
"axisTick": { //轴刻度线
"show": false
},
"splitLine": { //网格线
"show": false
},
axisLabel: {
interval: 4,
formatter: function (e) {
return e
},
textStyle: {
color: "rgba(0,0,0,0.25)", //更改坐标轴文字颜色
fontSize: 16 //更改坐标轴文字大小
},
}
},
yAxis: {
title: "wge",
type: 'value',
axisLabel: {
//隐藏Y轴数据
// formatter: function () {
// return "";
// }
textStyle: {
color: "rgba(0,0,0,0.25)", //更改坐标轴文字颜色
fontSize: 16 //更改坐标轴文字大小
}
},
dispaly: "none",
"axisLine": { //y轴
"show": true,
lineStyle: {
color: "rgba(0,0,0,0.25)",
}
},
"axisTick": { //y轴刻度线
"show": false
},
"splitLine": { //网格线
"show": false
},
"show": true,
},
series: [{
data: yData,
type: 'bar',
smooth: true,
symbol: "none",
barWidth: 20
}]
},
media: [{
query: { maxWidth: 959 },
option: {
grid: {
left: '6%',
//距离左边的距离
right: '1%', //距离右边的距离
bottom: '10%', //距离下边的距离
top: '8%', //距离上边的距离
},
xAxis: {
axisLabel: {
interval: 8,
textStyle: {
color: "rgba(0,0,0,0.25)", //更改坐标轴文字颜色
fontSize: 10 //更改坐标轴文字大小
}
}
},
yAxis: {
axisLabel: {
textStyle: {
color: "rgba(0,0,0,0.25)", //更改坐标轴文字颜色
fontSize: 10 //更改坐标轴文字大小
}
}
},
series: [{
symbol: "none",
}]
}
}, {
query: { maxWidth: 400, },
option: {
grid: {
left: '10%',
//距离左边的距离
right: '1%', //距离右边的距离
bottom: '10%', //距离下边的距离
top: '8%', //距离上边的距离
},
}
}]
});
myChart.on("click", function (e) {
console.log(e)
console.log(e.name)
})
};
function ApiTime() {
const [spinning, setspinning] = useState(true)
useEffect(() => {
getData();
const timer = setInterval(() => {
getData();
}, 10000);
return () => { clearInterval(timer) }
}, []);
//监听页面变化重置
window.addEventListener("resize", (e) => {
// window.location.reload();
})
const getData = () => {
fetch(urls)
.then(res => res.json())
.then(res => {
const xData = [];
const yData = [];
if (res.Desc === "SUCCESS") {
setspinning(false)
res.Result.map((item) => {
xData.push(item);
yData.push(item);
})
myChart(xData, yData)
} else {
message.error(res.Desc)
}
}).catch(err => {
console.log(err)
})
}
return <Spin spinning={spinning}><div id="main"></div></Spin>
}
export default ApiTime