1334 lines
27 KiB
HTML
1334 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html style="height: 100%;">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>大屏展示</title>
|
||
<script src="echarts/echarts.min.js"></script>
|
||
<script src="js/shandong.js"></script>
|
||
<script src="js/jquery.min.js" rel="script"></script>
|
||
<style type="text/css">
|
||
.clearBox::after {
|
||
display: block;
|
||
content: "";
|
||
clear: both;
|
||
}
|
||
|
||
.daping_box {
|
||
/*width: 1400px;*/
|
||
/*height: 900;*/
|
||
min-width: 1400px;
|
||
background: url(img/dp_back.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
body {
|
||
padding: 0px;
|
||
margin: 0px;
|
||
}
|
||
|
||
.daping_bottom {
|
||
width: 100%;
|
||
|
||
padding-top: 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.daping_top_box {
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 24px;
|
||
font-weight: bolder;
|
||
line-height: 65px;
|
||
}
|
||
|
||
.left_daping {
|
||
float: left;
|
||
width: 28%;
|
||
|
||
margin-left: 1%;
|
||
/*background: #6666;*/
|
||
}
|
||
|
||
.con_daping {
|
||
float: left;
|
||
width: 40%;
|
||
|
||
margin-left: 1%;
|
||
margin-right: 1%;
|
||
}
|
||
|
||
.right_daping {
|
||
float: left;
|
||
width: 28%;
|
||
|
||
}
|
||
|
||
.daping_left_top {
|
||
width: 100%;
|
||
background: url(img/dp_item_back.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.left_top_a {
|
||
text-align: center;
|
||
color: #FFF;
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
}
|
||
|
||
.left_daping>div {
|
||
background: url(img/dp_item_back.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 5%;
|
||
}
|
||
|
||
.daping_left_con {
|
||
margin: 15px 0px;
|
||
}
|
||
|
||
.daping_box_bottom_con {
|
||
width: 100%;
|
||
float: left;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.bottom_right_top a {
|
||
color: #FFF;
|
||
font-weight: bold;
|
||
display: block;
|
||
float: left;
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.a_one {
|
||
width: 36%;
|
||
}
|
||
|
||
.a_two {
|
||
width: 20%;
|
||
}
|
||
|
||
.a_three {
|
||
width: 30%;
|
||
}
|
||
|
||
.a_four {
|
||
width: 40%;
|
||
}
|
||
|
||
.bottom_right_bottom ul {
|
||
padding: 0px;
|
||
margin: 0px;
|
||
|
||
}
|
||
|
||
.bottom_right_bottom ul li a {
|
||
color: #FFF;
|
||
display: block;
|
||
float: left;
|
||
text-align: center;
|
||
display: block;
|
||
line-height: 40px;
|
||
white-space: nowrap;
|
||
|
||
overflow: hidden;
|
||
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.bottom_right_bottom ul li {
|
||
list-style: none;
|
||
height: 40px;
|
||
}
|
||
|
||
.bottom_right_bottom ul li:hover {
|
||
cursor: pointer;
|
||
background: #102243;
|
||
}
|
||
|
||
.bottom_right_bottom ul li:hover a {
|
||
color: #54bac3 !important;
|
||
}
|
||
|
||
.daping_box_bottom_right {
|
||
width: 100%;
|
||
float: left;
|
||
padding-top: 10px;
|
||
padding-left: 21px;
|
||
box-sizing: border-box;
|
||
margin-top: 10px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.top_bottom_a {
|
||
height: 25px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.top_bottom_a a {
|
||
color: #FFF;
|
||
font-size: 20px;
|
||
font-weight: bolder;
|
||
|
||
}
|
||
|
||
.a_back {
|
||
color: #feae21 !important;
|
||
}
|
||
|
||
.back_li {
|
||
background: #33384c;
|
||
}
|
||
|
||
.dap_top {
|
||
height: 50px;
|
||
background: #111530;
|
||
}
|
||
|
||
.dap_top a {
|
||
font-size: 20px;
|
||
color: #FFF;
|
||
line-height: 50px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.bottom_back {
|
||
background: url(img/dp_item_back.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
}
|
||
|
||
.right_daping>div {
|
||
background: url(img/dp_item_back.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 5%;
|
||
}
|
||
|
||
.one_div_fl {
|
||
width: 45%;
|
||
float: left;
|
||
background: #064372;
|
||
border-radius: 10px;
|
||
margin-left: 15px;
|
||
margin-top: 15px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.one_div_fl p {
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.one_div_fl p a {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.one_div_fl>a {
|
||
font-size: 18px;
|
||
color: #e1b44d;
|
||
}
|
||
|
||
.one_div_fl a span {
|
||
font-size: 16px;
|
||
color: #e1b44d;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.top_d_s {
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dy_tj {
|
||
text-align: center;
|
||
width: 100%;
|
||
color: #fff;
|
||
}
|
||
|
||
.map .map1 {
|
||
width: 550px;
|
||
height: 550px;
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: url(img/map.png);
|
||
background-size: 100% 100%;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.map .map2 {
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 550px;
|
||
height: 550px;
|
||
background: url(img/lbx.png);
|
||
animation: rotate1 15s linear infinite;
|
||
opacity: 0.6;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.map .map3 {
|
||
position: absolute;
|
||
top: 40%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 550px;
|
||
height: 550px;
|
||
background: url(img/jt.png);
|
||
animation: rotate2 10s linear infinite;
|
||
opacity: 0.6;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.map .chart {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 10.125rem;
|
||
}
|
||
|
||
@keyframes rotate1 {
|
||
form {
|
||
transform: translate(-50%, -50%) rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: translate(-50%, -50%) rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes rotate2 {
|
||
form {
|
||
transform: translate(-50%, -50%) rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: translate(-50%, -50%) rotate(-360deg);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="height: 100%;">
|
||
<div class="map">
|
||
<div class="map1"></div>
|
||
<div class="map2"></div>
|
||
<div class="map3"></div>
|
||
<div class="chart"></div>
|
||
</div>
|
||
<div class="daping_box">
|
||
<div class="daping_top_box">
|
||
<a>德州职业健康大屏展示</a>
|
||
</div>
|
||
<div class="clearBox daping_bottom">
|
||
<div class="left_daping">
|
||
<div class="daping_left_top">
|
||
<div class="left_top_a">
|
||
<a>德城区各乡镇人口总数(万)</a>
|
||
</div>
|
||
<div class="chartArea" id="data7" style="height:240px;width: 380px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="daping_left_con">
|
||
<div class="left_top_a">
|
||
<a>完成培训人数</a>
|
||
</div>
|
||
<div id="main2" style="height:240px;width: 380px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="daping_left_bottom">
|
||
<div class="left_top_a">
|
||
<a>体检完成情况</a>
|
||
</div>
|
||
<div id="main3" style="height:240px;width: 380px;margin: 0 auto;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="con_daping">
|
||
<div class="dy_tj">
|
||
<a>德州市地域统计</a>
|
||
</div>
|
||
<div id="main" style="width: 480px;height: 500px;margin: 0 auto;"></div>
|
||
<div class="daping_box_bottom_right clearBox bottom_back">
|
||
<div class="left_top_a" style="margin-top: -11px;">
|
||
<a>企业体检、检测、评价完成情况</a>
|
||
</div>
|
||
<div class="">
|
||
|
||
<div class="bottom_right_top clearBox">
|
||
<a class="a_one">名称</a><a class="a_two">体检</a><a class="a_two">检测</a><a class="a_two">评价</a>
|
||
</div>
|
||
<div class="bottom_right_bottom">
|
||
<ul>
|
||
<li class="">
|
||
<a class="a_one">二屯镇</a><a class="a_two a_back">65</a><a class="a_two a_back">77</a>
|
||
<a class="a_two a_back">69</a>
|
||
</li>
|
||
<li>
|
||
<a class="a_one">黄河涯镇</a><a class="a_two a_back">78</a><a class="a_two a_back">97</a>
|
||
<a class="a_two a_back">78</a>
|
||
</li>
|
||
<li class="">
|
||
<a class="a_one">赵虎镇</a><a class="a_two a_back">88</a><a class="a_two a_back">91</a>
|
||
<a class="a_two a_back">65</a>
|
||
</li>
|
||
<li>
|
||
<a class="a_one">抬头寺镇</a><a class="a_two a_back">86</a><a class="a_two a_back">82</a>
|
||
<a class="a_two a_back">88</a>>
|
||
</li>
|
||
<li class="">
|
||
< <a class="a_one">袁桥镇</a><a class="a_two a_back">59</a><a class="a_two a_back">73</a>
|
||
<a class="a_two a_back">90</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_daping">
|
||
<div class="right_daping_top">
|
||
<div class="left_top_a">
|
||
<a>重点关注企业</a>
|
||
<div class="clearBox top_d_s" style="height:240px;width: 380px;margin: 0 auto;">
|
||
<div class="one_div_fl">
|
||
<p><a>A级</a></p>
|
||
<a>45<span>家</span></a>
|
||
</div>
|
||
<div class="one_div_fl">
|
||
<p><a>B级</a></p>
|
||
<a>140<span>家</span></a>
|
||
</div>
|
||
<div class="one_div_fl">
|
||
<p><a>C级</a></p>
|
||
<a>214<span>家</span></a>
|
||
</div>
|
||
<div class="one_div_fl">
|
||
<p><a>D级</a></p>
|
||
<a>36<span>家</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_daping_con">
|
||
<div class="left_top_a">
|
||
<a>检测情况</a>
|
||
</div>
|
||
<div id="main4" style="height:240px;width: 380px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="right_daping_bottom">
|
||
<div class="left_top_a">
|
||
<a>评价情况</a>
|
||
</div>
|
||
<div id="main5" style="height:240px;width: 380px;margin: 0 auto;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var return_data = {
|
||
//"德州市": [579],
|
||
"二屯镇": [7.5],
|
||
"黄河涯镇": [5.4],
|
||
"赵虎镇": [6.6],
|
||
"抬头寺镇": [5.8],
|
||
"袁桥镇": [4.7],
|
||
"新湖街道": [3.7],
|
||
"新华街道": [5.3],
|
||
"天衢街道": [6.0],
|
||
"运河街道": [4.9],
|
||
"广川街道": [5.0],
|
||
"长河街道": [3.5]
|
||
};
|
||
var nameData = [];
|
||
var valueData = [];
|
||
var valueData2 = [];
|
||
var sum = 0,
|
||
sum1 = 0;
|
||
for (let k in return_data) {
|
||
nameData.push(k);
|
||
valueData.push(return_data[k][0]);
|
||
valueData2.push(return_data[k][1]);
|
||
sum = sum + return_data[k][0];
|
||
sum1 = sum1 + return_data[k][1];
|
||
}
|
||
// $('#sum').append("(注册数量:" + sum +",发证数量:" + sum1+")");
|
||
var myChart = echarts.init(document.getElementById('data7'));
|
||
var myChart2 = echarts.init(document.getElementById('main2'));
|
||
var myChart3 = echarts.init(document.getElementById('main3'));
|
||
var myChart4 = echarts.init(document.getElementById('main4'));
|
||
var myChart5 = echarts.init(document.getElementById('main5'));
|
||
var option = {
|
||
/*title: {
|
||
text: '德州市各区县人口总数',
|
||
textStyle:{
|
||
color:'#fff'
|
||
}
|
||
},*/
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'item',
|
||
formatter: "{c}"
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: {
|
||
show: true
|
||
},
|
||
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '4%',
|
||
bottom: '6%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#666', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 40,
|
||
show: true,
|
||
splitNumber: 15,
|
||
color: "#FFF",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
|
||
},
|
||
|
||
data: nameData,
|
||
|
||
axisTick: {
|
||
|
||
alignWithLabel: true
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: { //分割线
|
||
show: true,
|
||
color: "#fff",
|
||
lineStyle: {
|
||
color: '#666'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#666', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
show: true,
|
||
splitNumber: 30,
|
||
color: "#FFF",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
|
||
},
|
||
|
||
],
|
||
series: [{
|
||
name: '总人口数量(万)',
|
||
type: 'bar',
|
||
barWidth: 15, //柱图宽度
|
||
data: valueData,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[{
|
||
offset: 0,
|
||
color: '#0381de'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#3c2ed1'
|
||
}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
label: {
|
||
show: true,
|
||
color: '#fff',
|
||
position: 'top',
|
||
formatter: '{c}'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '老年人80岁以上数量',
|
||
type: 'bar',
|
||
barWidth: 15, //柱图宽度
|
||
data: valueData2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "0073c2",
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
// option2 = {
|
||
|
||
|
||
|
||
|
||
// color: ['#3398DB'],
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
||
// type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||
// }
|
||
// },
|
||
// grid: {
|
||
// left: '3%',
|
||
// right: '4%',
|
||
// top: '4%',
|
||
// bottom: '6%',
|
||
// containLabel: true
|
||
// },
|
||
// xAxis: [{
|
||
// type: 'category',
|
||
// data: ['8月', '9月', '10月', '11月', '12月', '1月', '2月'],
|
||
// axisTick: {
|
||
// alignWithLabel: true
|
||
// },
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// type: 'solid',
|
||
// color: '#FFF', //左边线的颜色
|
||
// width: '1' //坐标线的宽度
|
||
// }
|
||
// },
|
||
// axisLabel: {
|
||
// interval: 0,
|
||
// rotate: 40,
|
||
// show: true,
|
||
// splitNumber: 15,
|
||
// color: "#FFF",
|
||
// textStyle: {
|
||
// //fontFamily: "微软雅黑",
|
||
// fontSize: 12,
|
||
// },
|
||
|
||
// },
|
||
// }],
|
||
|
||
|
||
// yAxis: [{
|
||
// type: 'value',
|
||
// splitLine: { //分割线
|
||
// show: true,
|
||
// color: "#fff",
|
||
// lineStyle: {
|
||
// color: '#FFF'
|
||
// }
|
||
// },
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// type: 'solid',
|
||
// color: '#FFF', //左边线的颜色
|
||
// width: '1' //坐标线的宽度
|
||
// }
|
||
// },
|
||
// axisLabel: {
|
||
// interval: 0,
|
||
// rotate: 0,
|
||
// show: true,
|
||
// splitNumber: 30,
|
||
// color: "#FFF",
|
||
// textStyle: {
|
||
// //fontFamily: "微软雅黑",
|
||
// fontSize: 12,
|
||
// },
|
||
// },
|
||
// }],
|
||
// series: [{
|
||
// name: '完成学习人数',
|
||
// type: 'bar',
|
||
// barWidth: '60%',
|
||
// data: [163, 254, 283, 125, 195, 190, 220],
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0, 0, 1, 0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
// [{
|
||
// offset: 0,
|
||
// color: '#64dee3'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#0282de'
|
||
// }
|
||
// ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
// ),
|
||
// }]
|
||
// };
|
||
|
||
|
||
option2 = {
|
||
backgroundColor: '#091C3D',
|
||
tooltip: { //提示框组件
|
||
trigger: 'axis',
|
||
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontStyle: 'normal',
|
||
fontFamily: '微软雅黑',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '4%',
|
||
bottom: '6%',
|
||
containLabel: true
|
||
},
|
||
|
||
|
||
legend: { //图例组件,颜色和名字
|
||
itemGap: 16,
|
||
itemWidth: 18,
|
||
itemHeight: 10,
|
||
data: [{
|
||
name: '完成学习人数',
|
||
//icon:'image://../wwwroot/js/url2.png', //路径
|
||
},
|
||
{
|
||
name: '预计人数',
|
||
}
|
||
],
|
||
textStyle: {
|
||
color: '#a8aab0',
|
||
fontStyle: 'normal',
|
||
fontFamily: '微软雅黑',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
// boundaryGap: true,//坐标轴两边留白
|
||
data: ['8月', '9月', '10月', '11月', '12月', '1月', '2月'],
|
||
axisLabel: { //坐标轴刻度标签的相关设置。
|
||
// interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
|
||
// margin:15,
|
||
textStyle: {
|
||
color: '#078ceb',
|
||
fontStyle: 'normal',
|
||
fontFamily: '微软雅黑',
|
||
fontSize: 12,
|
||
},
|
||
rotate: 50,
|
||
},
|
||
axisTick: { //坐标轴刻度相关设置。
|
||
show: false,
|
||
},
|
||
axisLine: { //坐标轴轴线相关设置
|
||
lineStyle: {
|
||
color: '#fff',
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
splitLine: { //坐标轴在 grid 区域中的分隔线。
|
||
show: false,
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
splitNumber: 5,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#a8aab0',
|
||
fontStyle: 'normal',
|
||
fontFamily: '微软雅黑',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.06
|
||
}
|
||
}
|
||
|
||
}],
|
||
series: [{
|
||
// name: '健康度',
|
||
// type: 'bar',
|
||
// data: [10, 15, 30, 45, 55, 60, 62, 80, 80, 62, 60, 55, 45, 30, 15, 10],
|
||
// barWidth: 10,
|
||
// barGap: 0, //柱间距离
|
||
// // label: {//图形上的文本标签
|
||
// // normal: {
|
||
// // show: true,
|
||
// // position: 'top',
|
||
// // textStyle: {
|
||
// // color: '#a8aab0',
|
||
// // fontStyle: 'normal',
|
||
// // fontFamily: '微软雅黑',
|
||
// // fontSize: 12,
|
||
// // },
|
||
// // },
|
||
// // },
|
||
// itemStyle: {
|
||
// normal: {
|
||
// show: true,
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
// offset: 0,
|
||
// color: '#5768EF'
|
||
// }, {
|
||
// offset: 1,
|
||
// color: '#5768EF'
|
||
// }]),
|
||
// barBorderRadius: 50,
|
||
// borderWidth: 0,
|
||
// }
|
||
// },
|
||
// },
|
||
|
||
|
||
name: '预计人数',
|
||
type: 'bar',
|
||
barWidth: '30%',
|
||
data: [163, 254, 283, 125, 195, 190, 220],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 1, 0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[{
|
||
offset: 0,
|
||
color: '#64dee3'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0282de'
|
||
}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
},
|
||
|
||
{
|
||
name: '完成学习人数',
|
||
type: 'bar',
|
||
barWidth: '30%',
|
||
data: [150, 220, 250, 100, 150, 130, 180],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 1, 0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[{
|
||
offset: 0,
|
||
color: '#5768EF'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#5768EF'
|
||
}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
// {
|
||
// name: '可用度',
|
||
// type: 'bar',
|
||
// data: [8, 5, 25, 30, 35, 55, 62, 78, 65, 55, 60, 45, 42, 15, 12, 5],
|
||
// barWidth: 10,
|
||
// barGap: 0, //柱间距离
|
||
// // label: {//图形上的文本标签
|
||
// // normal: {
|
||
// // show: true,
|
||
// // position: 'top',
|
||
// // textStyle: {
|
||
// // color: '#a8aab0',
|
||
// // fontStyle: 'normal',
|
||
// // fontFamily: '微软雅黑',
|
||
// // fontSize: 12,
|
||
// // },
|
||
// // },
|
||
// // },
|
||
// itemStyle: {
|
||
// normal: {
|
||
// show: true,
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
// offset: 0,
|
||
// color: '#69CBF2'
|
||
// }, {
|
||
// offset: 1,
|
||
// color: '#69CBF2'
|
||
// }]),
|
||
// barBorderRadius: 50,
|
||
// borderWidth: 0,
|
||
// }
|
||
// },
|
||
// }
|
||
]
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
|
||
option3 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#FFF', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
splitLine: { //分割线
|
||
show: true,
|
||
color: "#fff",
|
||
lineStyle: {
|
||
color: '#24293d'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 40,
|
||
show: true,
|
||
splitNumber: 15,
|
||
color: "#FFF",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
type: 'category',
|
||
data: ['二屯镇', '黄河涯镇', '赵虎镇', '抬头寺镇'],
|
||
splitLine: { //分割线
|
||
show: true,
|
||
color: "#fff",
|
||
lineStyle: {
|
||
color: '#24293d'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#fff', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
show: true,
|
||
splitNumber: 30,
|
||
color: "#FFF",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
}],
|
||
series: [{
|
||
name: '2019年',
|
||
type: 'bar',
|
||
data: [320, 302, 378, 257],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[{
|
||
offset: 0,
|
||
color: '#fe971a'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#fe471b'
|
||
}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
}]
|
||
};
|
||
option4 = {
|
||
tooltip: {
|
||
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
color: ['#00aaff', '#ffe133', '#fe471b'],
|
||
legend: {
|
||
orient: 'horizontal',
|
||
left: 'top',
|
||
top: '0%',
|
||
data: ['已报告检测', '未报告检测', '已逾期'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: [{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['50%', '60%'],
|
||
data: [{
|
||
value: 165,
|
||
name: '已报告检测'
|
||
},
|
||
{
|
||
value: 40,
|
||
name: '未报告检测'
|
||
},
|
||
{
|
||
value: 26,
|
||
name: '已逾期'
|
||
}
|
||
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
var option5 = {
|
||
|
||
tooltip: {},
|
||
color: ['#4F9AFF', '#5ADBDC', '#f06b42'],
|
||
legend: {
|
||
orient: 'vertical', //horizontal',
|
||
right: '5%',
|
||
data: ['已报告评价', '未报告评价', '已逾期'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
grid: {
|
||
top: '15%',
|
||
bottom: 150,
|
||
left: 100,
|
||
right: '10%'
|
||
},
|
||
series: [
|
||
// 主要展示层的
|
||
{
|
||
radius: ['40%', '81%'],
|
||
center: ['50%', '50%'],
|
||
type: 'pie',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
formatter: '{b}{d}%',
|
||
textStyle: {
|
||
fontSize: 14
|
||
},
|
||
//position:['50%','50%'],// 'outside',
|
||
top: 10
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: true,
|
||
length: 5, //分支长度
|
||
length2: 5,
|
||
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
data: [{
|
||
name: '已报告评价',
|
||
value: 40
|
||
},
|
||
{
|
||
name: '未报告评价',
|
||
value: 45
|
||
},
|
||
{
|
||
name: '已逾期',
|
||
value: 10
|
||
},
|
||
]
|
||
},
|
||
// 边框的设置
|
||
{
|
||
radius: ['40%', '44%'],
|
||
center: ['50%', '50%'],
|
||
type: 'pie',
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
animation: false,
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
data: [{
|
||
value: 1,
|
||
itemStyle: {
|
||
color: 'rgba(250,250,250,0.3)'
|
||
}
|
||
}]
|
||
},
|
||
{
|
||
name: '外边框',
|
||
type: 'pie',
|
||
clockWise: false, //顺时加载
|
||
hoverAnimation: false, //鼠标移入变大
|
||
center: ['50%', '50%'],
|
||
radius: ['65%', '65%'],
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data: [{
|
||
value: '',
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
borderColor: '#0b5263'
|
||
}
|
||
}
|
||
}]
|
||
}
|
||
]
|
||
}
|
||
myChart5.setOption(option5);
|
||
myChart4.setOption(option4);
|
||
myChart3.setOption(option3);
|
||
myChart2.setOption(option2);
|
||
myChart.setOption(option);
|
||
</script>
|
||
<script type="text/javascript">
|
||
var myChart1 = echarts.init(document.getElementById('main'));
|
||
|
||
$(document).ready(function() {
|
||
var dataList = [{
|
||
name: '德城区',
|
||
value: 3000
|
||
}, //randomValue()
|
||
{
|
||
name: '武陵县',
|
||
value: 2000
|
||
},
|
||
{
|
||
name: '宁津县',
|
||
value: 4000
|
||
},
|
||
{
|
||
name: '乐陵市',
|
||
value: 5000
|
||
},
|
||
{
|
||
name: '庆云县',
|
||
value: 1000
|
||
},
|
||
{
|
||
name: '陵城区',
|
||
value: 2800
|
||
},
|
||
{
|
||
name: '夏津县',
|
||
value: 3500
|
||
},
|
||
{
|
||
name: '平原县',
|
||
value: 4230
|
||
},
|
||
{
|
||
name: '临邑县',
|
||
value: 5060
|
||
},
|
||
{
|
||
name: '禹城市',
|
||
value: 2020
|
||
},
|
||
{
|
||
name: '武城县',
|
||
value: 2530
|
||
},
|
||
{
|
||
name: '齐河县',
|
||
value: 4800
|
||
}
|
||
]
|
||
|
||
function randomValue() {
|
||
return Math.round(Math.random() * 1000);
|
||
}
|
||
$.get('js/370503.Json', function(geoJson) {
|
||
|
||
myChart1.hideLoading();
|
||
//console.log(geoJson)
|
||
echarts.registerMap('河口', geoJson);
|
||
|
||
myChart1.setOption(option = {
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: '{b}<br/>{c}'
|
||
// },
|
||
tooltip: {
|
||
formatter: function(params) {
|
||
return '体检总人数统计' + '<br />' + params.name + ':' + params.value
|
||
} //数据格式化
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
dataView: {
|
||
readOnly: false
|
||
},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 800,
|
||
max: 5000,
|
||
text: ['High', 'Low'],
|
||
textStyle: {
|
||
color: "#FFF"
|
||
},
|
||
realtime: false,
|
||
calculable: true,
|
||
inRange: {
|
||
color: ['lightskyblue', 'yellow', 'orangered']
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'map',
|
||
mapType: '德州', // 自定义扩展图表类型
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true
|
||
}
|
||
}
|
||
},
|
||
data: dataList,
|
||
// 自定义名称映射
|
||
// nameMap: {
|
||
// 'Central and Western': '中西区',
|
||
// 'Eastern': '东区',
|
||
// 'Islands': '离岛',
|
||
// 'Kowloon City': '九龙城',
|
||
// 'Kwai Tsing': '葵青',
|
||
// 'Kwun Tong': '观塘',
|
||
// 'North': '北区',
|
||
// 'Sai Kung': '西贡',
|
||
// 'Sha Tin': '沙田',
|
||
// 'Sham Shui Po': '深水埗',
|
||
// 'Southern': '南区',
|
||
// 'Tai Po': '大埔',
|
||
// 'Tsuen Wan': '荃湾',
|
||
// 'Tuen Mun': '屯门',
|
||
// 'Wan Chai': '湾仔',
|
||
// 'Wong Tai Sin': '黄大仙',
|
||
// 'Yau Tsim Mong': '油尖旺',
|
||
// 'Yuen Long': '元朗'
|
||
// }
|
||
}]
|
||
});
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|