分享几个用Echarts做的图表2

2.地图

var ip="http://"+window.location.host+"/xz/xz/tongji/huibao/yanshiAction!";
var mapdata;
$(function () {
    init_chartfig_pzh();
});
//初始化图表路径
function init_chartfig_pzh() {
    require.config({
        paths: {
            echarts: "js/echarts"
        }
    });
    require(
        [
            "echarts",
            "echarts/chart/map",
            "echarts/chart/pie",
            "echarts/chart/bar",
            "echarts/chart/line"
        ],
        function (ec) {
            echarts = ec;
            require("echarts/util/mapData/params").params.CHENGDU = {
                getGeoJson: function (callback) {
                    $.getJSON("js/echarts/CD_geo_copy.json", callback);
                }
            }
            ecConfig = require("echarts/config");
        }
    );
}

//获得图表基本信息
function get_option(axis, geo) {
    var _option = {
//            title: {
//                text: "text",
//                x: 'center',
//                textStyle: {
//                    fontSize: 12,
//                    color: "#428bca"
//                }
//            },
        tooltip: {
            trigger: "axis"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: []
        },

        series: []
    };
    if (1 == axis) {
        _option.grid = {
            x: 80,
            y2: 30,
            x2: 60,
            borderWidth: 0
        };
        _option.xAxis = [
            {
                name: "name",
                axisLabel: {
                    interval: 0,
                    rotage: 60
                },
                type: "category",
                splitLine: {show: false},
                data: []
            }];
        _option.yAxis = [
            {
                name: "name",
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: ["#F0F8FF", "#E0EEEE"]
                    }
                },
                axisLabel: {
                    formatter: function (val) {
                        if (val < 10000) {
                            return val;
                        } else if (val >= 10000 && val < 10000000) {
                            return (val / 10000) + "万";
                        } else {
                            return (val / 10000000) + "千万";
                        }
                    }
                }
            }];
    }
    if (1 == geo) {
        _option.dataRange = {};
        _option.dataRange.show = true;
        _option.dataRange.x = "89%";
        _option.dataRange.y = "top";
        _option.dataRange.precision = 0;
        _option.dataRange.calculable = true;
        _option.dataRange.color = ["#4dc1ea","#bae969","#f7fe24"];
        _option.dataRange.textStyle={color: '#fff'};

    }
    return _option;
}

$(window).load(function () {
    showMap_pzh();
});

function showMap_pzh() {
    $.ajax({
        type: 'post',
        dataType: "json",
        async: false,
        url: ip + "getHjAndWl.do",
        success: function (data) {
            mapdata = data;
            huademo_pzh("成都市", "demo1");
        }
    });

}


function huademo_pzh(area, div_id) {

    var datalist = mapdata.qxrk;
    var series0Array = new Array();
    var series1Array = new Array();
    var qxdata = {};
    for (var i = 0; i < datalist.length; i++) {
        var series1obj = new Object();
        series1obj.name = datalist[i].qx;
        series1obj.value = datalist[i].hjrk;
        series0Array.push(series1obj);
        var series2obj = new Object();
        series2obj.name = datalist[i].qx;
        series2obj.value = datalist[i].wlrk;
        series1Array.push(series2obj);
        qxdata[datalist[i].qx]=[datalist[i].hjrk,datalist[i].wlrk];
    }
    var option = get_option(0, 1);

    option.tooltip.trigger = "item";
    option.tooltip.padding=0;
    option.tooltip.position= function(p){return [p[0]-75,p[1]-60]};
    option.tooltip.formatter = function(params){
        var qx = params.name;
        var wlrk=0;
        var hjrk =0;
        if(undefined !=qxdata[qx]){
            wlrk = eval(qxdata[qx])[1];
            hjrk = eval(qxdata[qx])[0];
        }
        var html = "<div style='width: 149px;height: 60px; min-height: 80px' class='cd'>" +
            "<div style='width: 74px;height: 60px;float: left; text-align: center'><span style='color: black;'>"+wlrk+"</span>万人<br><span style='font-size: 12px;color: black;'>流动人口数</span></div>" +
            "<div style='border-right: 1px solid #ccc;height:40px;margin-top:10px;float:left;'></div>"+
            "<div style='width: 74px;height: 60px;float: left;text-align: center'><span style='color: black;'>"+hjrk+"</span>万人<br><span style='font-size: 12px;color: black;'>户籍人口数</span></div>" +
             "<div class='label-arrow'> </div>"
            "</div>";
        return html;
    };

    option.dataRange.min = 0;
    option.dataRange.max = 100;
    option.legend = {
        show: false,
        orient: 'vertical',
        x: 'left',
        data: ['户籍人口', '流动人口']
    };
    option.series[0] = {};
    option.series[0].type = "map";
    option.series[0].name = "户籍人口";
    option.series[0].mapType = "CHENGDU";
    option.series[0].itemStyle = {
        normal:{
            borderWidth:2,
            borderColor:"#fff",
            label:{show:true,
                textStyle:{
                    color:'#000',
                },
            },
            emphasis:{label:{show:true}}
        }
    };

    option.series[0].data = series0Array;

    option.series[1] = {};
    option.series[1].type = "map";
    option.series[1].name = "流动人口";
    option.series[1].mapType = "CHENGDU";
    option.series[1].itemStyle = {
        normal:{
            borderWidth:2,
            borderColor:"#fff",
            label:{show:true,
                textStyle:{
                    color:'#000',
                },
            },
            emphasis:{label:{show:true}}
        }
    };

    option.series[1].data = series1Array;
    var myChart = echarts.init(document.getElementById(div_id));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

}