415 lines
10 KiB
JavaScript
415 lines
10 KiB
JavaScript
|
/* eslint-disable no-undef */
|
|||
|
|
// import { color } from 'html2canvas/dist/types/css/types/color'; //wyw 这个会影响
|
|||
|
|
import { random, omit } from 'lodash';
|
|||
|
|
import moment from 'moment';
|
|||
|
|
const RFC4122_TEMPLATE = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
|
|||
|
|
|
|||
|
|
//饼图展示 wyw (安全检查情况占比)
|
|||
|
|
//legendData, seriesData 数据类型参考方法体
|
|||
|
|
export function ChartPieShow(echarts, divId, title, legendData, seriesData, tooltipFormatter) {
|
|||
|
|
|
|||
|
|
//添加缺省参数案例
|
|||
|
|
if (tooltipFormatter == undefined || tooltipFormatter == null)
|
|||
|
|
tooltipFormatter = '{b} : {c} ({d}%)'
|
|||
|
|
|
|||
|
|
var element = document.getElementById(divId)
|
|||
|
|
if (element != undefined) {
|
|||
|
|
var myChart = echarts.init(element);
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: title,
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: tooltipFormatter
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
// orient: 'vertical', // left: 'left',
|
|||
|
|
type: 'scroll',
|
|||
|
|
top: 50,
|
|||
|
|
data: legendData //['综合检查', '例行检查', '巡回检查', '专业检查', '日常巡检']
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '55%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
data: seriesData,
|
|||
|
|
// [
|
|||
|
|
// { value: 335, name: '直接访问' },
|
|||
|
|
// { value: 310, name: '邮件营销' },
|
|||
|
|
// { value: 234, name: '联盟广告' },
|
|||
|
|
// { value: 135, name: '视频广告' },
|
|||
|
|
// { value: 1548, name: '搜索引擎' }
|
|||
|
|
// ],
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//柱状图 横向 （班组安全检查完成率分析）
|
|||
|
|
export function ChartBarShow(echarts, divId, title, xAxisData, seriesDataFinish, seriesDataNotFinish, tooltipFormatter) {
|
|||
|
|
var element = document.getElementById(divId)
|
|||
|
|
if (element != undefined) {
|
|||
|
|
var myChart = echarts.init(element);
|
|||
|
|
|
|||
|
|
//添加缺省参数案例
|
|||
|
|
if (tooltipFormatter == undefined || tooltipFormatter == null)
|
|||
|
|
tooltipFormatter = '{b} : {c} '
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: title,
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '30px',
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xAxisData,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '已完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
label: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
data: seriesDataFinish,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '未完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
data: seriesDataNotFinish,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
|
|||
|
|
// var element = document.getElementById(divId)
|
|||
|
|
// if (element != undefined) {
|
|||
|
|
// var myChart = echarts.init(element);
|
|||
|
|
|
|||
|
|
// //添加缺省参数案例
|
|||
|
|
// if (tooltipFormatter == undefined || tooltipFormatter == null)
|
|||
|
|
// tooltipFormatter = '{b} : {c} '
|
|||
|
|
// var option = {
|
|||
|
|
// title: {
|
|||
|
|
// text: title,
|
|||
|
|
// left: 'center'
|
|||
|
|
// },
|
|||
|
|
// tooltip: {
|
|||
|
|
// trigger: 'item',
|
|||
|
|
// formatter: tooltipFormatter
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// // legend: {
|
|||
|
|
// // left: 'left',
|
|||
|
|
// // orient: 'vertical',
|
|||
|
|
// // data: ['已完成', '未完成'],
|
|||
|
|
// // bottom: '10'
|
|||
|
|
// // },
|
|||
|
|
// // legend: {
|
|||
|
|
// // // orient: 'vertical', // left: 'left',
|
|||
|
|
// // type: 'scroll',
|
|||
|
|
// // top: 50,
|
|||
|
|
// // data: ['已完成', '未完成']
|
|||
|
|
// // },
|
|||
|
|
|
|||
|
|
// legend: {
|
|||
|
|
// top: '100px',
|
|||
|
|
// data: ['已完成', '未完成'],
|
|||
|
|
// // bottom: '0px'
|
|||
|
|
// },
|
|||
|
|
// /***横向排列***/
|
|||
|
|
// yAxis: [{
|
|||
|
|
// type: 'category',
|
|||
|
|
// data: xAxisData,
|
|||
|
|
// axisLable: {
|
|||
|
|
// interval: 0,
|
|||
|
|
// rotate: 40
|
|||
|
|
// }
|
|||
|
|
// }],
|
|||
|
|
// xAxis: {},
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// type: 'bar',
|
|||
|
|
// stack: 'total',
|
|||
|
|
// data: seriesDataFinish,// [320, 302, 301, 334, 390, 330, 320]
|
|||
|
|
// label: {
|
|||
|
|
// show: true,
|
|||
|
|
// // formatter:'{c0/(c0+c1)}%'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// type: 'bar',
|
|||
|
|
// stack: 'total',
|
|||
|
|
// data: seriesDataNotFinish,// [120, 132, 101, 134, 90, 230, 210]
|
|||
|
|
// label: {
|
|||
|
|
// show: true,
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// ],
|
|||
|
|
// }
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// // 使用刚指定的配置项和数据显示图表。
|
|||
|
|
// myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// //柱状图 竖向 （年度 安全检查隐患整改统计图）
|
|||
|
|
// export function ChartBarShow_Vertical(echarts, divId, title, xAxisData, seriesDataFinish, seriesDataNotFinish, tooltipFormatter) {
|
|||
|
|
// debugger
|
|||
|
|
// var element = document.getElementById(divId)
|
|||
|
|
// if (element != undefined) {
|
|||
|
|
// var myChart = echarts.init(element);
|
|||
|
|
|
|||
|
|
// var option = {
|
|||
|
|
// tooltip: {
|
|||
|
|
// trigger: 'axis',
|
|||
|
|
// axisPointer: {
|
|||
|
|
// // Use axis to trigger tooltip
|
|||
|
|
// type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// legend: {},
|
|||
|
|
// grid: {
|
|||
|
|
// left: '3%',
|
|||
|
|
// right: '4%',
|
|||
|
|
// bottom: '3%',
|
|||
|
|
// containLabel: true
|
|||
|
|
// },
|
|||
|
|
// xAxis: {
|
|||
|
|
// type: 'category',
|
|||
|
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|||
|
|
// },
|
|||
|
|
// yAxis: {
|
|||
|
|
// type: 'value'
|
|||
|
|
// },
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// name: 'Direct',
|
|||
|
|
// type: 'bar',
|
|||
|
|
// stack: 'total',
|
|||
|
|
// label: {
|
|||
|
|
// show: true
|
|||
|
|
// },
|
|||
|
|
// emphasis: {
|
|||
|
|
// focus: 'series'
|
|||
|
|
// },
|
|||
|
|
// data: [320, 302, 301, 334, 390, 330, 320]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: 'Mail Ad',
|
|||
|
|
// type: 'bar',
|
|||
|
|
// stack: 'total',
|
|||
|
|
// label: {
|
|||
|
|
// show: true
|
|||
|
|
// },
|
|||
|
|
// emphasis: {
|
|||
|
|
// focus: 'series'
|
|||
|
|
// },
|
|||
|
|
// data: [120, 132, 101, 134, 90, 230, 210]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: 'Affiliate Ad',
|
|||
|
|
// type: 'bar',
|
|||
|
|
// stack: 'total',
|
|||
|
|
// label: {
|
|||
|
|
// show: true
|
|||
|
|
// },
|
|||
|
|
// emphasis: {
|
|||
|
|
// focus: 'series'
|
|||
|
|
// },
|
|||
|
|
// data: [220, 182, 191, 234, 290, 330, 310]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: 'Video Ad',
|
|||
|
|
// type: 'bar',
|
|||
|
|
// stack: 'total',
|
|||
|
|
// label: {
|
|||
|
|
// show: true
|
|||
|
|
// },
|
|||
|
|
// emphasis: {
|
|||
|
|
// focus: 'series'
|
|||
|
|
// },
|
|||
|
|
// data: [150, 212, 201, 154, 190, 330, 410]
|
|||
|
|
// }
|
|||
|
|
// ]
|
|||
|
|
// };
|
|||
|
|
// // 使用刚指定的配置项和数据显示图表。
|
|||
|
|
// myChart.setOption(option);
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//柱状图 竖向 （年度 安全检查隐患整改统计图）
|
|||
|
|
export function ChartBarShow_Vertical(echarts, divId, data, title) {
|
|||
|
|
var element = document.getElementById(divId)
|
|||
|
|
if (element != undefined && data != null && data.length > 0) {
|
|||
|
|
var myChart = echarts.init(element);
|
|||
|
|
var series = []
|
|||
|
|
var xAxisData = []
|
|||
|
|
var yAxisData1 = []
|
|||
|
|
var yAxisData2 = []
|
|||
|
|
var yAxisData3 = []
|
|||
|
|
|
|||
|
|
data.forEach((item) => {
|
|||
|
|
xAxisData.push(item.YEAR + "-" + item.MONTH)
|
|||
|
|
yAxisData1.push(item.INTTIMECOUNT)
|
|||
|
|
yAxisData2.push(item.OUTTIMECOUNT)
|
|||
|
|
yAxisData3.push(item.NOTFINISHCOUN)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: title,
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
bottom: '0px'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '10%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xAxisData
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '按期整改',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
label: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
data: yAxisData1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '延期整改',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
label: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
data: yAxisData2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '未完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
label: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
focus: 'series'
|
|||
|
|
},
|
|||
|
|
data: yAxisData3
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//折线图 （年度 安全检查隐患整改率（近12个月））
|
|||
|
|
export function LineShow(echarts, divId, title, dataXAxis, dataSeries) {
|
|||
|
|
|
|||
|
|
var chartDom = document.getElementById(divId);
|
|||
|
|
if (chartDom != null && chartDom != undefined) {
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
var option;
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: title,
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: dataXAxis
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: dataSeries,
|
|||
|
|
type: 'line'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|