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);
|
||
}
|
||
}
|
||
|