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

/** 转载请保留博客园原地址以及版权声明，请勿恶意修改，本博客中的内容均属于技术交流，请勿用于商业用途，谢谢配合

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

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

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

**/

<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>