323 lines
9.0 KiB
JavaScript
323 lines
9.0 KiB
JavaScript
|
let table, layer, form;
|
||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||
|
|
|
||
|
|
layui.use(["layer", "table", "form"], function () {
|
||
|
|
layer = layui.layer;
|
||
|
|
table = layui.table;
|
||
|
|
form = layui.form;
|
||
|
|
|
||
|
|
getEnvironmental();
|
||
|
|
|
||
|
|
getSafetyAlert();
|
||
|
|
});
|
||
|
|
|
||
|
|
function getEnvironmental() {
|
||
|
|
let yList = [32, 58, 64, 164, 99];
|
||
|
|
let xData = ['学前', '小学', '初中', '高中', 'qq'];
|
||
|
|
initEnvironmental(yList, xData)
|
||
|
|
}
|
||
|
|
|
||
|
|
function initEnvironmental(yList, xData) {
|
||
|
|
let barWidth = 60;
|
||
|
|
let colors = []
|
||
|
|
for (let i = 0; i < xData.length; i++) {
|
||
|
|
colors.push({
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
x2: 1,
|
||
|
|
y: 0,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#1CFFF4' // 最左边
|
||
|
|
}, {
|
||
|
|
offset: 0.5,
|
||
|
|
color: '#1CFFF4' // 左边的右边 颜色
|
||
|
|
}, {
|
||
|
|
offset: 0.5,
|
||
|
|
color: '#1CFFF4' // 右边的左边 颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: '#1CFFF4'
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const myChart = echarts.init(document.getElementById("environmental"));
|
||
|
|
const option = {
|
||
|
|
//提示框
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
formatter: "{b} : {c}",
|
||
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**区域位置*/
|
||
|
|
grid: {
|
||
|
|
left: '8%',
|
||
|
|
right: '3%',
|
||
|
|
top: '30%',
|
||
|
|
bottom: '30%',
|
||
|
|
},
|
||
|
|
//X轴
|
||
|
|
xAxis: {
|
||
|
|
data: xData,
|
||
|
|
type: 'category',
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,1)',
|
||
|
|
shadowColor: 'rgba(255,255,255,1)',
|
||
|
|
shadowOffsetX: '20',
|
||
|
|
},
|
||
|
|
symbol: ['none', 'arrow'],
|
||
|
|
symbolOffset: [0, 25]
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
margin: 30,
|
||
|
|
fontSize: 15,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
show: true,
|
||
|
|
splitNumber: 4,
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#075858'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#FFFFFF',
|
||
|
|
margin: 8,
|
||
|
|
fontSize: 15
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: barWidth,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function (params) {
|
||
|
|
return colors[params.dataIndex % 7];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: [barWidth / 2, -(barWidth + 20)],
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
fontStyle: 'bold',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
data: yList
|
||
|
|
},
|
||
|
|
{
|
||
|
|
z: 2,
|
||
|
|
type: 'pictorialBar',
|
||
|
|
data: yList,
|
||
|
|
symbol: 'diamond',
|
||
|
|
symbolOffset: [0, '50%'],
|
||
|
|
symbolSize: [barWidth, barWidth * 0.5],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function (params) {
|
||
|
|
return colors[params.dataIndex % 7];
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
z: 3,
|
||
|
|
type: 'pictorialBar',
|
||
|
|
symbolPosition: 'end',
|
||
|
|
data: yList,
|
||
|
|
symbol: 'diamond',
|
||
|
|
symbolOffset: [0, '-50%'],
|
||
|
|
symbolSize: [barWidth, barWidth * 0.5],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
borderWidth: 0,
|
||
|
|
color: function (params) {
|
||
|
|
return colors[params.dataIndex % 7].colorStops[0].color;
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getSafetyAlert() {
|
||
|
|
let yList = [32, 58, 64, 164, 99];
|
||
|
|
let xData = ['学前', '小学', '初中', '高中', 'qq'];
|
||
|
|
initSafetyAlert(yList, xData)
|
||
|
|
}
|
||
|
|
|
||
|
|
function initSafetyAlert(yList, xData) {
|
||
|
|
let barWidth = 60;
|
||
|
|
let colors = []
|
||
|
|
for (let i = 0; i < xData.length; i++) {
|
||
|
|
colors.push({
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
x2: 1,
|
||
|
|
y: 0,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#1CFFF4' // 最左边
|
||
|
|
}, {
|
||
|
|
offset: 0.5,
|
||
|
|
color: '#1CFFF4' // 左边的右边 颜色
|
||
|
|
}, {
|
||
|
|
offset: 0.5,
|
||
|
|
color: '#1CFFF4' // 右边的左边 颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: '#1CFFF4'
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const myChart = echarts.init(document.getElementById("safetyAlert"));
|
||
|
|
const option = {
|
||
|
|
//提示框
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
formatter: "{b} : {c}",
|
||
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**区域位置*/
|
||
|
|
grid: {
|
||
|
|
left: '8%',
|
||
|
|
right: '3%',
|
||
|
|
top: '30%',
|
||
|
|
bottom: '30%',
|
||
|
|
},
|
||
|
|
//X轴
|
||
|
|
xAxis: {
|
||
|
|
data: xData,
|
||
|
|
type: 'category',
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,1)',
|
||
|
|
shadowColor: 'rgba(255,255,255,1)',
|
||
|
|
shadowOffsetX: '20',
|
||
|
|
},
|
||
|
|
symbol: ['none', 'arrow'],
|
||
|
|
symbolOffset: [0, 25]
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
margin: 30,
|
||
|
|
fontSize: 15,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
show: true,
|
||
|
|
splitNumber: 4,
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#075858'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#FFFFFF',
|
||
|
|
margin: 8,
|
||
|
|
fontSize: 15
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: barWidth,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function (params) {
|
||
|
|
return colors[params.dataIndex % 7];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: [barWidth / 2, -(barWidth + 20)],
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
fontStyle: 'bold',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
data: yList
|
||
|
|
},
|
||
|
|
{
|
||
|
|
z: 2,
|
||
|
|
type: 'pictorialBar',
|
||
|
|
data: yList,
|
||
|
|
symbol: 'diamond',
|
||
|
|
symbolOffset: [0, '50%'],
|
||
|
|
symbolSize: [barWidth, barWidth * 0.5],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function (params) {
|
||
|
|
return colors[params.dataIndex % 7];
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
z: 3,
|
||
|
|
type: 'pictorialBar',
|
||
|
|
symbolPosition: 'end',
|
||
|
|
data: yList,
|
||
|
|
symbol: 'diamond',
|
||
|
|
symbolOffset: [0, '-50%'],
|
||
|
|
symbolSize: [barWidth, barWidth * 0.5],
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
borderWidth: 0,
|
||
|
|
color: function (params) {
|
||
|
|
return colors[params.dataIndex % 7].colorStops[0].color;
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|