155 lines
3.7 KiB
JavaScript
155 lines
3.7 KiB
JavaScript
// 核心库
|
|
import React, { Component } from "react";
|
|
import { connect } from "dva";
|
|
import { withRouter } from "dva/router";
|
|
import echarts from "echarts";
|
|
|
|
class SafeCheck extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: false,
|
|
riskLevelData: [],
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
// console.log(this.props.ListSafeCheckYearMonth, "000000");
|
|
let data = [];
|
|
data = this.props.ListSafeCheckYearMonth;
|
|
let xData = [];
|
|
let data1 = [];
|
|
let data2 = [];
|
|
let data3 = [];
|
|
let seriesName = [];
|
|
|
|
data.map((item) => {
|
|
// var yeM = item.YEAR.toString().substring(2)
|
|
// if (item.MONTH > 9) {
|
|
// xData.push(yeM + '' + item.MONTH);
|
|
// } else {
|
|
// xData.push(yeM + '0' + item.MONTH);
|
|
// }
|
|
|
|
// var yeM = item.YEAR.toString().substring(2)
|
|
// if (item.MONTH > 9) {
|
|
// xData.push(item.MONTH + '月');
|
|
// } else {
|
|
// xData.push(item.MONTH + '月');
|
|
// }
|
|
|
|
xData.push(item.YEAR + '年' + item.MONTH + '月');
|
|
seriesName = item.listSOURCENAME;
|
|
data1.push(item.listListCount);
|
|
});
|
|
for (var i = 0; i < data[0].listListCount.length; i++) {
|
|
for (var j = 0; j < data.length; j++) {
|
|
data2.push(data1[j][i]);
|
|
}
|
|
}
|
|
for (var i = 0; i < data2.length; i += data.length) {
|
|
data3.push(data2.slice(i, i + data.length));
|
|
}
|
|
let series = [];
|
|
for (let i = 0; i < data3.length; i++) {
|
|
series.push({
|
|
name: seriesName[i],
|
|
type: "bar",
|
|
stack: "总量",
|
|
data: data3[i],
|
|
barWidth: "40%",
|
|
});
|
|
}
|
|
//图标2
|
|
let dangerTotals = document.getElementById("safecheck");
|
|
if (dangerTotals) {
|
|
let myChart = echarts.init(dangerTotals);
|
|
myChart.setOption({
|
|
color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
|
|
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
transitionDuration: 0,
|
|
},
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
bottom: "15%",
|
|
top: "5%",
|
|
containLabel: true,
|
|
z: 22,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: xData,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0c3b71",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: "rgb(170,170,170)",
|
|
interval: 0,
|
|
textStyle: {
|
|
lineHeight: 14,
|
|
},
|
|
formatter: function (param) {
|
|
return param.split('年')[1]
|
|
}
|
|
},
|
|
},
|
|
legend: {
|
|
data: seriesName,
|
|
left: "center",
|
|
align: "left",
|
|
bottom: "2%",
|
|
textStyle: {
|
|
color: "#000",
|
|
},
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
// itemGap: 15,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: ["#f2f2f2"],
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0c3b71",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "rgb(170,170,170)",
|
|
formatter: "{value} ",
|
|
},
|
|
},
|
|
series: series,
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<React.Fragment>
|
|
<div
|
|
id="safecheck"
|
|
style={{ width: "100%", height: "75%" }}
|
|
></div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(connect(({ login }) => ({ login }))(SafeCheck));
|