1391 lines
41 KiB
JavaScript
1391 lines
41 KiB
JavaScript
|
let timeOut = null, timeOut2 = null, timeOut3 = null, timeOut4;
|
|||
|
|
let myChart3 = echarts.init(document.getElementById('echarts-one'));
|
|||
|
|
let myChart4 = echarts.init(document.getElementById('echarts-two'));
|
|||
|
|
let myChart7 = echarts.init(document.getElementById('echarts-five'));
|
|||
|
|
let myChart8 = echarts.init(document.getElementById('echarts-six'));
|
|||
|
|
let myChart9 = echarts.init(document.getElementById('plan-echarts'));
|
|||
|
|
let myChart10 = echarts.init(document.getElementById('ticket-history-echarts'));
|
|||
|
|
|
|||
|
|
/*日计划echarts*/
|
|||
|
|
function initEchartsOne(listMap) {
|
|||
|
|
let nameList = [];
|
|||
|
|
let dataList = [];
|
|||
|
|
let dataList2 = [];
|
|||
|
|
if (listMap != null && listMap.length > 0) {
|
|||
|
|
$.each(listMap, function (index, item) {
|
|||
|
|
nameList.push(item.cityName)
|
|||
|
|
dataList.push(item.totalNum)
|
|||
|
|
dataList2.push(item.executedNum)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 基于准备好的dom，初始化echarts图表
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
option = {
|
|||
|
|
backgroundColor: "transparent",
|
|||
|
|
color: ["#1E3AFF", "#13D850"],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '5%',
|
|||
|
|
top: '8%',
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: 'inside',
|
|||
|
|
zoomOnMouseWheel: false,
|
|||
|
|
moveOnMouseMove: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 5,
|
|||
|
|
}],
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
data: ["计划数", "已执行"],
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#101C4A",
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: nameList,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
min: 0,
|
|||
|
|
minInterval: 1,
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
color: fontColor,
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#063374",
|
|||
|
|
type: 'dashed', // dotted 虚线
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitArea: { show: false },
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
color: fontColor,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
// symbol: "none",
|
|||
|
|
// showSymbol: false,
|
|||
|
|
symbolSize: 8,
|
|||
|
|
smooth: true, // 是否曲线
|
|||
|
|
name: "计划数", // 图例对应类别
|
|||
|
|
data: dataList, // 纵坐标数据
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 4, //线条设置
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0, //右
|
|||
|
|
y: 0, //下
|
|||
|
|
x2: 0, //左
|
|||
|
|
y2: 1, //上
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#1E3AFF30' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#1E3AFF10' // 100% 处的颜色
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
name: "已执行",
|
|||
|
|
data: dataList2,
|
|||
|
|
symbolSize: 8,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 4, //线条设置
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0, //右
|
|||
|
|
y: 0, //下
|
|||
|
|
x2: 0, //左
|
|||
|
|
y2: 1, //上
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#13D85030' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#13D85010' // 100% 处的颜色
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart3.setOption(option, true);
|
|||
|
|
myChart3.on('mousemove', stop);
|
|||
|
|
myChart3.on('globalout', goMove);
|
|||
|
|
autoMove();
|
|||
|
|
|
|||
|
|
// 自动滚动
|
|||
|
|
function autoMove() {
|
|||
|
|
if (nameList != null && nameList.length > 0) {
|
|||
|
|
clearInterval(timeOut);
|
|||
|
|
//自动滚动
|
|||
|
|
timeOut = setInterval(() => {
|
|||
|
|
if (option.dataZoom[0].endValue === nameList.length || option.dataZoom[0].endValue > nameList.length) {
|
|||
|
|
option.dataZoom[0].endValue = 5;
|
|||
|
|
option.dataZoom[0].startValue = 0;
|
|||
|
|
} else {
|
|||
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
|
|||
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
|
|||
|
|
}
|
|||
|
|
myChart3.setOption(option);
|
|||
|
|
}, 4000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//停止滚动
|
|||
|
|
function stop() {
|
|||
|
|
clearInterval(timeOut);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//继续滚动
|
|||
|
|
function goMove() {
|
|||
|
|
autoMove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// echarts移入事件
|
|||
|
|
myChart3.getZr().on('mousemove', param => {
|
|||
|
|
let pointInPixel = [param.offsetX, param.offsetY];
|
|||
|
|
if (myChart3.containPixel('grid', pointInPixel)) {
|
|||
|
|
myChart3.getZr().setCursorStyle('pointer');
|
|||
|
|
} else {
|
|||
|
|
myChart3.getZr().setCursorStyle('default');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart3.off('click').on('click', function (params) {
|
|||
|
|
let buildName = params.name
|
|||
|
|
let seriesName = params.seriesName
|
|||
|
|
openDayRisk(buildName, seriesName, dayType);
|
|||
|
|
});
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart3.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*周风险echarts*/
|
|||
|
|
function initEchartsTwo(nameList, twoRiskData, threeRiskData) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
// 基于准备好的dom，初始化echarts图表
|
|||
|
|
let xAxisList = nameList;
|
|||
|
|
let data = twoRiskData;
|
|||
|
|
let data2 = threeRiskData;
|
|||
|
|
option = {
|
|||
|
|
backgroundColor: "transparent",
|
|||
|
|
color: ["#dd690b", "#ffe91f"],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '5%',
|
|||
|
|
top: '8%',
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: 'inside',
|
|||
|
|
zoomOnMouseWheel: false,
|
|||
|
|
moveOnMouseMove: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 5,
|
|||
|
|
}],
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
data: ["二级", "三级"],
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#101C4A",
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: xAxisList,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
min: 0,
|
|||
|
|
// minInterval: 1,
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
color: fontColor,
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#063374",
|
|||
|
|
type: 'dashed', // dotted 虚线
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitArea: { show: false },
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
color: fontColor,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
// symbol: "none",
|
|||
|
|
// showSymbol: false,
|
|||
|
|
symbolSize: 8,
|
|||
|
|
smooth: true, // 是否曲线
|
|||
|
|
name: "二级", // 图例对应类别
|
|||
|
|
data: data2, // 纵坐标数据
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 4, //线条设置
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0, //右
|
|||
|
|
y: 0, //下
|
|||
|
|
x2: 0, //左
|
|||
|
|
y2: 1, //上
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#dd690b30' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#dd690b10' // 100% 处的颜色
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
name: "三级",
|
|||
|
|
data: data,
|
|||
|
|
symbolSize: 8,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 4, //线条设置
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0, //右
|
|||
|
|
y: 0, //下
|
|||
|
|
x2: 0, //左
|
|||
|
|
y2: 1, //上
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#ffe91f30' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#ffe91f10' // 100% 处的颜色
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart4.setOption(option, true);
|
|||
|
|
myChart4.on('mousemove', stop);
|
|||
|
|
myChart4.on('globalout', goMove);
|
|||
|
|
autoMove();
|
|||
|
|
|
|||
|
|
// 自动滚动
|
|||
|
|
function autoMove() {
|
|||
|
|
if (xAxisList != null && xAxisList.length > 0) {
|
|||
|
|
clearInterval(timeOut4);
|
|||
|
|
//自动滚动
|
|||
|
|
timeOut4 = setInterval(() => {
|
|||
|
|
if (option.dataZoom[0].endValue === xAxisList.length || option.dataZoom[0].endValue > xAxisList.length) {
|
|||
|
|
option.dataZoom[0].endValue = 5;
|
|||
|
|
option.dataZoom[0].startValue = 0;
|
|||
|
|
} else {
|
|||
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
|
|||
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
|
|||
|
|
}
|
|||
|
|
myChart4.setOption(option, true);
|
|||
|
|
}, 4000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//停止滚动
|
|||
|
|
function stop() {
|
|||
|
|
clearInterval(timeOut4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//继续滚动
|
|||
|
|
function goMove() {
|
|||
|
|
autoMove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// echarts移入事件
|
|||
|
|
myChart4.getZr().on('mousemove', param => {
|
|||
|
|
let pointInPixel = [param.offsetX, param.offsetY];
|
|||
|
|
if (myChart4.containPixel('grid', pointInPixel)) {
|
|||
|
|
myChart4.getZr().setCursorStyle('pointer');
|
|||
|
|
} else {
|
|||
|
|
myChart4.getZr().setCursorStyle('default');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart4.off('click').on('click', function (params) {
|
|||
|
|
let name = params.name
|
|||
|
|
let seriesName = params.seriesName
|
|||
|
|
let weekRiskDate = $('#weekRiskDate').val();
|
|||
|
|
openWeekRisk(weekRiskDate, seriesName, name);
|
|||
|
|
});
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart4.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*站班会柱状图*/
|
|||
|
|
function initEchartsFive(nameList, dataList) {
|
|||
|
|
clearInterval(timeOut3);
|
|||
|
|
let xAxisList = [];
|
|||
|
|
let data = [];
|
|||
|
|
xAxisList = nameList;
|
|||
|
|
data = dataList;
|
|||
|
|
let fontSize = '16';
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
top: '10%',
|
|||
|
|
containLabel: true,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
calculable: true,
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
icon: 'rect',
|
|||
|
|
// orient: 'horizontal',
|
|||
|
|
itemWidth: 15,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 16, //字体大小
|
|||
|
|
color: '#fff', //字体颜色
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
right: '3%', //距离右侧
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: 'inside',
|
|||
|
|
zoomOnMouseWheel: false,
|
|||
|
|
moveOnMouseMove: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 6,
|
|||
|
|
},],
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0, // 解决x轴名称过长问题
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: { //y轴网格线设置
|
|||
|
|
color: '#2c2c2c',
|
|||
|
|
width: 1,
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: xAxisList,
|
|||
|
|
triggerEvent: true
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
// name: "单位/个",
|
|||
|
|
nameGap: 8,
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#8fd5f3",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: { //y轴网格线设置
|
|||
|
|
color: '#063374',
|
|||
|
|
width: 1,
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: { //保留网格线
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: { //y轴网格线设置
|
|||
|
|
color: '#063374',
|
|||
|
|
width: 1,
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: '#fff', //字体颜色
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
// name: nameList.length > 4 ? '地市' : '风险等级',
|
|||
|
|
type: 'bar',
|
|||
|
|
z: 1,
|
|||
|
|
barWidth: 8,
|
|||
|
|
barGap: '100%',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0, 1, 0, 0,
|
|||
|
|
[{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#1158E2'
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// offset: 0.7,
|
|||
|
|
// color: barData.color[1]
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#74CAFF'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
data: data,
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
myChart7.setOption(option, true);
|
|||
|
|
if (xAxisList.length > 4) {
|
|||
|
|
autoMove();
|
|||
|
|
myChart7.on('mousemove', stop);
|
|||
|
|
myChart7.on('globalout', goMove);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自动滚动
|
|||
|
|
function autoMove() {
|
|||
|
|
if (xAxisList != null && xAxisList.length > 0) {
|
|||
|
|
clearInterval(timeOut3);
|
|||
|
|
//自动滚动
|
|||
|
|
timeOut3 = setInterval(() => {
|
|||
|
|
if (option.dataZoom[0].endValue === xAxisList.length) {
|
|||
|
|
option.dataZoom[0].endValue = 6;
|
|||
|
|
option.dataZoom[0].startValue = 0;
|
|||
|
|
} else {
|
|||
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
|
|||
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
|
|||
|
|
}
|
|||
|
|
myChart7.setOption(option, true);
|
|||
|
|
}, 4000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//停止滚动
|
|||
|
|
function stop() {
|
|||
|
|
clearInterval(timeOut3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//继续滚动
|
|||
|
|
function goMove() {
|
|||
|
|
autoMove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// echarts移入事件
|
|||
|
|
myChart7.getZr().on('mousemove', param => {
|
|||
|
|
let pointInPixel = [param.offsetX, param.offsetY];
|
|||
|
|
if (myChart7.containPixel('grid', pointInPixel)) {
|
|||
|
|
myChart7.getZr().setCursorStyle('pointer');
|
|||
|
|
} else {
|
|||
|
|
myChart7.getZr().setCursorStyle('default');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// echarts点击事件
|
|||
|
|
myChart7.getZr().off('click');
|
|||
|
|
myChart7.getZr().on('click', function (params) {
|
|||
|
|
let pointInPixel = [params.offsetX, params.offsetY];
|
|||
|
|
let name;
|
|||
|
|
if (myChart7.containPixel('grid', pointInPixel)) {
|
|||
|
|
let xIndex = myChart7.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
|
|||
|
|
let handleIndex = Number(xIndex)
|
|||
|
|
let op = myChart7.getOption();
|
|||
|
|
name = op.xAxis[0].data[handleIndex];
|
|||
|
|
}
|
|||
|
|
let classDate = $('#classDate').val()
|
|||
|
|
openClass(classType, name, classDate);
|
|||
|
|
});
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart7.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*人员统计echarts图*/
|
|||
|
|
function initEchartsSix(all, obj) {
|
|||
|
|
let fontSize = '16';
|
|||
|
|
let data = [
|
|||
|
|
{ value: obj[0].bzgg, name: '班组骨干' },
|
|||
|
|
{ value: obj[1].ttzy, name: '特种作业' },
|
|||
|
|
{ value: obj[2].ptzy, name: '普通作业' }
|
|||
|
|
];
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
color: ["#20FF51", "#00E0FF", "#e5d11f"],
|
|||
|
|
title: [
|
|||
|
|
{
|
|||
|
|
left: "87%",
|
|||
|
|
top: "22%",
|
|||
|
|
textAlign: "center",
|
|||
|
|
text: "{a|" + all + "}{c|人}",
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
rich: {
|
|||
|
|
a: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: "#fff",
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
c: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: "#fff",
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
left: "54%",
|
|||
|
|
top: "18%",
|
|||
|
|
subtext: "当日站班会人数：",
|
|||
|
|
subtextStyle: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: ["#fff"],
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
right: '10%',
|
|||
|
|
top: 'middle',
|
|||
|
|
type: 'scroll',
|
|||
|
|
orient: 'vertical',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
},
|
|||
|
|
itemWidth: 15,
|
|||
|
|
formatter: function (name) {
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name === name) {
|
|||
|
|
return name + '：' + data[i].value + '人';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '人员统计',
|
|||
|
|
type: 'pie',
|
|||
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|||
|
|
minAngle: 20, //最小的扇区角度（0 ~ 360）
|
|||
|
|
center: ['28%', '50%'], //饼图的中心（圆心）坐标
|
|||
|
|
radius: [54, 96], //饼图的半径
|
|||
|
|
avoidLabelOverlap: true, ////是否启用防止标签重叠
|
|||
|
|
itemStyle: { //图形样式
|
|||
|
|
normal: {
|
|||
|
|
borderColor: '#1e2239',
|
|||
|
|
borderWidth: 1.5,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
label: { //标签的位置
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'inside', //标签的位置
|
|||
|
|
formatter: "{d}%",
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: 'bold'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}, {
|
|||
|
|
name: '',
|
|||
|
|
type: 'pie',
|
|||
|
|
clockwise: false,
|
|||
|
|
silent: true,
|
|||
|
|
minAngle: 20, //最小的扇区角度（0 ~ 360）
|
|||
|
|
center: ['28%', '50%'], //饼图的中心（圆心）坐标
|
|||
|
|
radius: [0, 49], //饼图的半径
|
|||
|
|
itemStyle: { //图形样式
|
|||
|
|
normal: {
|
|||
|
|
borderColor: '#1e2239',
|
|||
|
|
borderWidth: 1.5,
|
|||
|
|
opacity: 0.21,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: { //标签的位置
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart8.setOption(option, true);
|
|||
|
|
myChart8.off('click').on('click', function (params) {
|
|||
|
|
let personnelType = params.name;
|
|||
|
|
console.log(personnelType)
|
|||
|
|
openPersonnelStatistics(personnelType);
|
|||
|
|
});
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart8.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 周风险-历史记录 echarts */
|
|||
|
|
function initEchartsNine(nameList, valueList, valueList2) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
let rawData = []
|
|||
|
|
const color = ['#FF5D6D', '#F9770F', '#FFE922', '#32F474', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
|
|||
|
|
$.each(nameList,function(index,item){
|
|||
|
|
let childData = [];
|
|||
|
|
childData.push(item);
|
|||
|
|
childData.push(valueList[index]);
|
|||
|
|
childData.push(valueList2[index]);
|
|||
|
|
rawData.push(childData);
|
|||
|
|
})
|
|||
|
|
rawData =rawData.reverse();
|
|||
|
|
function calculateMA(type, data) {
|
|||
|
|
let result = [];
|
|||
|
|
for (var i = 0, len = data.length; i < len; i++) {
|
|||
|
|
if (type == 1) {
|
|||
|
|
result.push(data[i][0]);
|
|||
|
|
} else if (type == 2) {
|
|||
|
|
result.push(data[i][1]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let dates = rawData.map(function (item) {
|
|||
|
|
return item[0];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let data = rawData.map(function (item) {
|
|||
|
|
return [+item[1], +item[2]];
|
|||
|
|
});
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
color:color,
|
|||
|
|
legend: {
|
|||
|
|
data: ['二级', '三级'],
|
|||
|
|
inactiveColor: '#777',
|
|||
|
|
right: 5,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize:fontSize
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '1%',
|
|||
|
|
top: '20%',
|
|||
|
|
bottom: '2%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
animation: false,
|
|||
|
|
type: 'cross',
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#376df4',
|
|||
|
|
width: 2,
|
|||
|
|
opacity: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
show: false,
|
|||
|
|
type: 'category',
|
|||
|
|
data: dates,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#8392A5'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#063374',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
animation: false,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '二级',
|
|||
|
|
type: 'line',
|
|||
|
|
data: calculateMA(1, data),
|
|||
|
|
smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '三级',
|
|||
|
|
type: 'line',
|
|||
|
|
data: calculateMA(2, data),
|
|||
|
|
smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
myChart9.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart9.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 日风险-历史记录 echarts */
|
|||
|
|
function initEchartsTen(nameList, valueList, valueList2) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
let rawData = []
|
|||
|
|
const color = ['#3DD1F9', '#32F474', '#FFAD05']; //2个以上的series就需要用到color数组
|
|||
|
|
$.each(nameList,function(index,item){
|
|||
|
|
let childData = [];
|
|||
|
|
childData.push(item);
|
|||
|
|
childData.push(valueList[index]);
|
|||
|
|
childData.push(valueList2[index]);
|
|||
|
|
rawData.push(childData);
|
|||
|
|
})
|
|||
|
|
rawData =rawData.reverse();
|
|||
|
|
function calculateMA(type, data) {
|
|||
|
|
let result = [];
|
|||
|
|
for (var i = 0, len = data.length; i < len; i++) {
|
|||
|
|
if (type == 1) {
|
|||
|
|
result.push(data[i][0]);
|
|||
|
|
} else if (type == 2) {
|
|||
|
|
result.push(data[i][1]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let dates = rawData.map(function (item) {
|
|||
|
|
return item[0];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let data = rawData.map(function (item) {
|
|||
|
|
return [+item[1], +item[2]];
|
|||
|
|
});
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
color:color,
|
|||
|
|
legend: {
|
|||
|
|
data: ['计划数', '已执行'],
|
|||
|
|
inactiveColor: '#777',
|
|||
|
|
right: 5,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '1%',
|
|||
|
|
top: '20%',
|
|||
|
|
bottom: '2%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
animation: false,
|
|||
|
|
type: 'cross',
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#376df4',
|
|||
|
|
width: 2,
|
|||
|
|
opacity: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
show: false,
|
|||
|
|
type: 'category',
|
|||
|
|
data: dates,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#8392A5'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#063374',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
animation: false,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '计划数',
|
|||
|
|
type: 'line',
|
|||
|
|
data: calculateMA(1, data),
|
|||
|
|
smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '已执行',
|
|||
|
|
type: 'line',
|
|||
|
|
data: calculateMA(2, data),
|
|||
|
|
smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
/* const backgroundColor = 'transparent';
|
|||
|
|
const color = ['#3DD1F9', '#32F474', '#FFAD05']; //2个以上的series就需要用到color数组
|
|||
|
|
const legend = {
|
|||
|
|
orient: 'horizontal',
|
|||
|
|
icon: 'circle', //图例形状
|
|||
|
|
padding: 0,
|
|||
|
|
top: 2,
|
|||
|
|
right: 5,
|
|||
|
|
itemWidth: 14, //小圆点宽度
|
|||
|
|
itemHeight: 14, // 小圆点高度
|
|||
|
|
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: '#ffffff',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
const tooltip = {
|
|||
|
|
show: true,
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
};
|
|||
|
|
let seriesData = [
|
|||
|
|
{ name: '计划数', data: valueList },
|
|||
|
|
{ name: '已执行', data: valueList2 }
|
|||
|
|
];
|
|||
|
|
const commonConfigFn = (index) => {
|
|||
|
|
return {
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
|
|||
|
|
symbolSize: 8, //小圆点大小
|
|||
|
|
itemStyle: {
|
|||
|
|
//还是小圆点设置
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: [-2, -13],
|
|||
|
|
formatter: '{c}',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: '13px',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2, //线条设置
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
areaStyle: {
|
|||
|
|
//填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
|
|||
|
|
opacity: 0.2,
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: color[index], // 上处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'transparent', // 下处的颜色
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
global: false, // 缺省为 false
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor,
|
|||
|
|
color,
|
|||
|
|
tooltip,
|
|||
|
|
legend,
|
|||
|
|
grid: {
|
|||
|
|
left: '1%',
|
|||
|
|
right: '1%',
|
|||
|
|
top: '20%',
|
|||
|
|
bottom: '2%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: 'inside',
|
|||
|
|
zoomOnMouseWheel: false,
|
|||
|
|
moveOnMouseMove: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 20,
|
|||
|
|
},],
|
|||
|
|
xAxis: {
|
|||
|
|
show: false, //显示x轴+x轴label文字
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: true, //从Y轴出发，这个false很好的
|
|||
|
|
axisLine: {
|
|||
|
|
show: true, //显示x坐标轴轴线
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#101C4A',
|
|||
|
|
// type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, //不显示x坐标1cm刻度
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: fontColor, //x轴label文字颜色
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false, //不显示grid竖向分割线
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: nameList,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#063374',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
series: seriesData,
|
|||
|
|
}; */
|
|||
|
|
myChart9.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart9.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 作业票-历史记录 */
|
|||
|
|
function initEchartsEleven(nameList, valueList, valueList2) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip: {
|
|||
|
|
show: true,
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
// icon: 'circle',
|
|||
|
|
|
|||
|
|
data: ['A票', 'B票'],
|
|||
|
|
right: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
itemWidth: 20,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
itemGap: 10
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
top: '18%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: nameList,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#101C4A",
|
|||
|
|
width: 1,
|
|||
|
|
type: "solid"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: 0, // 强制显示所有标签
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
width: 1,
|
|||
|
|
type: "solid",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#063374',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: 0, // 强制显示所有标签
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: 'A票',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: valueList,
|
|||
|
|
barWidth: 10, //柱子宽度
|
|||
|
|
barGap: 1, //柱子之间间距
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#59A5FF'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#36EBCA'
|
|||
|
|
}]),
|
|||
|
|
opacity: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: [-2, -13],
|
|||
|
|
formatter: '{c}',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: '13px',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}, {
|
|||
|
|
name: 'B票',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: valueList2,
|
|||
|
|
barWidth: 10,
|
|||
|
|
barGap: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#FFFB99'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#A4FFFA'
|
|||
|
|
}]),
|
|||
|
|
opacity: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: [-2, -13],
|
|||
|
|
formatter: '{c}',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: '13px',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart10.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart10.resize();
|
|||
|
|
});
|
|||
|
|
}
|