/** 转载请保留博客园原地址以及版权声明,请勿恶意修改,本博客中的内容均属于技术交流,请勿用于商业用途,谢谢配合
* 作者:杨浩瑞 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就是个垃圾,为百度顶一个,具体效果也可以到演示站中看,下期讲一下
条形统计图
![](https://i-blog.csdnimg.cn/blog_migrate/aa7f7469f4c338c97887196258fe57bc.png)
<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>