ECharts Gallery

20:11:45图表已生成
代码
/**
 * 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);
});


// });
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
