微信小说分销系统设计之使用百度Echarts地图统计功能统计微信粉丝地域分布情况

* 作者：杨浩瑞 QQ：1420213383 独立博客：http://www.yxxrui.cn

* 【后台】http://xiaoshuo.qqsiot.cn/manager 【前台】http://y6.qqsiot.cn

* 管理员账号：admin 渠道商账号：channel 代理商账号：agent 演示密码：123456

**/

使用百度echarts插件来制作地图分布统计图，更加方便分析和理解用户行为，对症下药才能起到最好的疗效，哈哈哈，效果怎么样，看看就知道了

先展示出来一个地图，上边显示所有省份的全部情况，然后点击某个省份的时候，使用post请求后台，获取对应省份的城市分别的人数，然后生成城市分布柱状图，后台程序比较简单，就是获取城市和人数，不得不说echarts是一个非常好用的工具，我记得15年大四的时候在一家公司实训，做过一个类似的统计，当时有一些朋友在使用flash来写，后来接触了echats之后，感觉flash就是个垃圾，为百度顶一个，具体效果也可以到演示站中看，下期讲一下条形统计图

<script src="/Content/Share/js/echarts-all.js"></script>
<script src="/Content/Share/novel.js"></script>
<div id="content-header">
    <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom">
            <i class="icon-home"></i> Home
        </a>
        <a href="#" class="current">用户分布</a>
    </div>
</div>
<div class="container-fluid data-stat">
    <div class="row-fluid">
        <a href="/Manager/AgentDatas/Index" class="btn">订单统计</a><!--
        --><a href="/Manager/AgentDatas/User" class="btn">用户统计</a><!--
        --><a href="/Manager/AgentDatas/Novel" class="btn">小说统计</a><!--
        --><a href="/Manager/DataCharts/OrderDatas" class="btn">订单趋势</a><!--
        --><a href="/Manager/DataCharts/UserDatas" class="btn">用户趋势</a><!--
        --><a href="/Manager/DataCharts/UserAreaDatas" class="btn btn-primary">用户分布</a>
    </div>
</div>
<br />
<div id="userMap" style="height: 400px; width: 94%;"></div>
<div id="two" style="height:400px; width:94%;"></div>
<script type="text/javascript">
    var acid = \'@ViewBag.acid\';
    // 基于准备好的dom，初始化echarts实例
    var userMapChart = echarts.init(document.getElementById(\'userMap\'));
    var myChart2 = echarts.init(document.getElementById(\'two\'));
    userMapChart.showLoading({
        text: \'正在努力的读取数据中...\'    //loading话术
    });
    userMapChart.on(\'click\', function (param) {
        dealCityPost(param.name);
    });
    function dealCityPost(name) {
        $.post(\'/Manager/DataCharts/UserCityMapJson\', { acid: acid, name: name }, function (d) {
            //console.log(JSON.stringify(d));
            if (d.code == 0) {
                dealChart2(name, d.data);
            }
        });
    }
    $.post(\'/Manager/DataCharts/UserProvinceMapJson\', { acid: acid }, function(d) {
        //console.log(JSON.stringify(d));
        if (d.code == 0) {
            dealChart(d.data);
            //默认显示浙江省
            dealCityPost(\'浙江\');
        }
    });
    var provinces = [
         \'北京\', 
         \'天津\', 
         \'上海\', 
         \'重庆\', 
         \'河北\', 
         \'河南\', 
         \'云南\', 
         \'辽宁\', 
         \'黑龙江\',
         \'湖南\', 
         \'安徽\', 
         \'山东\', 
         \'新疆\', 
         \'江苏\', 
         \'浙江\', 
         \'江西\', 
         \'湖北\', 
         \'广西\', 
         \'甘肃\', 
         \'山西\', 
         \'内蒙古\',
         \'陕西\', 
         \'吉林\', 
         \'福建\', 
         \'贵州\', 
         \'广东\', 
         \'青海\', 
         \'西藏\', 
         \'四川\', 
         \'宁夏\', 
         \'海南\', 
         \'台湾\', 
         \'香港\', 
         \'澳门\'
    ];
    function getMaxValue(data) {
        var max = 0;
        for (var i in data) {
            if (data[i].value > max && $.inArray(data[i].name, provinces) != -1) {
                max = data[i].value;
            }
        }
        return max;
    }
    function dealChart(datas) {
        userMapChart.hideLoading();
        var option = {
            title: {
                text: \'用户省份分布统计\',
                subtext: \'\',
                x: \'center\'
            },
            tooltip: {
                trigger: \'item\'
            },
            dataRange: {
                min: 0,
                max: getMaxValue(datas),
                x: \'right\',
                y: \'bottom\',
                text: [\'高\', \'低\'],           // 文本，默认为数值文本
                calculable: true,
                color: [\'#BD0707\',\'#FFD2D2\']
            },
            series: [
                {
                    name: \'中国\',
                    type: \'map\',
                    mapType: \'china\',
                    roam: false,
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: datas
                }
            ]
        };
        userMapChart.setOption(option);
    }
    function dealChart2(name, datas) {
        var citys = [];
        var nums = [];
        for (var i in datas) {
            var data = datas[i];
            citys[i] = data.name;
            nums[i] = data.value;
        }
        myChart2.showLoading({
            text: \'正在努力的读取数据中...\',    //loading话术
        });
        myChart2.hideLoading();
        var option2 = {
            title: {
                text: name+\'省各城市用户人数\',
                x: \'center\'
            },
            legend: {                                   // 图例配置
                padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5
                itemGap: 10,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                data: [name+\'省\'],
                x: \'center\',
                y: \'bottom\'
            },
            tooltip: {                                  // 气泡提示配置
                trigger: \'item\',                        // 触发类型，默认数据触发，可选为：\'axis\'
            },
            xAxis: [                                    // 直角坐标系中横轴数组
                {
                    type: \'category\',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                    data: citys
                }
            ],
            yAxis: [                                    // 直角坐标系中纵轴数组
                {
                    type: \'value\',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
                    boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略，数组内数值代表百分比
                    splitNumber: 6                      // 数值轴用，分割段数，默认为5
                }
            ],
            series: [
                {
                    name: name+\'省\',                        // 系列名称
                    type: \'bar\',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    itemStyle: {
                        normal: { label: { show: true } }
                    },
                    data: nums
                }
            ]
        };
        myChart2.clear();
        myChart2.setOption(option2);
    }
    $(function () {
        $(\'#userMapMenu\').addClass("active");
        $(\'#dataMenu > a\').trigger(\'click\');
    });
</script>