echart四川地图

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="block" uri="/taglib/block"%>
<block:extends name="title">客运站地区分布</block:extends>
<block:extends name="front_js">
    <script type="text/javascript"
        src="${staticDomain}/js/plugins/My97DatePicker/WdatePicker.js"></script>
</block:extends>
<block:extends name="js">
    <script type='text/javascript'
        src="${staticDomain}/js/plugins/uniform/jquery.uniform.min.js"></script>

    <script type='text/javascript'
        src='${staticDomain}/js/plugins/datatables/jquery.dataTables.min.js'></script>
    <script type='text/javascript'
        src="${staticDomain}/js/plugins/select/select2.min.js"></script>
    <script type='text/javascript'
        src='${staticDomain}/js/plugins/shbrush/XRegExp.js'></script>
    <script type='text/javascript'
        src='${staticDomain}/js/plugins/shbrush/shCore.js'></script>
    <script type='text/javascript'
        src='${staticDomain}/js/plugins/shbrush/shBrushXml.js'></script>
    <script type='text/javascript'
        src='${staticDomain}/js/plugins/shbrush/shBrushJScript.js'></script>
    <script type='text/javascript'
        src='${staticDomain}/js/plugins/shbrush/shBrushCss.js'></script>
    <script type='text/javascript' src='${staticDomain}/js/common/page.js'></script>
    <script type='text/javascript'
        src='${staticDomain}/js/plugins/echart/echarts-all.js'></script>
    <script type='text/javascript'
        src='${staticDomain}/js/common/commonchart.js'></script>

</block:extends>

<block:extends name="h1">客运站地区分布</block:extends>
<block:extends name="sub_h1">客运站地区分布</block:extends>

<block:extends name="content">
    <div class="content">

        <div class="page-header">
            <div class="icon">
                <span class="ico-layout-7"></span>
            </div>

            <!-- -------------------------------h1,sub_h1标签------------------------------------- -->
            <h1>
                <block:base name="h1">列表</block:base>
                <small><block:base name="sub_h1">副标题</block:base></small>
            </h1>
        </div>

        <div class="row-fluid">
            <div class="span12">
                <div class="block">
                    <div id="main" style="height: 80%"></div>
                    <div id="" style="height: 5%"></div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="refresh" value="0" />
</block:extends>

<block:extends name="script">
    <script>
//定时刷新
var second=60000; //间隔时间60秒钟
setInterval("mapDisplay();",second);

        mapDisplay();
        function mapDisplay() {
            /*所有车站接口 */
            var option = {
                title : {
                    text : '客运站地区分布',
                    x : 'center',
                    //padding:[15,0,0,10],
                    textStyle : {
                        fontSize : 16,
                        color : '#009AD7'
                    }
                },
                //弹框显示
                tooltip : {
                    trigger : 'item',
                    formatter : function(a) {
                        return a.name + ": " + a.value;
                    }
                },
                legend : {
                    orient : 'vertical', // 'vertical'
                    x : 'left', // 'center' | 'left' | {number},
                    y : 'top', // 'center' | 'bottom' | {number}
                    borderWidth : 0,
                    padding : 10, // [5, 10, 15, 20]
                    itemGap : 20,
                    textStyle : {
                        color : 'red'
                    },
                    selectedMode : 'single',
                    selected : {
                        '所有客运站' : true,
                        '一级客运站' : false,
                        '二级客运站' : false,
                        '三级客运站' : false,
                        '其他客运站' : false
                    },
                    data : [ {
                        name : '所有客运站',
                        textStyle : {
                            fontWeight : 'bold',
                            color : 'green'
                        }
                    }, '一级客运站', '二级客运站', '三级客运站', '其他客运站' ]
                },
                dataRange : {
                    x : 'left',
                    y : 'bottom',
                    splitList : [ {
                        start : 61
                    }, {
                        start : 41,
                        end : 60
                    }, {
                        start : 21,
                        end : 41
                    }, {
                        start : 16,
                        end : 20
                    }, {
                        start : 11,
                        end : 15
                    },//, label: ''
                    {
                        start : 6,
                        end : 10
                    },//, label: '', color: 'black'
                    {
                        start : 0,
                        end : 5
                    } ],
                    color : [ '#E0022B', '#E09107', '#A3E00B' ]
                },
                roamController : {
                    show : true,
                    x : 'right',
                    mapTypeControl : {
                        '四川' : true
                    }
                },
                series : [ {
                    name : '所有客运站',
                    type : 'map',
                    mapType : '四川',
                    roam : true,
                    itemStyle : {
                        normal : {
                             label : {
                                show : true,
                                formatter: function(params) {
                                    for(var i = 0; i < option.series[0].data.length; i++)
                                    {
                                        if (option.series[0].data[i].name == params) {
                                               return params +"("+ option.series[0].data[i].value+")";
                                           }
                                    }
                                },
                                textStyle : {
                                    color : "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis : {
                            label : {
                                show : false
                            }
                        }
                    },
                     data : []
                }, {
                    name : '一级客运站',
                    type : 'map',
                    mapType : '四川',
                    roam : true,
                    itemStyle : {
                        normal : {
                            label : {
                                show : true,
                                formatter: function(params) {
                                    for(var i = 0; i < option.series[0].data.length; i++)
                                    {
                                        if (option.series[1].data[i].name == params) {
                                               return params +"("+ option.series[1].data[i].value+")";
                                           }
                                    }
                                },
                                textStyle : {
                                    color : "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis : {
                            label : {
                                show : false
                            }
                        }
                    },

                    data : []
                }, {
                    name : '二级客运站',
                    type : 'map',
                    mapType : '四川',
                    roam : true,
                    itemStyle : {
                        normal : {
                            label : {
                                show : true,
                                formatter: function(params) {
                                    for(var i = 0; i < option.series[0].data.length; i++)
                                    {
                                        if (option.series[2].data[i].name == params) {
                                               return params +"("+ option.series[2].data[i].value+")";
                                           }
                                    }
                                },
                                textStyle : {
                                    color : "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis : {
                            label : {
                                show : false
                            }
                        }
                    },

                    data : []
                }, {
                    name : '三级客运站',
                    type : 'map',
                    mapType : '四川',
                    roam : true,
                    itemStyle : {
                        normal : {
                            label : {
                                show : true,
                                formatter: function(params) {
                                    for(var i = 0; i < option.series[0].data.length; i++)
                                    {
                                        if (option.series[3].data[i].name == params) {
                                               return params +"("+ option.series[3].data[i].value+")";
                                           }
                                    }
                                },
                                textStyle : {
                                    color : "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis : {
                            label : {
                                show : false
                            }
                        }
                    },

                    data : []
                },
                {
                    name : '其他客运站',
                    type : 'map',
                    mapType : '四川',
                    roam : true,
                    itemStyle : {
                        normal : {
                            label : {
                                show : true,
                                formatter: function(params) {
                                    for(var i = 0; i < option.series[0].data.length; i++)
                                    {
                                        if (option.series[4].data[i].name == params) {
                                               return params +"("+ option.series[4].data[i].value+")";
                                           }
                                    }
                                },
                                textStyle : {
                                    color : "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis : {
                            label : {
                                show : false
                            }
                        }
                    },
                    data : []
                } ]
            };

            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(option);

            //所有数据
              $.get('${baseDomain}/region/getAllStationDis.json', function(json) {
                if (json.success) {
                    var res1 = json.data;
                    var res=res1[0];//所有客运站
                    var result = res1[1];//一级客运站
                    var result2 = res1[2];//二级客运站
                    var result3 = res1[3];//三级客运站
                    var result4 = res1[4];//其他客运站
                    var a=0;
                    for (var i = 0; i < res.length; i++) {
                        a=Number(a) + Number(res[i].value);
                    }
                    //legend点击选中事件
                    myChart.on(echarts.config.EVENT.LEGEND_SELECTED, function (param){
                       var leg=param.target;
                       if(leg=='所有客运站'){
                            var a=0;
                            for (var i = 0; i < res.length; i++) {
                                a=Number(a) + Number(res[i].value);
                            }
                            option.title.text='客运站地区分布(客运站数量'+a+')';
                       }else if(leg=='一级客运站')
                       {
                           var a=0;
                            for (var i = 0; i < result.length; i++) {
                                a=Number(a) + Number(result[i].value);
                            }
                            option.title.text='客运站地区分布(客运站数量'+a+')';
                       }else if(leg=='二级客运站')
                       {
                           var a=0;
                            for (var i = 0; i < result2.length; i++) {
                                a=Number(a) + Number(result2[i].value);
                            }
                            option.title.text='客运站地区分布(客运站数量'+a+')';
                       }else if(leg=='三级客运站')
                       {
                           var a=0;
                            for (var i = 0; i < result3.length; i++) {
                                a=Number(a) + Number(result3[i].value);
                            }
                            option.title.text='客运站地区分布(客运站数量'+a+')';
                       }else{
                           var a=0;
                            for (var i = 0; i < result4.length; i++) {
                                a=Number(a) + Number(result4[i].value);
                            }
                            option.title.text='客运站地区分布(客运站数量'+a+')';
                       }
                       myChart.hideLoading();
                        myChart.setOption(option);
                        //点击按钮的赋值
                        myChart.setOption({
                              title : {
                                text : '客运站地区分布(客运站数量'+a+')',
                                x : 'center',
                                textStyle : {
                                    fontSize : 16,
                                    color : '#009AD7'
                                }
                            },
                            series : [{
                                title:
                                {
                                    text : '客运站地区分布(客运站数量'+a+')',
                                    x : 'center',
                                    textStyle : {
                                        fontSize : 16,
                                        color : '#009AD7'
                                    }
                                },
                                //根据名字找到对应系列
                                name : '所有客运站',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : true,
                                            formatter : function(params) {
                                                for (var i = 0; i < res.length; i++) {
                                                    if (res[i].name == params) {
                                                        return params
                                                                + "("
                                                                + res[i].value
                                                                + ")";
                                                    }
                                                }
                                            },
                                            textStyle : {
                                                color : "rgb(249, 249, 249)"
                                            }
                                        }
                                    },
                                    emphasis : {
                                        label : {
                                            show : false
                                        }
                                    }
                                },
                              data:res
                            },
                            {
                                name : '一级客运站',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : true,
                                            formatter : function(
                                                    params) {
                                                for (var i = 0; i < result.length; i++) {
                                                    if (params==result[i].name) {
                                                        return params
                                                                + "("
                                                                + result[i].value
                                                                + ")";
                                                    }
                                                }
                                            },
                                            textStyle : {
                                                color : "rgb(249, 249, 249)"
                                            }
                                        }
                                    },
                                    emphasis : {
                                        label : {
                                            show : false
                                        }
                                    }
                                },
                                data : result
                            },
                            {
                                name : '二级客运站',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : true,
                                            formatter : function(
                                                    params) {
                                                for (var i = 0; i < result2.length; i++) {
                                                    if (params==result2[i].name) {
                                                        return params
                                                                + "("
                                                                + result2[i].value
                                                                + ")";
                                                    }
                                                }
                                            },
                                            textStyle : {
                                                color : "rgb(249, 249, 249)"
                                            }
                                        }
                                    },
                                    emphasis : {
                                        label : {
                                            show : false
                                        }
                                    }
                                },
                                data : result2
                            },
                            {
                                name : '三级客运站',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : true,
                                            formatter : function(
                                                    params) {
                                                for (var i = 0; i < result3.length; i++) {
                                                    if (params==result3[i].name) {
                                                        return params
                                                                + "("
                                                                + result3[i].value
                                                                + ")";
                                                    }
                                                }
                                            },
                                            textStyle : {
                                                color : "rgb(249, 249, 249)"
                                            }
                                        }
                                    },
                                    emphasis : {
                                        label : {
                                            show : false
                                        }
                                    }
                                },
                                data : result3
                            },
                            {
                                name : '其他客运站',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : true,
                                            formatter : function(
                                                    params) {
                                                for (var i = 0; i < result4.length; i++) {
                                                    if (params==result4[i].name) {
                                                        return params
                                                                + "("
                                                                + result4[i].value
                                                                + ")";
                                                    }
                                                }
                                            },
                                            textStyle : {
                                                color : "rgb(249, 249, 249)"
                                            }
                                        }
                                    },
                                    emphasis : {
                                        label : {
                                            show : false
                                        }
                                    }
                                },
                                data : result4
                            }
                            ]
                        });
                    });
                    //首次赋值
                      myChart.setOption({
                          title : {
                            text : '客运站地区分布(客运站数量'+a+')',
                            x : 'center',
                            textStyle : {
                                fontSize : 16,
                                color : '#009AD7'
                            }
                        },
                        series : [{
                            title:
                            {
                                text : '客运站地区分布(客运站数量'+a+')',
                                x : 'center',
                                textStyle : {
                                    fontSize : 16,
                                    color : '#009AD7'
                                }
                            },
                            //根据名字找到对应系列
                            name : '所有客运站',
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : true,
                                        formatter : function(params) {
                                            for (var i = 0; i < res.length; i++) {
                                                if (res[i].name == params) {
                                                    return params
                                                            + "("
                                                            + res[i].value
                                                            + ")";
                                                }
                                            }
                                        },
                                        textStyle : {
                                            color : "rgb(249, 249, 249)"
                                        }
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : false
                                    }
                                }
                            },
                          data:res
                        },
                        {
                            name : '一级客运站',
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : true,
                                        formatter : function(
                                                params) {
                                            for (var i = 0; i < result.length; i++) {
                                                if (params==result[i].name) {
                                                    return params
                                                            + "("
                                                            + result[i].value
                                                            + ")";
                                                }
                                            }
                                        },
                                        textStyle : {
                                            color : "rgb(249, 249, 249)"
                                        }
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : false
                                    }
                                }
                            },
                            data : result
                        },
                        {
                            name : '二级客运站',
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : true,
                                        formatter : function(
                                                params) {
                                            for (var i = 0; i < result2.length; i++) {
                                                if (params==result2[i].name) {
                                                    return params
                                                            + "("
                                                            + result2[i].value
                                                            + ")";
                                                }
                                            }
                                        },
                                        textStyle : {
                                            color : "rgb(249, 249, 249)"
                                        }
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : false
                                    }
                                }
                            },
                            data : result2
                        },
                        {
                            name : '三级客运站',
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : true,
                                        formatter : function(
                                                params) {
                                            for (var i = 0; i < result3.length; i++) {
                                                if (params==result3[i].name) {
                                                    return params
                                                            + "("
                                                            + result3[i].value
                                                            + ")";
                                                }
                                            }
                                        },
                                        textStyle : {
                                            color : "rgb(249, 249, 249)"
                                        }
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : false
                                    }
                                }
                            },
                            data : result3
                        },
                        {
                            name : '其他客运站',
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : true,
                                        formatter : function(
                                                params) {
                                            for (var i = 0; i < result4.length; i++) {
                                                if (params==result4[i].name) {
                                                    return params
                                                            + "("
                                                            + result4[i].value
                                                            + ")";
                                                }
                                            }
                                        },
                                        textStyle : {
                                            color : "rgb(249, 249, 249)"
                                        }
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : false
                                    }
                                }
                            },
                            data : result4
                        }
                        ]
                    });

                } else {
                    showErrorMsg(json.msg);
                }
            }, 'json');

        }
    </script>
</block:extends>

<jsp:include page="/common/base.jsp"></jsp:include>

学习教程地址：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts或者http://echarts.baidu.com/echarts2/doc/doc.html

效果展示：