echarts cross' } }, legend: { data:['学习时长(小时)'], right:'20%配置项内容和展示
配置项如下
/**
* Created by Administrator on 2018/4/29 0029.
*/
/**
* Created by quincys on 16/12/22.
*/
$(document).ready(function(){
//折线图获取数据
var main_data=[];
main_data=Party;
//定义X轴数据
var data_x=[];
//定义y轴数据
var data_y=[];
for(var i=0;i<main_data.length;i++){
if(main_data[i].ORG_PARENT_CODE=='0'){
data_x.push(main_data[i].ORG_NAME);
}
};
for(var i=0;i<main_data.length;i++){
if(main_data[i].ORG_PARENT_CODE=='0'){
data_y.push(main_data[i].STUDY_TIME);
}
};
//获取新闻的数据
var newData = [];
newData = DJ_News;
var newStrs="";
for(var i=0;i<newData.length;i++){
newStrs+='<li><span class="sOne"><a href='+newData[i].LINK+'>'+newData[i].NEW_TITLE+'</a></span><span class="sTwo" style="line-height:34px;">'+newData[i].TIME+'</span><span class="sNews">'+newData[i].ORG_NAME+'</span></li>';
}
$(".spy ul").html(newStrs);
// var data_1=[];//一级单位
// var data_2=[];//二级单位
// var data_3=[];//三级三位
// //alert(main_data[1].ORG_PARENT_CODE);
// for(var i=0;i<main_data.length;i++){
// if(main.data[i].ORG_PARENT_CODE==" "|| main.data[i].ORG_PARENT_CODE==null){
// data_1.push(main_data[i]);
// }else if(main.data[i].ORG_PARENT_CODE==0){
// data_2.push(main.data[i]);
// }else{
// data_3.push(main.data[i]);
// }
// };
$("#detail").on("click",function(){
$(".popup").toggleClass("hidden");
})
function check(){
$("#dropA>p>span:first").html("省份");
$("#dropB>p>span:first").html("层级");
};
$("#detail").on("click",function(){
$(".details").toggleClass("hidden");
})
$("div.drop").on("click","p",function(){
$(this).next().toggleClass("hidden");
});
$("div.drop>ul").on("click","li",function(){
$(this).parent().prev().children(":first-child").html($(this).html());
$(this).parent().prev().children(":first-child").attr("value",($(this).attr("value")));
$(this).parent().addClass("hidden");
});
$("#mod>div.up>.drop>ul").on("click","li",function(){
var prov=$("#dropA>p>span:first").attr("value");
var cj=$("#dropB>p>span:first").attr("value");
console.log(prov+';'+cj);
//地图
var json1='';
data1=[];
data2=[];
data3=[];
//data4=[];
if(cj=='0'){ json1={'一级':true,'二级':true,'三级':true,'四级':true}; }
else if (cj=='1'){ json1={'一级':true,'二级':false,'三级':false,'四级':false}; }
else if (cj=='2'){ json1={'一级':false,'二级':true,'三级':false,'四级':false}; }
else if (cj=='3'){ json1={'一级':false,'二级':false,'三级':true,'四级':false}; }
//else if (cj=='4'){ json1={'一级':false,'二级':false,'三级':false,'四级':true}; }
option11.legend.selected =json1;
if(prov=='china'){
//$("p>span.first").addClass("hidden");
//$("p>span.second").removeClass("hidden");
for(var i=0; i<len; i++)
{
if(data[i].LEV=='1' && $.trim(data[i].COUNTRY)=='中国' ){ data1.push(data[i]); }
else if(data[i].LEV=='2' && $.trim(data[i].COUNTRY)=='中国' ){ data2.push(data[i]); }
else if(data[i].LEV=='3' && $.trim(data[i].COUNTRY)=='中国' ){ data3.push(data[i]); }
//else if(data[i].LEV=='4' && $.trim(data[i].COUNTRY)=='中国' ){ data4.push(data[i]); }
var xy=[2];
xy[0]=data[i].Y;
xy[1]=data[i].X;
var aa=data[i].NAME;
geoCoordMap[aa]=xy;
}
}else if(prov!='china'){
//$("p>span.first").addClass("hidden");
//$("p>span.second").removeClass("hidden");
for(var i=0; i<len; i++)
{
if(data[i].LEV=='1' && $.trim(data[i].COUNTRY)=='中国' && $.trim(data[i].PROVINCE)==prov){ data1.push(data[i]); }
else if(data[i].LEV=='2' && $.trim(data[i].COUNTRY)=='中国' && $.trim(data[i].PROVINCE)==prov){ data2.push(data[i]); }
else if(data[i].LEV=='3' && $.trim(data[i].COUNTRY)=='中国' && $.trim(data[i].PROVINCE)==prov){ data3.push(data[i]); }
//else if(data[i].LEV=='4' && $.trim(data[i].COUNTRY)=='中国' && $.trim(data[i].PROVINCE)==prov){ data4.push(data[i]); }
var xy=[2];
xy[0]=data[i].Y;
xy[1]=data[i].X;
var aa=data[i].NAME;
geoCoordMap[aa]=xy;
}
}
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].NAME];
if (geoCoord) {
res.push({
name: data[i].NAME,
value: geoCoord.concat(data[i].VALUE),
province: geoCoord.concat(data[i].PROVINCE),
level: data[i].LEV,
});
}
}
return res;
};
option11.series[2].data=convertData(data1.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 999));
option11.series[1].data=convertData(data2.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 999));
option11.series[0].data=convertData(data3.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 999));
// option11.series[0].data=convertData(data4.sort(function(a, b) {
// return b.value - a.value;
// }).slice(0, 999));
var jsName='js/' + prov + ".js";
//引用js文件
$.getScript(jsName,function(){
geo_map[0].map=prov;
option11.geo=geo_map;
myChart11.clear();
myChart11.setOption(option11);
});
});
// for(var k in main_right_top){
// if(main_left_top[k].COUNTRY=='china' && main_left_top[k].CJ==cj){
// main_right_top_data.push(main_right_top[k]);
// }
// }
// for(var k in main_right_top_data){
// d3.push(main_right_top_data[k].YEAR);
// // var add={};
// // var reduce={};
// var add_data=[];
// var reduce_data=[];
// add.name=main_right_top_data[k].YEAR;
// add_data.push(main_right_top_data[k].UNIT_ADD);
// add.value=add.data;
// d4.push
//
// }
/*****折线图*
var myChart1= echarts.init(document.getElementById('trend'));
var main_right_top_data=[]; //过滤后的数据
var timeData=[]; //X轴文本
var data_s1=[]; //折线图_系列1
var data_s2=[]; //折线图_系列2
for( var i=0; i<main_right_top.length; i++ ){
if(main_right_top[i].COUNTRY==country && main_right_top[i].CJ==cj){
main_right_top_data.push(main_right_top[i]);
}
}
for(var i=0; i<main_right_top_data.length; i++)
{
timeData.push(main_right_top_data[i].YEAR);
data_s1.push(main_right_top_data[i].UNIT_ADD);
data_s2.push(main_right_top_data[i].UNIT_REDUCE);
}
option1.series[0].data=data_s1;
option1.series[1].data=data_s2;
myChart1.clear();
myChart1.setOption(option1);
});*/
// var country=$("#gol1").val();
// var cj=$("#dropB>ul>li").val();
/********
* 折线图
* *****/
var myChart1= echarts.init(document.getElementById('trend'));
/*****折线图 *
var main_right_top_data=[]; //过滤后的数据
var timeData=[]; //X轴文本
var data_s1=[]; //折线图_系列1
var data_s2=[]; //折线图_系列2
for( var i=0; i<main_right_top.length; i++ ){
if(main_right_top[i].COUNTRY==country && main_right_top[i].CJ==cj){
main_right_top_data.push(main_right_top[i]);
}
}
for(var i=0; i<main_right_top_data.length; i++)
{
timeData.push(main_right_top_data[i].YEAR);
data_s1.push(main_right_top_data[i].UNIT_ADD);
data_s2.push(main_right_top_data[i].UNIT_REDUCE);
}*/
var option1 = {
title: {
text: '',
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#ff6347' // 主标题文字颜色
}
//subtext: '二级单位'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data:['学习时长(小时)'],
right:'20%',
top:'7%',
textStyle:{
fontSize:12, //文字的大小
fontWeight:'normal', //文字的粗细
color:'rgba(219,97,0,1)' //图例文字的颜色
}
},
// toolbox: {
// show: true,
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
//name:'单位',
nameTextStyle:{
color:'#ff6347' //X轴 名称的颜色
},
axisLine:{ //坐标轴的样式
lineStyle:{
type:'solid',
color:'rgba(176,176,176,1)',
width:'1'
}
},
axisLabel: { //文字倾斜
interval:0,
//rotate:40,倾斜的角度
formatter:function(value) //横向排列转竖直排列
{
return value.split("").join("\n");
},
textStyle:{
color:'rgba(219,97,0,1)'
}
},
boundaryGap: false, //
data: data_x//['航天一院', '航天二院', '航天三院', '航天四院', '航天五院', '航天六院', '航天七院', '航天八院', '航天九院', '航天十院', '航天十一', '航天十二', '航天十三', '航天十四', '航天十五', '航天十六', '航天十七', '航天十八', '航天十九', '航天二十','航天二一','航天二二','航天二三']
},
yAxis: {
type: 'value',
name:'',
min:0,
max:30,
axisLine:{ //坐标轴的样式
lineStyle:{
type:'solid',
color:'rgba(176,176,176,1)',
width:'1'
}
},
nameTextStyle:{
color:'#ff6347' //X轴 名称的颜色
},
splitLine:{
lineStyle:{
type:'dotted'
}
},
axisLabel: {
formatter: '{value} ',
textStyle:{
color:'rgba(219,97,0,1)'
}
},
axisPointer: {
snap: true
}
},
series: [
{
name:'学习时长(小时)',
type:'line',
showSymbol: true,
//symbol: 'circle', //设定为实心点
symbolSize: 12,
smooth: true,
// areaStyle:{ 面积填充颜色
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 0.7, //曲线与X轴围城图形 有颜色的占比
// colorStops: [{
// offset: 0, color: 'rgba(249,19,19,0.8)' // 0% 处的颜色
// }, {
// offset: 1, color: 'rgba(255,96,96,0)' // 100% 处的颜色
// }],
// globalCoord: false // 缺省为 false
// },
// //origin:'end'
// },
itemStyle: {
normal: {
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 0.7, //曲线与X轴围城图形 有颜色的占比
colorStops: [{
offset: 0, color: 'rgba(249,19,19,0.8)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255,96,96,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
data:data_y //[22, 20, 20, 16, 13, 14, 19, 16, 19, 20, 20, 14, 15, 13, 17, 21, 12, 22, 12, 23,24,20,21],
/* markArea: {
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}*/
}
]
};
myChart1.setOption(option1);
/***** 中国地图**/
var myChart11 = echarts.init(document.getElementById('map'));
//四个级别单位
var data1=[];
var data2=[];
var data3=[];
var data4=[];
//单位经纬度
var geoCoordMap={};
var len=data.length;
for(var i=0; i<len; i++){
if(data[i].LEV=='1' ){
data1.push(data[i]);
}else if(data[i].LEV=='2' ){
data2.push(data[i]);
}else if(data[i].LEV=='3' ){
data3.push(data[i]);
}else if(data[i].LEV=='4' ){
data4.push(data[i]);
}
var xy=[2];
xy[0]=data[i].Y;
xy[1]=data[i].X;
var aa=data[i].NAME;
geoCoordMap[aa]=xy;
}
//alert(JSON.stringify(geoCoordMap))
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].NAME];
if (geoCoord) {
res.push({
name: data[i].NAME,
value: geoCoord.concat(data[i].value),
province: geoCoord.concat(data[i].province),
level: data[i].LEV,
});
}
}
return res;
};
//四个级别单位的散点大小
var ss1=24;
var ss2=6;
var ss3=6;
var ss4=6;
//构造中国地图形状
var geo_map=[
{
silent: true,
show: true,
//center: [106.97, 34.71],
zoom: 1.2,
type: 'map',
map: 'china',
aspectScale: 0.75,
itemStyle: {
normal: {
areaColor: '#BA302D',
shadowColor: 'rgba(0, 0, 0, 0.5)',
//shadowBlur: 10,
borderWidth: 0.5,
borderColor: '#ffffff',
},
},
}];
option11 = {
//backgroundColor: 'rgba(0,25,79,0.9)',
//浮动提示
tooltip: {
backgroundColor: 'rgba(0,26,51,0.7)',
shadowBlur: 8,
shadowColor: 'rgba(0,0,0,0.2)',
shadowOpacity:8,
trigger: 'item',
formatter: function(params)
{
var strs='<div><table id="table_info">';
for( var j=0; j<main_data.length; j++){
if(main_data[j].ORG_NAME==params.name){
strs+= '<tr><td id="td1" style="padding-left:35px;">' + main_data[j].ORG_NAME + '</td></tr>'
+ '<tr><td id="td1">党支部数</td><td id="td2" colspan=3>' + main_data[j].PARTY_BRANCH + '个</td></tr>'//个
+ '<tr><td id="td1">党员数</td><td id="td2" colspan=3>' + main_data[j].MEMBER_NUM + '人</td></tr>';//人
// strs+= '<tr><td id="td1">企业名称</td><td id="td2" colspan=3>' + companyinfo[j].NAME + '</td></tr>'
//
// + '<tr><td id="td1">工商注册号</td><td id="td2">' + companyinfo[j].REGISTRATION_NUM + '</td><td id="td1">组织机构代码</td><td id="td2">' + companyinfo[j].DW_DM + '</td></tr>'
//
// + '<tr><td id="td1">统一信用代码</td><td id="td2">' + companyinfo[j].UNIFIEDCREDIT_CODE + '</td><td id="td1">企业类型</td><td id="td2">' + companyinfo[j].TYPE + '</td></tr>'
//
// + '<tr><td id="td1">经营期限</td><td id="td2">' + companyinfo[j].OPERATINGPERIOD + '</td><td id="td1">核准日期</td><td id="td2">' + companyinfo[j].ISSUEDATE + '</td></tr>'
//
// + '<tr><td id="td1">登记机关</td><td id="td2">' + companyinfo[j].REGISTRATIONAUTHORITY + '</td><td id="td1">公司简称</td><td id="td2">' + companyinfo[j].DW_JC + '</td></tr>'
//
// + '<tr><td id="td1">企业地址</td><td id="td2" colspan=3>' + companyinfo[j].ADDRESS + '</td></tr>'
//
// + '<tr><td id="td1">经营范围</td><td id="td2" colspan=3>' + companyinfo[j].SCOPE + '</td></tr>';
}
}
return strs+'</table></div>';
}
},
//国界线效果
series: [
//四级单位散点图系列
// {
// type: 'scatter',
// coordinateSystem: 'geo',
// name: '四级',
// legendHoverLink:true,
// data: convertData(data4.sort(function(a, b) {
// return b.value - a.value;
// }).slice(0, 999)),
// symbol: 'diamond',
// symbolSize: ss4,
// showEffectOn: 'render',
// rippleEffect: {
// brushType: 'stroke'
// },
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: false
// }
//
// },
// itemStyle: {
// normal: {
// color: '#00F6F7',
// opacity: 0.8,
// },
// },
// },
//三级单位散点图系列
{
type: 'scatter',
coordinateSystem: 'geo',
name: '三级',
legendHoverLink:true,
data: convertData(data3.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 999)),
symbol: 'triangle',
symbolSize: ss3,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
}
},
itemStyle: {
normal: {
color: '#F7D31B',
opacity: 0.8,
},
},
},
//二级单位散点图系列
{
type: 'scatter',
coordinateSystem: 'geo',
name: '二级',
legendHoverLink:true,
data: convertData(data2.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 999)),
symbol: 'circle',
symbolSize: ss2,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
}
},
itemStyle: {
normal: {
color: 'rgba(255,235,0,0.7)',
opacity: 0.8,
},
},
},
//一级单位散点图系列
{
type: 'scatter',
coordinateSystem: 'geo',
name: '一级',
legendHoverLink:true,
data: convertData(data1.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 999)),
symbol: 'image://images/copy3.png',
symbolSize: ss1,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
formatter: '{b}',
position: 'top',
show: false
}
},
itemStyle: {
normal: {
color: '#EF1D47',
opacity: 0.8,
borderColor: '#FF9ABB',
borderWidth: 0,
//borderType:'solid',
shadowBlur: 10,
shadowColor: '#000000',
shadowOpacity:0.8,
},
emphasis: {
borderColor: '#ffffff',
borderWidth: 0,
borderType:'solid',
},
},
},
],
//图例
legend: {
textStyle: {
color: '#ccc',
fontSize: 12,
},
itemWidth:24,//图标的宽
itemHeight:24,//图标的高
orient: 'horizontal',
top: '75%',
width: '3%',
left:'2%',
data: ['一级', '二级', '三级']
},
}
option11.geo= geo_map;
myChart11.setOption(option11);
/*********水球图***/
var myChart14 =echarts.init(document.getElementById('radar'));
var option14 = {
series: [{
type: 'liquidFill',
name: 'liquid Fill',
radius: '70%',
shape: 'diamond',
center: ['50%', '50%'],
color: ['#8D0000','#C22020','#FC5959','#FC5959'],
data: [{
name: '',
value: 0.4,
values: Party[1].TOTAL_ORG_NUM,
},Party[1].PEOPLE_UNDER35_OF_ALL-0.1,Party[1].PEOPLE_UNDER35_OF_ALL-0.2,Party[1].PEOPLE_UNDER35_OF_ALL-0.3],
waveAnimation: true,
outline: {
show: true,
itemStyle: {
borderColor: '#AA0F0F',
}
},
label: {
normal: {
formatter: function(param) {
return '青年数:' + '\n\n'
+ param.data.values;
//return ''
},
textStyle: {
color: '#8D0000',
fontSize: 20
}
}
}
}]
};
myChart14.setOption(option14);
var charts = [];
charts.push(myChart1);
charts.push(myChart11);
charts.push(myChart14);
window.onresize = function() {
// document.getElementById('section').style.height=(document.getElementById('main').offsetHeight-document.getElementById('header').offsetHeight)+"px";
// document.getElementById("head").style.width=document.getElementById("header").offsetWidth+"px";
// document.getElementById("head").style.height=document.getElementById("header").offsetHeight+"px";
for(var i = 0; i < charts.length; i++){
charts[i].resize();
}
};
setTimeout(function()
{
window.location.reload();
},3600000);
});
// });
截图如下
