<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>深圳市2020年重大项目计划编制</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0">
<#include "/header.html">
<link href="${request.contextPath}/statics/css/index.css" rel="stylesheet">
<style type="text/css">
.tab-box-a{
transition:0s!important;
}
.u-jgfx-cont .u-jgfx-sjtj-list .shuju span1{min-width:95px;}
.radius {
padding:10px 10px 15px 10px;
}
.min-font{
font-size:20px;
color: #FFD800;
}
.max-font{
font-size:24px;
padding-top: 10px;
display: block;
}
</style>
</head>
<body>
<div class="u-container">
<div class="u-logo2"><img src="${request.contextPath}/statics/images/logo2.png" alt=""></div>
<!--菜单,下拉-->
<div class="u-nav">
<div class="pics" id="pics">
<a href="index.html">首 页</a>
<a href="http://ts111.szfgw.gov/zdxm/index.html" target='_blank'>2019年执行情况</a>
<a data-role="menu1" href="apqk.html" class="arrangements"></a>
<a href="zytd.html">主要特点</a>
<a href="bzcs.html">保障措施</a>
</div>
</div>
<div class="tab-box2">
<div class="tab">
<ul>
<li><a href="apqk.html" onclick="selecttag('0',this)">安排原则</a> </li>
<li><a href="ztgk.html" onclick="selecttag('1',this)">总体概况</a> </li>
<li class="selecttag"><a href="jgfx.html" onclick="selecttag('2',this)">结构分析</a> </li>
<li><a href="qsfx.html" onclick="selecttag('3',this)">趋势分析</a> </li>
</ul>
</div>
<div class="z-tagContent">
<div class="tagContent"></div>
<div class="tagContent"></div>
<div class="tagContent selecttag">
<div class="u-nav2">
<ul>
<li><a href="jsjd.html">建设阶段</a></li>
<li><a href="jsjd2.html">投资金额规模</a></li>
<li><a href="jsjd3.html">行业划分</a></li>
<li><a href="jsjd4.html">行政区划</a></li>
<li><a href="jsjd5.html">投资来源</a></li>
<li><a href="jsjd6.html">责任单位</a></li>
</ul>
</div>
</div>
<div class="tagContent"></div>
</div>
</div>
<div class="u-jgfx-cont">
<div class="u-jgfx-sjtj">
<div class="u-jgfx-sjtj-list">
<ul>
</ul>
</div>
</div>
<div class="u-jgfx-tjbk fl">
<div class="tab-box">
<div class="tab">
<ul>
<li class="selecttag"> <a onclick="selecttag('0',this)" class="tab-box-a">按资金来源统计</a> </li>
<li><a onclick="selecttag('1',this)" class="tab-box-a">按投资规模统计</a> </li>
</ul>
</div>
<div class="z-tagContent">
<div class="tagContent selecttag">
<div class="u-qsfx-img">
<div id="zytj" style="width: 600px;height: 540px;"></div>
</div>
</div>
<div class="tagContent">
<div class="u-qsfx-img">
<div id="gmtj" style="width: 600px;height: 540px;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="u-jgfx-tjbk u-jgfx-tjbk2 fl">
<div class="u-jgfx-bt"><span>●</span>按行业划分统计</div>
<div class="u-qsfx-img">
<div id="hygh" style="width: 600px;height: 550px;"></div>
</div>
</div>
<div class="u-jgfx-tjbk fr">
<div class="tab-box">
<div class="tab">
<ul>
<li class="selecttag"> <a onclick="selecttag('0',this)" class="tab-box-a">按区域分布统计</a> </li>
<li><a onclick="selecttag('1',this)" class="tab-box-a">按责任单位项目统计</a> </li>
</ul>
</div>
<div class="z-tagContent">
<div class="tagContent selecttag">
<div class="u-qsfx-img">
<div id="qyfb" style="width: 600px;height: 550px;"></div>
</div>
</div>
<div class="tagContent">
<div class="u-jgfx-tjbk-select">
<select id="change_opt" name="options" onchange="selectOption(this)"></select>
</div>
<div class="u-qsfx-img">
<div id="zrdw" style="width: 600px;height: 550px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="${request.contextPath}/statics/js/modules/srceen2/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/libs/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/main.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/libs/echarts.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/utils.js"></script>
<script type="text/javascript">
var zyChart = echarts.init(document.getElementById("zytj"));
var gmChart = echarts.init(document.getElementById("gmtj"));
var hyChart = echarts.init(document.getElementById("hygh"));
var qyChart = echarts.init(document.getElementById("qyfb"));
var zrChart = echarts.init(document.getElementById("zrdw"));
var _el = 1;
var _dts = 1;
var _index = 1;
var _dtr = 1;
var _xmtj = 1;
$(".pics a").eq(2).addClass("cur");
$(".u-jgfx-sjtj-list ul").on('click', 'li.nian', function(el){
// console.log(111)
var index = $(this).index()
_el=index+1;
// 选中的TAB 字体加粗
$(this).children()[1].children[1].style.fontSize = '42px'
$(this).siblings().children('div').children('span3').css('font-size', '36px')
_index = _el // Number(el.target.getAttribute("data-index"))
$(this).addClass("cur").siblings().removeClass("cur");
EchartOneLoadData(index+1);
EchartThreeLoadData(index+1);
EchartFourLoadData(index+1);
EchartFiveLoadData(index+1,1);
// console.log(_el)
});
// 鼠标按下开关
var flag1 = true, time1 = null, max1 = false;
var flag2 = true, time2 = null, max2 = false;
// 鼠标按下
qyChart.on('mousedown', function(){
var options = qyChart.getOption();
if(flag1) {
flag1 = false;
time1 = setInterval(function () {
if(options.dataZoom[0].start < 11 && !max1){
options.dataZoom[0].start += 1
options.dataZoom[0].end += 1
} else if(options.dataZoom[0].start > 0 && max1){
options.dataZoom[0].start -= 1
options.dataZoom[0].end -= 1
} else {
max1 = !max1;
flag1 = true;
clearInterval(time1);
}
qyChart.setOption(options, true);
}, 100)
}
})
// 鼠标松开
qyChart.on('mouseup', function(){
flag1 = true;
clearInterval(time1)
})
// 鼠标按下
zrChart.on('mousedown', function(){
var options = zrChart.getOption();
if(flag2) {
flag2 = false;
time2 = setInterval(function () {
if(options.dataZoom[0].start < 11 && !max2){
options.dataZoom[0].start += 1
options.dataZoom[0].end += 1
} else if(options.dataZoom[0].start > 0 && max2){
options.dataZoom[0].start -= 1
options.dataZoom[0].end -= 1
} else {
max2 = !max2;
flag2 = true;
clearInterval(time2);
}
zrChart.setOption(options, true);
}, 100)
}
})
// 鼠标松开
zrChart.on('mouseup', function(){
flag2 = true;
clearInterval(time2)
})
function EchartOneOption(one,el) {
if(el == 1){
var chartData = [
{value: one[0], name: '政府投资'},
{value: one[1], name: '社会投资'}
];
return {
backgroundColor: 'transparent',
color: ['rgba(0,150,255,1)', 'rgba(136,249,250,1)'],
tooltip: {
trigger: "item",
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff',
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: '<div class=\"radius\"><span class=\"min-font\">年度投资 - {b}</span><br/><span class=\"max-font\">{c}(亿元) ({d}%)</span></div>'
},
title: [{
text: '资金来源',
x: 'center',
top: '38.5%',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
}
}],
legend: {
show:true,
left: "center",
bottom: 35,
itemWidth: 20,
itemHeight: 10,
itemGap: 80,
textStyle: {
rich:{
name: {
fontSize: 18,
color: '#fff',
padding: [0,0,17,3]
},
percent: {
fontSize: 18,
color: '#fff',
padding: [-30, 5, 0, -2],
}
}
},
data: [
'政府投资','社会投资'
],
formatter: function(name) {
// 获取legend显示内容
var data = chartData;
var total = _dtr;
var tarValue = 0;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
tarValue = data[i].value;
}
}
// var percent = (tarValue / total * 100).toFixed(2);
return '{name|'+ name + '} ' + '\n {percent|' +"年度投资 " + tarValue + '(亿元)}';
}
},
series: [
{
type: 'gauge',
splitNumber: 12, //刻度数量
min: 0,
max: 100,
radius: '52%', //图表尺寸
center: ['50%', '41%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, 'rgba(32,231,255,.5)']
]
}
},
axisTick: {
show: false,
lineStyle: {
color: 'auto',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: 15,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
},
{
type: 'gauge',
splitNumber: 12, //刻度数量
min: 0,
max: 100,
radius: '50%', //图表尺寸
center: ['50%', '41%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0, 'rgba(32,231,255,.5)'],
[1, 'rgba(32,231,255,.5)']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: 'rgba(32,231,255,.5)',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: 10,
lineStyle: {
color: 'rgba(32,231,255,.5)',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 2,
offsetCenter: [0, '0%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'rgba(0,0,0,0);',
fontSize: 0,
}
}
},
{
type: 'pie',
radius: ["38%", "41%"],
center: ["50%", "41%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
hoverOffset: 5,
hoverAnimation: false,
data: chartData
}
]
}
}else if(el == 2){
var chartData = [
{value: one[0], name: '政府投资'},
{value: one[1], name: '社会投资'},
{value: one[2], name: '政府+社会投资'},
];
return {
backgroundColor: 'transparent',
color: ['rgba(0,150,255,1)', 'rgba(136,249,250,1)', 'rgba(255,255,255,1)'],
tooltip: {
trigger: "item",
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff',
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: '<div class=\"radius\"><span class=\"min-font\">{b}</span><br/><span class=\"max-font\">{c}(个) ({d}%)</span></div>'
},
title: [{
text: '资金来源',
x: 'center',
top: '38.5%',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
}
}],
legend: {
show:true,
left: "center",
bottom: 35,
itemWidth: 20,
itemHeight: 10,
itemGap: 30,
textStyle: {
rich:{
name: {
fontSize: 18,
color: '#fff',
padding: [0,0,17,3]
},
percent: {
fontSize: 18,
color: '#fff',
padding: [-30, 5, 0, -2],
}
}
},
data: [
'政府投资','社会投资','政府+社会投资'
],
formatter: function(name) {
// 获取legend显示内容
var data = chartData;
var total = _xmtj;
var tarValue = 0;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
tarValue = data[i].value;
}
}
// var percent = (tarValue / total * 100).toFixed(2);
return '{name|'+ name + '} ' + '\n {percent|' + tarValue + '(个)}';
}
},
series: [
{
type: 'gauge',
splitNumber: 12, //刻度数量
min: 0,
max: 100,
radius: '52%', //图表尺寸
center: ['50%', '41%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, 'rgba(32,231,255,.5)']
]
}
},
axisTick: {
show: false,
lineStyle: {
color: 'auto',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: 15,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
},
{
type: 'gauge',
splitNumber: 12, //刻度数量
min: 0,
max: 100,
radius: '50%', //图表尺寸
center: ['50%', '41%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0, 'rgba(32,231,255,.5)'],
[1, 'rgba(32,231,255,.5)']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: 'rgba(32,231,255,.5)',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: 10,
lineStyle: {
color: 'rgba(32,231,255,.5)',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 2,
offsetCenter: [0, '0%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'rgba(0,0,0,0);',
fontSize: 0,
}
}
},
{
type: 'pie',
radius: ["38%", "41%"],
center: ["50%", "41%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
hoverOffset: 5,
hoverAnimation: false,
data: chartData
}
]
}
}else{
var chartData = [
{value: one[0], name: '政府投资'},
{value: one[1], name: '社会投资'}
];
return {
backgroundColor: 'transparent',
color: ['rgba(0,150,255,1)', 'rgba(136,249,250,1)'],
tooltip: {
trigger: "item",
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff',
padding: [50,0,0,0],
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: '<div class=\"radius\"><span class=\"min-font\">总投资 - {b}</span><br/><span class=\"max-font\">{c}(亿元) ({d}%)</span></div>'
},
title: [{
text: '投资来源金额',
x: 'center',
top: '38.5%',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
}
}],
legend: {
show:true,
left: "center",
bottom: 35,
itemWidth: 20,
itemHeight: 10,
itemGap: 80,
textStyle: {
rich:{
name: {
fontSize: 18,
color: '#fff',
padding: [0,0,17,3]
},
percent: {
fontSize: 18,
color: '#fff',
padding: [-30, 5, 0, -2],
}
}
},
data: ['政府投资','社会投资'],
formatter: function(name) {
// 获取legend显示内容
var data = chartData;
var total = _dts;
var tarValue = 0;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
tarValue = data[i].value;
}
}
// var percent = (tarValue / total * 100).toFixed(2);
return '{name|'+ name + '} ' + '\n {percent| 总投资 ' + tarValue + '亿元}';
}
},
series: [
{
type: 'gauge',
splitNumber: 12, //刻度数量
min: 0,
max: 100,
radius: '52%', //图表尺寸
center: ['50%', '41%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, 'rgba(32,231,255,.5)']
]
}
},
axisTick: {
show: false,
lineStyle: {
color: 'auto',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: 15,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
},
{
type: 'gauge',
splitNumber: 12, //刻度数量
min: 0,
max: 100,
radius: '50%', //图表尺寸
center: ['50%', '41%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0, 'rgba(32,231,255,.5)'],
[1, 'rgba(32,231,255,.5)']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: 'rgba(32,231,255,.5)',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: 10,
lineStyle: {
color: 'rgba(32,231,255,.5)',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 2,
offsetCenter: [0, '0%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'rgba(0,0,0,0);',
fontSize: 0,
}
}
},
{
type: 'pie',
radius: ["38%", "41%"],
center: ["50%", "41%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
hoverOffset: 5,
hoverAnimation: false,
data: chartData
}
]
}
}
}
function EchartTwoOption(list, el) {
var arr = ['小于10亿', '10至50亿', '50至100亿', '100亿以上']
var unitTxt = _index === 2 ? "(个)": "(亿元)"
var dataList=[];
if (el === 2) {
dataList.push(
{value: list.lessThanBillionNumber, name: arr[0], number:list.lessThanBillion},
{value: list.lessThanFiftyBillionNumber, name: arr[1], number:list.lessThanFiftyBillion},
{value: list.lessThanHundredBillionNumber, name: arr[2], number:list.lessThanHundredBillion},
{value: list.moreThanHundredBillionNumber, name: arr[3], number:list.moreThanHundredBillion}
)
} else {
dataList.push(
{value: list.lessThanBillion, name: arr[0], number:list.lessThanBillionNumber},
{value: list.lessThanFiftyBillion, name: arr[1], number:list.lessThanFiftyBillionNumber},
{value: list.lessThanHundredBillion, name: arr[2], number:list.lessThanHundredBillionNumber},
{value: list.moreThanHundredBillion, name: arr[3], number:list.moreThanHundredBillionNumber}
)
}
return {
backgroundColor: 'transparent',
color: ['rgba(0,255,255,1)', 'rgba(255,248,163,1)', 'rgba(0,150,255,1)', 'rgba(156,119,233,1)'],
tooltip: {
trigger: "item",
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff'
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: function (v, k) {
// console.log(v,"v",v.data.value,"v.data.value ");
var txt = '', money = 0;
var typeMon="";
if(el == 1){
AnnualInvestment="年度投资 - "
typeMon=v.data.value.toFixed(2)
}else if(el == 2){
AnnualInvestment=""
typeMon=v.data.value
}else{
AnnualInvestment="总投资 - "
typeMon=v.data.value.toFixed(2)
}
if (el === 2) {
txt = '年度投资 - '
money = v.data.number + '(亿元)'
} else {
// txt = '项目个数'
money = v.data.number + '(个)'
}
// 年度投资的总金额更改
var vb=v.percent.toFixed(1)
return '<div class=\"radius\"><span class=\"min-font\">'+ txt + AnnualInvestment + v.data.name +'</span><span class=\"max-font\">'+ typeMon + ''+unitTxt+' ('+ vb +'%)</span><span class=\"max-font\">' +' '+ money +'</span></div>'
}
},
title: [{
text: '投资规模统计',
x: 'center',
top: '38.5%',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: 'bold'
}
}],
legend: [{
left: 60,
type: 'plain',
bottom: 5,
orient: 'vertical',
itemWidth: 20,
itemHeight: 10,
itemGap: 20,
// x: 'right',
// padding: [10, 0, 0, 0],
textStyle: {
fontSize: 18,
// height:
// lineHeight: 30,
color: '#fff',
padding: [25, 25, 0, 25]
},
data: [{name: '小于10亿'}, {name: '50至100亿'}],
formatter: function(name) {
// 获取legend显示内容
var tarValue = 0;
var typeName="";
for (var i = 0; i < dataList.length; i++) {
// console.log(two,"two");
if(arr[i] === name) {
tarValue = dataList[i].value === null || dataList[i].value === undefined ? 0 : dataList[i].value
if(el !== 2){
tarValue = tarValue.toFixed(1)
}
if(el==1){
typeName="年度投资 "
}else if(el==2){
typeName=""
}else if(el==3){
typeName="总投资 "
}
return name+'\n'+typeName+tarValue+ unitTxt
}
}
}
},{
right : '0',
type: 'plain',
bottom: 5,
orient: 'vertical',
itemWidth: 20,
itemHeight: 10,
itemGap: 20,
// x: 'right',
// padding: [10, 0, 0, 0],
textStyle: {
fontSize: 18,
// height:
// lineHeight: 30,
color: '#fff',
padding: [25, 25, 0, 25]
},
data: [{name: '10至50亿'}, {name: '100亿以上'}],
formatter: function(name) {
// 获取legend显示内容
var tarValue = 0;
var typeName="";
for (var i = 0; i < dataList.length; i++) {
if(arr[i] === name) {
tarValue = dataList[i].value === null || dataList[i].value === undefined ? 0 : dataList[i].value
if(el !== 2){
tarValue = tarValue.toFixed(1)
}
if(el==1){
typeName="年度投资 "
}else if(el==2){
typeName=""
}else if(el==3){
typeName="总投资 "
}
return name+'\n'+typeName +tarValue+ unitTxt
}
}
}
}],
series: [
{
name: "",
type: "pie",
radius: ["48%", "53%"],
center: ["50%", "41%"],
itemStyle: {
borderWidth: 3,
borderColor: "#040d4d"
},
label: {
normal: {
show: false
}
},
hoverAnimation: false,
hoverOffset: 5,
data: dataList
},
{
name: '',
type: 'pie',
tooltip: {
show: false
},
startAngle: 90,
radius: ['48%', '40%'],
hoverAnimation: false,
center: ['50%', '41%'],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: 'rgba(255, 255, 255, 0)',
}
},
data: [{
value: 100,
}]
},
{
name: '统计',
type: 'gauge',
splitNumber: 12, //刻度数量
min: 0,
max: 100,
radius: '40%', //图表尺寸
center: ['50%', '41%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0, 'rgba(32,231,255,.5)'],
[1, 'rgba(32,231,255,.5)']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: 'rgba(32,231,255,.5)',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: 10,
lineStyle: {
color: 'rgba(32,231,255,.5)',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 2,
offsetCenter: [0, '0%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: 'rgba(0,0,0,0);',
fontSize: 0,
}
}
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: ['35%', '40%'],
hoverAnimation: false,
center: ['50%', '41%'],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: 'rgba(255, 255, 255, 0)',
}
},
tooltip: {
show: false
},
data: [{
value: 100,
}]
},
{
name: '',
type: 'pie',
startAngle: 90,
radius: ['32.5%', '35%'],
hoverAnimation: false,
center: ['50%', '41%'],
smooth:false,
itemStyle: {
normal: {
labelLine: {
show: false,
type:'dotted'
},
color: 'rgba(1,56,97,1)',
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
tooltip: {
show: false
},
data: [{
value: 100,
}]
}
]
}
}
function EchartThreeOption(config, _el, countNum) {
// console.log(config.yAxis,"config", config.seriesData);
var dataList = config.seriesData;
var totals = _dts; // 数据总数
var unitTxt = _index === 2 ? '个数（个）' : '金额（亿元）'
var unitTxtNumber = _index === 2 ? '(个)' : '(亿元)'
return {
backgroundColor: 'transparent',
xAxis: {
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 16
},
axisTick: {
show: false
},
max: function (value) {
return value.max - 0
}
},
grid: {
left: '2%',
right: '3%',
bottom: '3%',
width: "90%",
containLabel: true
},
yAxis: [{
name: unitTxt,
nameTextStyle: {
padding: [0, 0, 0, 720],
// 该轴的
fontSize: 14,
color: '#0af8fa'
},
splitLine: {
show: false
},
axisLine: { //y轴
show: false
},
type: 'category',
axisTick: {
show: false
},
data: config.yAxis,
axisLabel: {
color: '#fff',
fontSize: 14
}
}],
tooltip:{
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff'
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: function (v) {
var txt = '', unit = '', typeMon=''
if(_el === 2) {
txt = '年度投资总金额'
unit = '(亿元)'
} else{
txt = '项目个数'
unit = '(个)'
}
if(_el==1){
typeMon=v[0].data.value.toFixed(2)
}else if(_el==2){
typeMon=v[0].data.value
}else if(_el==3){
typeMon=v[0].data.value.toFixed(2)
}
var num = (v[0].data.value / countNum) * 100;
console.log(v[0].data.value.toFixed(2),"v[0].data.value");
return "<span class=\'min-font\'>"+v[0].axisValue + "</span><span class=\'max-font\'>"+ typeMon + " " +unitTxtNumber+ " ("+ num.toFixed(1) +'%)'+"</span><span class=\'max-font\'>"+ txt + " "+ v[0].data.number + unit +"</span>"
}
},
series: [
{
// 内
type: "bar",
barWidth: 18,
legendHoverLink: false,
silent: true,
itemStyle: {
emphasis: {
barBorderRadius: 30
},
normal: {
// color: "#0099ff",
//柱形图圆角，初始化效果
barBorderRadius:[10, 10, 10, 10],
// label: {
// show: true,//是否展示
// textStyle: {
// fontWeight:'bolder',
// fontSize : '12',
// fontFamily : '微软雅黑',
// }
// }
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
'rgba(0,122,254,1)', 'rgba(9,247,204,1)'
].map((color, offset) => ({
color,
offset
}))), // 渐变
},
},
label: {
show: true,
position: 'right', // 位置
color: '#0af8fa',
fontSize: 14,
fontWeight: 'Regular', // 加粗
distance: 0 // 距离
}, // 柱子上方的数值
data: config.seriesData,
z: 1,
animationEasing: "elasticOut"
},
{
// 外边框
type: "pictorialBar",
symbol: "rect",
symbolBoundingData: totals,
itemStyle: {
normal: {
color: "none"
}
},
label: {
normal: {
formatter: (params) => {
var text;
if (params.dataIndex == 1) {
text = '{f| ' + params.data + '}';
} else if (params.dataIndex == 2) {
text = '{f| ' + params.data + '}';
} else if (params.dataIndex == 3) {
text = '{f| ' + params.data + '}';
} else {
text = '{f| ' + params.data + '}';
}
return text;
},
rich: {
f: {
color: "#ffffff"
}
},
position: 'right',
distance: 0, // 向右偏移位置
show: true
}
},
z: 0,
animationEasing: "elasticOut"
}
]
}
}
function EchartFourOption(config, _el , countNum) {
var flag = false
if (config.seriesData.elngth > 10) {
flag = true
}
var lineOption = {
lineStyle: {
color: 'rgba(151,151,151,0.5)',
type: 'solid'
}
}
var unitTxt = _index === 2 ? '个数（个）' : '金额（亿元）';
var unit = _index === 2 ? '(个)' : '(亿元)'
var unitTxtNumber = _index === 2 ? '(个)' : '(亿元)'
return {
backgroundColor: 'transparent',
grid: {
top: '10%',
right: '1%',
left: '8%',
bottom: '14%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff'
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: function (v) {
var txt = '', unit = ''
if(_el === 2) {
txt = '年度投资总金额'
unit = '（亿元）'
} else{
txt = '项目个数'
unit = '（个）'
}
var num = (v[0].data.value / countNum) * 100;
return "<span class=\'min-font\'>"+v[0].axisValue + "</span><span class=\'max-font\'>"+ v[0].data.value + " " +unitTxtNumber+ " ("+ num.toFixed(1) +'%)'+"</span><span class=\'max-font\'>"+ txt + " "+ v[0].data.number + unit +"</span>"
}
},
xAxis: [{
type: 'category',
data: config.xAxis,
axisLine: lineOption,
splitNumber: 1,
// minInterval: 1,
// maxInterval: 2,
interval: 1,
axisTick: {
show: false,
length: 10
},
axisLabel: {
margin: 10,
color: '#fff',
interval: 0,
rotate: 45,
textStyle: {
fontSize: 14
},
},
}],
dataZoom: [{
height: 15,
type: 'slider',
show: flag, // 是否显示x轴的滚动条
endValue:9, // 横轴显示几条数据
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
borderColor: "#156eff",
fillerColor: '#269cdb',
borderRadius:5,
backgroundColor: '#156fff',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
left: '8%',
bottom: 0,
// start: 0.1,
// end: 90 //初始化滚动条
}],
yAxis: [{
name: unitTxt,
nameTextStyle: {
// padding: [0, 0, 10, 1000],
fontSize: 16,
color: '#0af8fa'
},
splitLine: {show: false}, //去除网格线
axisLabel: {
formatter: '{value}',
color: '#fff',
fontSize: 14
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}],
series: [{
type: 'bar',
data: config.seriesData,
show: true,
barWidth: '20%',
barMaxWidth: '20%',
barCategoryGap: 1,
itemStyle: {
emphasis: {
barBorderRadius: 30
},
normal: {
//柱形图圆角，初始化效果
barBorderRadius:[10, 10, 0, 0],
// color: "#0099ff",
// borderWidth: 2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#99CCFF'
}, {
offset: 1,
color: '#0099ff'
}])
},
}
}]
}
}
function EchartFiveOption(config, _el, test, countNum) {
var flag = false
if (config.seriesData.length > 10) {
flag = true
}
var lineOption = {
lineStyle: {
color: 'rgba(151,151,151,0.5)',
type: 'solid'
}
}
var unitTxt = _index === 2 ? '个数（个）' : '金额（亿元）'
var unit = _index === 2 ? '(个)' : '(亿元)'
var unitTxtNumber = _index === 2 ? '(个)' : '(亿元)'
return {
backgroundColor: 'transparent',
grid: {
top: '10%',
right: '1%',
left: '8%',
bottom: '14%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff'
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: function (v) {
var txt = '', unit = ''
if(_el === 2) {
txt = '年度投资总金额'
unit = '（亿元）'
} else{
txt = '项目个数'
unit = '（个）'
}
var num = (v[0].data.value / countNum) * 100;
return "<span class=\'min-font\'>"+v[0].axisValue + "</span><span class=\'max-font\'>"+ v[0].data.value + " " +unitTxtNumber+ " ("+ num.toFixed(1) +'%)'+"</span><span class=\'max-font\'>"+ txt + " "+ v[0].data.number + unit +"</span>"
}
},
xAxis: [{
type: 'category',
data: config.xAxis,
axisLine: lineOption,
splitNumber: 1,
// minInterval: 1,
// maxInterval: 2,
interval: 1,
axisTick: {
show: false,
length: 10
},
axisLabel: {
margin: 10,
color: '#fff',
interval: 0,
rotate: 45,
textStyle: {
fontSize: 14
},
},
}],
dataZoom: [{
height: 15,
type: 'slider',
show: flag, // 是否显示x轴的滚动条
endValue:9, // 横轴显示几条数据
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
borderColor: "#156eff",
fillerColor: '#269cdb',
borderRadius:5,
backgroundColor: '#156fff',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
left: '8%',
bottom: 0,
// start: 0.1,
// end: 90 //初始化滚动条
}],
yAxis: [{
name: unitTxt,
nameTextStyle: {
// padding: [0, 0, 10, 1000],
fontSize: 16,
color: '#0af8fa'
},
splitLine: {show: false}, //去除网格线
axisLabel: {
formatter: '{value}',
color: '#fff',
fontSize: 14
},
axisTick: {
show: false
},
min: 0,
axisLine: {
show: false
}
}],
series: [
{
type: 'bar',
data: config.seriesData,
show: true,
barWidth: 20,
barCategoryGap: 1,
itemStyle: {
emphasis: {
barBorderRadius: 30
},
normal: {
//柱形图圆角，初始化效果
barBorderRadius:[5, 5, 5, 5],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(4,73,80,1)'
}, {
offset: 1,
color: 'rgba(78,94,84,1)'
}])
}
}
},
{
// name: '年度计划投资',
type: 'scatter',
symbolOffset: [0, 5], //相对于原本位置的偏移量
data: config.seriesData,
label: {
normal: {
show: false,
}
},
symbolSize: [8,5],
itemStyle: {
borderColor: '#D9FF92',
borderWidth: 10
},
tooltip: {
show: false
},
z: 2
},
{
// name: '年度计划投资',
type: 'scatter',
symbolOffset: [0, 0], //相对于原本位置的偏移量
data: test,
label: {
normal: {
show: false,
}
},
symbolSize: [8,5],
itemStyle: {
borderColor: '#829958',
borderWidth: 10
},
tooltip: {
show: false
},
z: 2
}
]
}
}
function EchartOneLoadData(el) {
$.ajax({
url: baseURL + '/zdxmjhbz/getSourcesScaleOfInvest?type=' + el,
type: 'get',
async: false,
datatype: 'json',
success: function (data) {
var data = data.data;
if(el == 1){
data.socialInvest = _dtr - data.governmentInvest;
zyChart.setOption(EchartOneOption([(data.governmentInvest).toFixed(2), (data.socialInvest).toFixed(2)],el));
}else if(el == 2){
zyChart.setOption(EchartOneOption([data.governmentInvest, data.socialInvest, data.governmentSocialInvest],el));
}else{
data.socialInvest = _dts - data.governmentInvest;
zyChart.setOption(EchartOneOption([(data.governmentInvest).toFixed(2), (data.socialInvest).toFixed(2)],el));
}
gmChart.setOption(EchartTwoOption(data, el));
}
})
}
function EchartThreeLoadData(el) {
console.log(el,"el");
$.ajax({
url: baseURL + '/zdxmjhbz/getHomePageIndustryDivision?type=' + el,
type: 'get',
async: false,
datatype: 'json',
success: function (res) {
var obj = [], countNum = 0;
var charObj = {
yAxis: [],
seriesData: []
}
var flag = el === 2 ? 'IndustryInvestAmountNumber' : 'IndustryInvestAmount'
var val = el === 2 ? 'IndustryInvestAmount' : 'IndustryInvestAmountNumber'
if(res && res.data && res.data.list) {
res.data.list.sort(function (a, b) {
return a[flag] - b[flag];
});
res.data.list.map(function(item){
obj.push({
name: item.name,
money: item.IndustryInvestAmount,
number: item.IndustryInvestAmountNumber
})
charObj.yAxis.push(item.name)
charObj.seriesData.push({value: item[flag], number: item[val]})
console.log(charObj,"seriesData");
countNum += item[flag]
})
hyChart.setOption(EchartThreeOption(charObj, _el, countNum));
}
}
})
}
function EchartFourLoadData(el) {
$.ajax({
url: baseURL + '/zdxmjhbz/getRegionalAnalysis?type=' + el,
type: 'get',
async: false,
datatype: 'json',
success: function (res) {
var obj = [], countNum = 0;
var charObj = {
xAxis: [],
seriesData: []
}
var flag = el === 2 ? 'investSummaryNumber' : 'investSummary'
var val = el === 2 ? 'investSummary' : 'investSummaryNumber'
if(res && res.data && res.data.list) {
res.data.list.sort(function (a, b) {
return b[flag] - a[flag];
});
res.data.list.map(function(item){
obj.push({
name: item.area,
money: item.investSummary,
number: item.investSummaryNumber
})
charObj.xAxis.push(item.area)
charObj.seriesData.push({value: item[flag], number: item[val]})
countNum += item[flag]
})
qyChart.setOption(EchartFourOption(charObj, _el, countNum));
}
}
})
}
function EchartFiveLoadData(el,unit) {
$.ajax({
url: baseURL + '/zdxmjhbz/getUnitAnalysis?type=' + el +'&unitType='+ unit,
type: 'get',
async: false,
datatype: 'json',
success: function (res) {
var obj = [], countNum = 0, test = [];
var charObj = {
xAxis: [],
seriesData: []
}
var flag = el === 2 ? 'investSummaryNumber' : 'investSummary'
var val = el === 2 ? 'investSummary' : 'investSummaryNumber'
if(res && res.data && res.data.list) {
res.data.list.sort(function (a, b) {
return b[flag] - a[flag];
});
res.data.list.map(function(item){
obj.push({
name: item.responsibilityUnit,
money: item.investSummary,
number: item.investSummaryNumber
})
charObj.xAxis.push(item.responsibilityUnit)
charObj.seriesData.push({value: item[flag], number: item[val]})
test.push(0)
countNum += item[flag]
})
}
zrChart.setOption(EchartFiveOption(charObj, el, test, countNum));
var options=[{name:'区政府',value:1},{name:'市直部门',value:2},{name:'市管单位',value:3}];
var html='';
for (var i=0;i<options.length;i++)
{
if(unit==options[i].value)
{
html+='<option selected value="'+options[i].value+'">'+options[i].name+'</option>';
continue;
}
html+='<option value="'+options[i].value+'">'+options[i].name+'</option>';
}
$('#change_opt').html(html);
}
})
}
function selectOption(obj){
EchartFiveLoadData(_el,obj.value);
}
$.ajax({
url: baseURL + '/zdxmjhbz/getStructureAnalysisHead',
type: 'get',
async :false,
data: {},
datatype: 'json',
success: function (data) {
var data = data.data;
_dts = data.tpi.totalPrjInvest;
_dtr = data.soip.investPlanTotalAmount;
_xmtj = data.ps.prjCount;
$('.u-jgfx-sjtj-list ul').html('' +
' <li class="nian cur" data-index="1">\n' +
' <div class="biaoti">年度计划投资</div>\n' +
' <div class="shuju">\n' +
' <span>总金额：</span><span3>' + formatMoney(toDec(data.soip.investPlanTotalAmount)) + '</span3><span4>亿元</span4><br/>\n' +
' <span>新建项目：</span><span1>' + formatMoney(toDec(data.soip.newInvestPlanTotalAmount)) + '</span1><span4>亿元</span4>\n' +
' </div>\n' +
' <div class="shuju shuju2"><span>续建项目：</span><span1>' + formatMoney(toDec(data.soip.carryingInvestPlanTotalAmount)) + '</span1><span4>亿元</span4></div>\n' +
' </li>\n' +
' <li class="nian" data-index="2">\n' +
' <div class="biaoti">项目统计</div>\n' +
' <div class="shuju">\n' +
' <span>项目数：</span><span3>' + data.ps.prjCount + '</span3><span4>个</span4><br/>\n' +
' <span>前期项目：</span><span1>' + data.ps.prePrjCount + '</span1><span4>个</span4>\n' +
' </div>\n' +
' <div class="shuju shuju2">\n' +
' <span>续建项目：</span><span1>' + data.ps.carryingPrjCount + '</span1><span4>个</span4><br/>\n' +
' <span>新建项目：</span><span1>' + data.ps.newPrjCount + '</span1><span4>个</span4>\n' +
' </div>\n' +
' </li>\n' +
' <li class="nian" data-index="3">\n' +
' <div class="biaoti">项目总投资</div>\n' +
' <div class="shuju">\n' +
' <span>总金额：</span><span3>' + formatMoney(toDec(data.tpi.totalPrjInvest)) + '</span3><span4>亿元</span4><br/>\n' +
' <span>前期项目：</span><span1>' + formatMoney(toDec(data.tpi.prePrjInvest)) + '</span1><span4>亿元</span4>\n' +
' </div>\n' +
' <div class="shuju shuju2">\n' +
' <span>续建项目：</span><span1>' + formatMoney(toDec(data.tpi.carryingPrjInvest)) + '</span1><span4>亿元</span4><br/>\n' +
' <span>新建项目：</span><span1>' + formatMoney(toDec(data.tpi.newPrjInvest )) + '</span1><span4>亿元</span4>\n' +
' </div>\n' +
' </li>' +
'');
EchartOneLoadData(1);
EchartThreeLoadData(1);
EchartFourLoadData(1);
EchartFiveLoadData(1,1);
}
})
</script>
<script type="text/javascript">
$(".pics a").eq(2).addClass("cur");
</script><!--导航选中的JS-->
<script type="text/javascript">
$(function() {
var subMenuId,subMenuLeft,subMenuTop,menuHIde,menuTime;
$("#pics a").hover(function(event) {
$(this).stop();
subMenuId = $(this).data("role");
subMenuLeft = $(this).offset().left;
subMenuTop = $(this).offset().top;
var marLeft = ($('body').width() - 1920)/2;
// console.log(marLeft)
//$(this).addClass(subMenuId)
$("#"+subMenuId).fadeIn(0);
if(marLeft>0){
$("#"+subMenuId).css({
'left': subMenuLeft - marLeft,
'top': subMenuTop+42
});
}else{
$("#"+subMenuId).css({
'left': subMenuLeft,
'top': subMenuTop+42
});
}
$(this).mouseout(function(event) {
$("#"+subMenuId).mouseover(function(event) {
$(this).stop();
/*$(this).start();*/
$(this).fadeIn(0);
}).mouseout(function(event) {
$(this).fadeOut(300);
});
$("#"+subMenuId).fadeOut();
});
})
})
</script><!--导航下拉的JS-->
vue和js jq多个eharts来渲染显示
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
