685 lines
22 KiB
JavaScript
685 lines
22 KiB
JavaScript
let myChart = echarts.init(document.getElementById('echarts-one'));
|
|
let myChart2 = echarts.init(document.getElementById('echarts-two'));
|
|
let myChart3 = echarts.init(document.getElementById('echarts-three'));
|
|
let myChart4 = echarts.init(document.getElementById('echarts-four'));
|
|
// echarts地图
|
|
let uploadedDataURL2 = "../../js/compreDisplay/anhui/anhui.json";
|
|
let myChart5 = echarts.init(document.getElementById('echarts-map2'));
|
|
|
|
initEchartsOne();
|
|
initEchartsTwo();
|
|
initEchartsThree();
|
|
initEchartsFour();
|
|
loadMap([]);
|
|
function initEchartsOne(list) {
|
|
let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
|
|
let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
|
|
let option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
right: '10%',
|
|
left: '10%',
|
|
bottom: '10%',
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: dataX,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(66, 192, 255, .3)',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
margin: 10,
|
|
color: '#05D5FF',
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
rotate: '0',
|
|
},
|
|
axisTick: {//刻度
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLabel: {
|
|
padding: [3, 0, 0, 0],
|
|
formatter: '{value}',
|
|
color: 'rgba(95, 187, 235, 1)',
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(66, 192, 255, .3)',
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,0)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: dataY,
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(5, 213, 255, 1)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.98,
|
|
color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: 'rgba(5, 213, 255, 1)',
|
|
shadowBlur: 4,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
lineHeight: 10,
|
|
formatter: '{c}',
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option, true);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function initEchartsTwo(list) {
|
|
let nameList = ['合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥'];
|
|
let dataList = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
|
|
option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
left: '12%',
|
|
right: '10%',
|
|
bottom: '8%',
|
|
top: '5%',
|
|
},
|
|
xAxis: {
|
|
show: true,
|
|
type: 'value',
|
|
name: '',
|
|
// 坐标轴线
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.5)',
|
|
type: 'dashed'
|
|
},
|
|
},
|
|
// 坐标轴小标记
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
// 坐标轴文本标签
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'rgba(95, 187, 235, 1)',
|
|
},
|
|
},
|
|
// 分隔线
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(61, 137, 247, 1)',
|
|
},
|
|
},
|
|
// 分隔区域
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
data: nameList,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(66, 192, 255, .3)',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'rgba(95, 187, 235, 1)',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
zlevel: 2,
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
color: '#fff',
|
|
// fontFamily: 'Bebas',
|
|
},
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(61, 137, 247, 0)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.7,
|
|
color: 'rgba(5, 213, 255, 1)', // 100% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
|
|
color: 'rgba(5, 213, 255, 0.7)', // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(5, 213, 255, 1)',
|
|
},
|
|
},
|
|
data: dataList,
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart2.setOption(option, true);
|
|
window.addEventListener("resize", function () {
|
|
myChart2.resize();
|
|
});
|
|
}
|
|
|
|
function initEchartsThree(list) {
|
|
let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
|
|
let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
|
|
let option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
right: '10%',
|
|
left: '10%',
|
|
bottom: '10%',
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: dataX,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(66, 192, 255, .3)',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
margin: 10,
|
|
color: '#05D5FF',
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
rotate: '0',
|
|
},
|
|
axisTick: {//刻度
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLabel: {
|
|
padding: [3, 0, 0, 0],
|
|
formatter: '{value}',
|
|
color: 'rgba(95, 187, 235, 1)',
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(66, 192, 255, .3)',
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,0)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: dataY,
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (params) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: getColor(params.value), // 100% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.98,
|
|
color: '#2066ad',
|
|
},
|
|
],
|
|
false
|
|
)
|
|
},
|
|
// shadowColor: 'rgba(5, 213, 255, 1)',
|
|
shadowBlur: 4,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
lineHeight: 10,
|
|
formatter: '{c}',
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
function getColor(value) {
|
|
let endColor = '#2066ad';
|
|
if (value <= 10) {
|
|
endColor = '#3f67a7';
|
|
} else if (value > 10 && value <= 15) {
|
|
endColor = '#5e6296';
|
|
} else if (value > 15 && value <= 20) {
|
|
endColor = '#7f618a';
|
|
} else if (value > 20 && value <= 25) {
|
|
endColor = '#a55a77';
|
|
} else if (value > 25 && value <= 30) {
|
|
endColor = '#c95665';
|
|
} else if (value > 30 && value <= 35) {
|
|
endColor = '#e45256';
|
|
} else if (value > 35 && value <= 50) {
|
|
endColor = '#ef5050';
|
|
} else {
|
|
endColor = '#f33';
|
|
}
|
|
return endColor;
|
|
}
|
|
myChart3.setOption(option, true);
|
|
window.addEventListener("resize", function () {
|
|
myChart3.resize();
|
|
});
|
|
}
|
|
|
|
function initEchartsFour(list) {
|
|
var data = [
|
|
{
|
|
name: "二级风险",
|
|
value: 54,
|
|
},
|
|
{
|
|
name: "三级风险",
|
|
value: 44,
|
|
},
|
|
{
|
|
name: "四级风险",
|
|
value: 35,
|
|
},
|
|
{
|
|
name: "五级风险",
|
|
value: 30,
|
|
},
|
|
];
|
|
var titleArr = [],
|
|
seriesArr = [];
|
|
colors = [
|
|
["#DD690B", "#DD690B50"],
|
|
["#FFE91F", "#FFE91F50"],
|
|
["#2aa998", "#2aa99850"],
|
|
["#70e180", "#70e18050"],
|
|
["#a181fc", "#e3d9fe"],
|
|
];
|
|
data.forEach(function (item, index) {
|
|
titleArr.push({
|
|
text: item.name,
|
|
left: index * 26 + 11 + "%",
|
|
top: "80%",
|
|
textAlign: "center",
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
fontSize: "14",
|
|
color: colors[index][0],
|
|
textAlign: "center",
|
|
},
|
|
});
|
|
seriesArr.push({
|
|
name: item.name,
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: [30, 40],
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[index][0],
|
|
shadowColor: colors[index][0],
|
|
shadowBlur: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: [index * 26 + 11 + "%", "50%"],
|
|
data: [
|
|
{
|
|
value: item.value,
|
|
label: {
|
|
normal: {
|
|
formatter: function (params) {
|
|
return params.value + "%";
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "20",
|
|
fontWeight: "bold",
|
|
color: colors[index][0],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 100 - item.value,
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[index][1],
|
|
},
|
|
emphasis: {
|
|
color: colors[index][1],
|
|
},
|
|
},
|
|
},
|
|
],
|
|
});
|
|
});
|
|
|
|
option = {
|
|
backgroundColor: "transparent",
|
|
title: titleArr,
|
|
series: seriesArr,
|
|
};
|
|
|
|
myChart4.setOption(option, true);
|
|
window.addEventListener("resize", function () {
|
|
myChart4.resize();
|
|
});
|
|
}
|
|
|
|
/*地图风险等级选中*/
|
|
$(".check-risk").click(function (e) {
|
|
let checkedName = $(this).find('p').eq(0).attr("checkedName");
|
|
let isCheck = $(this).attr("isCheck");
|
|
if (checkedName === '' && isCheck === '1') {
|
|
$('.check-risk').each(function () {
|
|
if ($(this).attr("isCheck") === '1') {
|
|
$(this).attr("isCheck", '0')
|
|
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedValue, 1))
|
|
}
|
|
})
|
|
} else if (checkedName === '' && isCheck === '0') {
|
|
$('.check-risk').each(function () {
|
|
if ($(this).attr("isCheck") === '0') {
|
|
$(this).attr("isCheck", '1')
|
|
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedValue, 2))
|
|
}
|
|
})
|
|
} else if (checkedName !== '' && isCheck === '1') {
|
|
$(this).attr("isCheck", '0')
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 1))
|
|
} else if (checkedName !== '' && isCheck === '0') {
|
|
$(this).attr("isCheck", '1')
|
|
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 2))
|
|
}
|
|
// 加载地图数据
|
|
/* let dataList = mapPointList.filter(item => {
|
|
if (item.buildCode === clickCityCode) {
|
|
return item
|
|
}
|
|
})
|
|
loadMap(dataList); */
|
|
// 设置风险等级选中样式
|
|
function setRiskIcon(value, type) {
|
|
if (value && type === 1) {
|
|
return '../../img/title-btn/no-check/risk-' + value + '-nocheck.png';
|
|
} else if (!value && type === 1) {
|
|
return '../../img/title-btn/no-check/risk-1-nocheck.png';
|
|
} else if (value && type === 2) {
|
|
return '../../img/title-btn/check/risk-' + value + '-check.png';
|
|
} else if (!value && type === 2) {
|
|
return '../../img/title-btn/check/risk-1-check.png';
|
|
}
|
|
}
|
|
});
|
|
|
|
function loadMap(dataMap) {
|
|
$.getJSON(uploadedDataURL2, function (geoJson) {
|
|
echarts.registerMap('anhui', geoJson);
|
|
myChart2.hideLoading();
|
|
let max = 480,
|
|
min = 1.2; // todo
|
|
let maxSize4Pin = 100,
|
|
minSize4Pin = 100;
|
|
|
|
let convertData = function (data) {
|
|
let res = [];
|
|
for (let i = 0; i < data.length; i++) {
|
|
let geoCoord = data[i].coordinate;
|
|
if (geoCoord) {
|
|
res.push({
|
|
proName: data[i].proName,
|
|
num: data[i].num,
|
|
riskLevel: data[i].riskType,
|
|
workContent: dealEmptyString(data[i].workContent),
|
|
isOnline: isOnline(data[i].ballStatus),
|
|
workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
|
|
value: geoCoord.concat(data[i].value, data[i].proName, data[i].num),
|
|
coordinate: data[i].coordinate,
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
let option = {
|
|
silent: false,
|
|
backgroundColor: 'transparent',
|
|
textStyle: {
|
|
fontSize: 15,
|
|
fontWeight: 'bold',
|
|
color: 'red'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
enterable: true,
|
|
position: function (pos, params, dom, rect, size) {
|
|
if ($(dom).children($('p')).length === 0) $(dom).css('display', 'none')
|
|
pos = [pos[0], pos[1] + 10];
|
|
return pos;
|
|
},
|
|
backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
borderColor: "#174FDD",
|
|
formatter: function (params) {
|
|
if (params.data)
|
|
return (
|
|
'<p class="map-p">' + params.data.proName + '</p>' +
|
|
'<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
|
|
'<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
|
|
'<p class="map-p">班组长：' + params.data.workManager + '</p>' +
|
|
'<p class="map-p">预警数量：' + params.data.num + '</p>' +
|
|
'<p class="map-p">球机：' + params.data.isOnline + '</p>'
|
|
)
|
|
},
|
|
// extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
|
|
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
|
|
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: 'anhui',
|
|
aspectScale: 0.8,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontFamily: 'Alibaba PuHuiTi R'
|
|
},
|
|
rotate: -20,
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
}
|
|
},
|
|
roam: false,
|
|
scaleLimit: {
|
|
max: max,
|
|
min: min
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#275D74',
|
|
borderColor: '#5EB1B3',
|
|
borderWidth: 2,
|
|
shadowColor: 'rgba(80, 172, 243, 0.5)',
|
|
shadowBlur: 30
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7',
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
series: [{
|
|
name: '在线',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
animation: false,
|
|
symbolSize: function (val) {
|
|
let a = (maxSize4Pin - minSize4Pin) / (max - min);
|
|
let b = minSize4Pin - a * min;
|
|
b = maxSize4Pin - a * max;
|
|
return 20;
|
|
},
|
|
symbol: function (val) {
|
|
console.log(val)
|
|
var num = Number(val[4]) + 1;
|
|
return getEchartsImage(val[2], num, val[3]);
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 15,
|
|
opacity: 1
|
|
}
|
|
}
|
|
},
|
|
zlevel: 6,
|
|
z: 6,
|
|
data: convertData(dataMap)
|
|
},
|
|
]
|
|
}
|
|
|
|
myChart5.clear();
|
|
myChart5.setOption(option, true);
|
|
});
|
|
window.addEventListener("resize", function () {
|
|
myChart5.resize();
|
|
});
|
|
} |