ZhiYeJianKang/职业健康平台后端/target/dzzyb/static/quxian/daping.html
2025-02-20 15:25:59 +08:00

1334 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>