微信小说分销系统设计之使用百度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>