基于网络访问日志，利用Python进行数据分析，结合echarts进行图表展示，使得网络日志挖掘结果可视化展示，包括：地图展示各省份访问量（可添加自定义城市），并基于layUI表格展示数据；柱状图展示访问URL-TOP10；总体分月度访问展示以及分省份各月度数据展示；搜索关键词的词云分析（目前只支持在win10自带的Edge浏览器）。
目前数据为随意写的，后续打算结合Python进行数据交互，利用flask进行动态网页展示，待更新。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>mapiPhone</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script type="text/javascript" src = "js/echarts-wordcloud.min.js"></script>
<script type="text/javascript" src = "js/echarts-wordcloud.js"></script>
</head>
<body>
<div style="background-color:#F0F8FF">
<div style="width: 100%;border:1px solid white;">
<div id="count_table" style="position:relative;float:right;height: 700%;width:20%;overflow:hidden;" class="row">
<table width="100%" align="center" style="border:1px solid #E0E0E0;">
<thead style="background-color:white">
<td width="20%" style="font-size:18px;font-weight:bold;text-align:center;height: 50px;margin: 0px;padding: 0px;">总体访问量</td>
</thead>
<tr>
<td style="color:white;background-color:#00FFFF;text-align:center; border:1px solid #E0E0E0;height: 100px;margin: 0px;padding: 0px;"><h1>700W</h1></td>
</tr>
</table>
<table class="layui-hide" id="demo"></table>
<script>
layui.use('table', function(){
var table = layui.table;
//展示已知数据
table.render({
elem: '#demo'
,height: 536
,limit: 36 //显示的数量
//,page: false //开启分页
,cols: [[ //标题栏
{field: 'prov', title: '省份', width: 80, sort: false}
,{field: 'count', title: '访问量', minwidth: 80,sort: true}
]]
,data: [{
"prov": "北京"
,"count": "123"
}, {
"prov": "上海"
,"count": "44534"
}, {
"prov": "河北"
,"count": "5434"
}, {
"prov": "深圳"
,"count": "7667"
}, {
"prov": "山东"
,"count": "786765"
}, {
"prov": "四川"
,"count": "767"
}, {
"prov": "新疆"
,"count": "7686"
}, {
"prov": "贵州"
,"count": "5343"
}, {
"prov": "上海"
,"count": "44534"
}, {
"prov": "河北"
,"count": "5434"
}, {
"prov": "深圳"
,"count": "7667"
}, {
"prov": "山东"
,"count": "786765"
}, {
"prov": "四川"
,"count": "767"
}, {
"prov": "新疆"
,"count": "7686"
}, {
"prov": "贵州"
,"count": "5343"
}, {
"prov": "新疆"
,"count": "7686"
}, {
"prov": "贵州"
,"count": "5343"
}, {
"prov": "上海"
,"count": "44534"
}, {
"prov": "河北"
,"count": "5434"
}, {
"prov": "深圳"
,"count": "7667"
}, {
"prov": "山东"
,"count": "786765"
}, {
"prov": "四川"
,"count": "767"
}, {
"prov": "新疆"
,"count": "7686"
}, {
"prov": "贵州"
,"count": "5343"
}]
//,skin: 'line' //表格风格
,even: true
//,page: true //是否显示分页
//,limits: [5, 7, 10]
//,limit: 5 //每页默认显示的数量
});
});
</script>
</div>
<div id="china-map" style="height: 700%;width: 39%;border:1px solid white; position:relative;float:left;"></div>
<div id="urlCount" style="height: 700%;width:40.5%;border:1px solid white; position:relative;float:right;"></div>
</div>
<div style="width: 100%;border:1px solid white;">
<div id="month-count" style="height: 600%;width: 50%;border:1px solid white;position:relative;float:left;"></div>
<div id="wordCloud" style="height: 600%;width: 49%;border:1px solid white;position:relative;float:right;"></div>
</div>
<div id="provTimeCount" style="height: 700%;width: 100%;border:1px solid white; position:relative;overflow:hidden;"></div>
</div>
<script type="text/javascript">
var myChart_urlCount = echarts.init(document.getElementById('urlCount'));
option_urlCount = {
title: {
text: 'URL访问TOP10',
//subtext: '数据来自网络'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},/*
legend: {
data: ['*********']
},*/
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data:['m.baidu.com','api.sugg.sogou.com','sugs.m.sm.cn','smart.sug.so.com','www.so.com','dsp.brand.sogou.com','app.video.baidu.com','usp1.baidu.com','www.sogou.com','wap.sogou.com']
},
series: [
{
name: '频数',
type: 'bar',
label: {
normal: {
//formatter: "{b} : {c}",//标签显示在里面
show: true,
position: 'inside',
textStyle: {
fontSize: 12,
color: '#00ffff'
}
}
},
data:[
{value:15212, name:'m.baidu.com'},
{value:11590, name:'api.sugg.sogou.com'},
{value:1762, name:'sugs.m.sm.cn'},
{value:1700, name:'smart.sug.so.com'},
{value:1679, name:'www.so.com'},
{value:1185, name:'dsp.brand.sogou.com'},
{value:1141, name:'app.video.baidu.com'},
{value:5901, name:'usp1.baidu.com'},
{value:4750, name:'www.sogou.com'},
{value:4508, name:'wap.sogou.com'}
],
}
]
};
myChart_urlCount.setOption(option_urlCount);
myChart_urlCount.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
window.addEventListener("resize",function(){
myChart_urlCount.resize();
});
</script>
<script type="text/javascript">
var myChart_provTimeCount = echarts.init(document.getElementById('provTimeCount'));
var dataMap = {};
function dataFormatter(obj) {
var pList = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
var temp;
for (var key in obj) {
var max = 0;
var sum = 0;
//alert(obj[key]);
temp = obj[key];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[key][i] = {
name : pList[i],
value : temp[i]
}
}
//obj[key + 'max'] = Math.floor(max / 100) * 100;
//obj[key + 'sum'] = sum;
}
return obj;
}
dataMap.dataGDP = dataFormatter({
//max : 60000,
北京:[4567,463,4567,463,4567,463,4567,44567,44567,463,4567,463],
天津:[4567,43,567,463,4567,463,4567,46567,44567,463,4567,463],
河北:[4567,463,567,43,4567,463,4567,46567,46567,463,4567,463],
山西:[4567,463,4567,463,4567,463,4567,46567,4667,463,4567,463],
内蒙古:[4567,463,4567,463,467,463,4567,46367,567,463,4567,463],
辽宁:[4567,463,4567,463,4567,43,4567,46567,4634,463,4567,463],
大连:[4567,463,4567,463,4567,463,4567,4637,46367,463,4567,463],
吉林:[4567,463,4567,463,4567,463,47,6456,46367,463,4567,463],
黑龙江:[4567,463,4567,463,4567,463,4567,4567,44567,463,4567,463],
上海:[4567,463,4567,463,4567,463,4567,4637,786,463,4567,463],
江苏:[4567,463,4567,463,4567,463,4567,4634,567,463,4567,463],
浙江:[4567,463,4567,463,4567,463,4567,768,546,463,4567,463],
宁波:[4567,463,4567,463,4567,463,4567,46567,46367,463,4567,463],
安徽:[4567,463,4567,463,4567,463,4567,76,456,463,4567,463],
福建:[4567,463,4567,463,4567,463,4567,46567,4345,463,4567,463],
厦门:[4567,463,4567,463,4567,463,4567,76,96,463,4567,463],
江西:[4567,463,4567,463,4567,463,4567,768,6544,63,4567,463],
山东:[4567,463,4567,463,4567,463,4567,86,797,463,567,463],
青岛:[4567,463,4567,463,4567,463,4567,463,786,463,4567,463],
河南:[4567,463,4567,463,4567,463,4567,46,76,463,4567,4763],
湖北:[4567,463,4567,463,4567,463,4567,436,768,463,42567,463],
湖南:[4567,463,4567,463,4567,463,4567,46,78,463,4567,463],
广东:[4567,463,4567,463,4567,463,4567,43,768,4463,4567,463],
深圳:[4567,463,4567,463,4567,463,4567,134,3473,463,4567,463],
广西:[4567,463,4567,463,4567,463,4567,6786,463457,463,4567,463],
海南:[4567,463,4567,463,4567,463,4567,646,646,463,4567,463],
四川:[4567,463,4567,463,4567,463,4567,3435,465,463,4567,463],
贵州:[4567,463,4567,463,4567,463,4567,434567,456,463,4567,463],
云南:[4567,463,4567,463,4567,463,45167,3453,87,463,4567,463],
陕西:[4567,463,4567,463,4567,4613,4567,5456,456,463,4567,463],
甘肃:[4567,463,4567,463,45167,463,4567,46,876,463,4567,463],
青海:[4567,463,4567,4163,4567,463,4567,245,4564,463,4567,463],
宁夏:[4567,463,45167,463,4567,463,4567,6456,4657,463,4567,463],
新疆:[4567,463,4567,463,4567,463,4567,345,876,463,4567,463],
重庆:[4567,4163,4567,463,4567,463,4567,68,786,463,4567,463],
西藏:[41567,463,4567,463,4567,463,4567,646,646,463,4567,463]
});
option_provTimeCount = {
baseOption: {
timeline: {
//width:'80%',//设定时间轴宽度，也可用下面方法x-x2
x:'30px',
x2:'90px',
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 800,//时间轴切换时间
// controlStyle: {
// position: 'left'
// },
data: [
'北京','\n天津','河北','\n天津','河北','\n山西','内蒙古','\n辽宁','大连','\n吉林','黑龙江',
'\n上海','江苏','\n浙江','宁波','\n安徽','福建','\n厦门','江西','\n山东','青岛','\n河南','湖北','\n湖南',
'广东','\n深圳','广西','\n海南','四川','\n贵州','云南','\n陕西','甘肃','\n青海','宁夏','\n新疆','重庆','\n西藏'
/*
{
value: '2005-01-01',
tooltip: {
formatter: '{b} GDP达到一个高度'
},
symbol: 'diamond',
symbolSize: 16
},*/
/*
{
value: '2011-01-01',
tooltip: {
formatter: function (params) {
return params.name + 'GDP达到又一个高度';
}
},
symbol: 'diamond',
symbolSize: 18
},*/
],//注释掉可显示中文
label: {
interval: 0,//interval : 挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） | {number}
//rotate : 45//rotate : 旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90
//formatter : function(s) {
// return (new Date(s)).getFullYear();
//}
}
},
title: {
subtext: '数据来自大外网'
},
tooltip: {
},/*
legend: {
x: 'right',
data: ['GDP'],
},*/
calculable : true,
grid: {
top: 80,
bottom: 100,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
formatter: function (params) {
return params.value.replace('\n', '');
}
}
}
}
},
xAxis: [
{
'type':'category',
'axisLabel':{'interval':0},
'data':['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
splitLine: {show: false}
}
],
yAxis: [
{
type: 'value',
name: '访问量（次）'
}
],
series: [
{name: 'GDP', type: 'bar'},
{
name: 'GDP占比',
type: 'pie',
center: ['75%', '35%'],
radius: '28%',
z: 100
}
]
},
options: [
{
title: {text: '北京'},
series: [
{data: dataMap.dataGDP['北京']},
]
},
{
title : {text: '天津'},
series : [
{data: dataMap.dataGDP['天津']},
]
},
{
title : {text: '河北'},
series : [
{data: dataMap.dataGDP['河北']},
]
},
{
title : {text: '山西'},
series : [
{data: dataMap.dataGDP['山西']},
]
},
{
title : {text: '内蒙古'},
series : [
{data: dataMap.dataGDP['内蒙古']},
]
},
{
title : {text: '辽宁'},
series : [
{data: dataMap.dataGDP['辽宁']},
]
},
{
title : {text: '大连'},
series : [
{data: dataMap.dataGDP['大连']},
]
},
{
title : {text: '吉林'},
series : [
{data: dataMap.dataGDP['吉林']},
]
},
{
title : {text: '黑龙江'},
series : [
{data: dataMap.dataGDP['黑龙江']},
]
},
{
title : {text: '上海'},
series : [
{data: dataMap.dataGDP['上海']},
]
},
{
title : {text: '江苏'},
series : [
{data: dataMap.dataGDP['江苏']},
]
},
{
title : {text: '浙江'},
series : [
{data: dataMap.dataGDP['浙江']},
]
},
{
title : {text: '宁波'},
series : [
{data: dataMap.dataGDP['宁波']},
]
},
{
title : {text: '安徽'},
series : [
{data: dataMap.dataGDP['安徽']},
]
},
{
title : {text: '福建'},
series : [
{data: dataMap.dataGDP['福建']},
]
},
{
title : {text: '厦门'},
series : [
{data: dataMap.dataGDP['厦门']},
]
},
{
title : {text: '江西'},
series : [
{data: dataMap.dataGDP['江西']},
]
},
{
title : {text: '山东'},
series : [
{data: dataMap.dataGDP['山东']},
]
},
{
title : {text: '青岛'},
series : [
{data: dataMap.dataGDP['青岛']},
]
},
{
title : {text: '河南'},
series : [
{data: dataMap.dataGDP['河南']},
]
},
{
title : {text: '湖北'},
series : [
{data: dataMap.dataGDP['湖北']},
]
},
{
title : {text: '湖南'},
series : [
{data: dataMap.dataGDP['湖南']},
]
},
{
title : {text: '广东'},
series : [
{data: dataMap.dataGDP['广东']},
]
},
{
title : {text: '深圳'},
series : [
{data: dataMap.dataGDP['深圳']},
]
},
{
title : {text: '广西'},
series : [
{data: dataMap.dataGDP['广西']},
]
},
{
title : {text: '海南'},
series : [
{data: dataMap.dataGDP['海南']},
]
},
{
title : {text: '四川'},
series : [
{data: dataMap.dataGDP['四川']},
]
},
{
title : {text: '贵州'},
series : [
{data: dataMap.dataGDP['贵州']},
]
},
{
title : {text: '云南'},
series : [
{data: dataMap.dataGDP['云南']},
]
},
{
title : {text: '陕西'},
series : [
{data: dataMap.dataGDP['陕西']},
]
},
{
title : {text: '甘肃'},
series : [
{data: dataMap.dataGDP['甘肃']},
]
},
{
title : {text: '青海'},
series : [
{data: dataMap.dataGDP['青海']},
]
},
{
title : {text: '宁夏'},
series : [
{data: dataMap.dataGDP['宁夏']},
]
},
{
title : {text: '新疆'},
series : [
{data: dataMap.dataGDP['新疆']},
]
},
{
title : {text: '重庆'},
series : [
{data: dataMap.dataGDP['重庆']},
]
},
{
title : {text: '西藏'},
series : [
{data: dataMap.dataGDP['西藏']},
]
}
]
};
myChart_provTimeCount.setOption(option_provTimeCount);
myChart_provTimeCount.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
window.addEventListener("resize",function(){
myChart_provTimeCount.resize();
});
</script>
<script type="text/javascript">
var keywords = {
"visualMap": 22199,
"continuous": 10288,
"contoller": 620,
"series": 274470,
"gauge": 12311,
"detail": 1206,
"piecewise": 4885,
"textStyle": 32294,
"markPoint": 18574,
"pie": 38929,
"roseType": 969,
"label": 37517,
"emphasis": 12053,
"yAxis": 57299,
"name": 15418,
"type": 22905,
"gridIndex": 5146,
"normal": 49487,
"itemStyle": 33837,
"min": 4500,
"silent": 5744,
"animation": 4840,
"offsetCenter": 232,
"inverse": 3706,
"borderColor": 4812,
"markLine": 16578,
"line": 76970,
"radiusAxis": 6704,
"radar": 15964,
"data": 60679,
"dataZoom": 24347,
"tooltip": 43420,
"toolbox": 25222,
"geo": 16904,
"parallelAxis": 4029,
"parallel": 5319,
"max": 3393,
"bar": 43066,
"heatmap": 3110,
"map": 20285,
"animationDuration": 3425,
"animationDelay": 2431,
"splitNumber": 5175,
"axisLine": 12738,
"lineStyle": 19601,
"splitLine": 7133,
"axisTick": 8831,
"axisLabel": 17516,
"pointer": 590,
"color": 23426,
"title": 38497,
"formatter": 15214,
"slider": 7236,
"legend": 66514,
"grid": 28516,
"smooth": 1295,
"smoothMonotone": 696,
"sampling": 757,
"feature": 12815,
"saveAsImage": 2616,
"polar": 6279,
"calculable": 879,
"backgroundColor": 9419,
"excludeComponents": 130,
"show": 20620,
"text": 2592,
"icon": 2782,
"dimension": 478,
"inRange": 1060,
"animationEasing": 2983,
"animationDurationUpdate": 2259,
"animationDelayUpdate": 2236,
"animationEasingUpdate": 2213,
"xAxis": 89459,
"angleAxis": 5469,
"showTitle": 484,
"dataView": 2754,
"restore": 932,
"timeline": 10104,
"range": 477,
"value": 5732,
"precision": 878,
"target": 1433,
"zlevel": 5361,
"symbol": 8718,
"interval": 7964,
"symbolSize": 5300,
"showSymbol": 1247,
"inside": 8913,
"xAxisIndex": 3843,
"orient": 4205,
"boundaryGap": 5073,
"nameGap": 4896,
"zoomLock": 571,
"hoverAnimation": 2307,
"legendHoverLink": 3553,
"stack": 2907,
"throttle": 466,
"connectNulls": 897,
"clipOverflow": 826,
"startValue": 551,
"minInterval": 3292,
"opacity": 3097,
"splitArea": 4775,
"filterMode": 635,
"end": 409,
"left": 6475,
"funnel": 2238,
"lines": 6403,
"baseline": 431,
"align": 2608,
"coord": 897,
"nameTextStyle": 7477,
"width": 4338,
"shadowBlur": 4493,
"effect": 929,
"period": 225,
"areaColor": 631,
"borderWidth": 3654,
"nameLocation": 4418,
"position": 11723,
"containLabel": 1701,
"scatter": 10718,
"areaStyle": 5310,
"scale": 3859,
"pieces": 414,
"categories": 1000,
"selectedMode": 3825,
"itemSymbol": 273,
"effectScatter": 7147,
"fontStyle": 3376,
"fontSize": 3386,
"margin": 1034,
"iconStyle": 2257,
"link": 1366,
"axisPointer": 5245,
"showDelay": 896,
"graph": 22194,
"subtext": 1442,
"selected": 2881,
"barCategoryGap": 827,
"barGap": 1094,
"barWidth": 1521,
"coordinateSystem": 3622,
"barBorderRadius": 284,
"z": 4014,
"polarIndex": 1456,
"shadowOffsetX": 3046,
"shadowColor": 3771,
"shadowOffsetY": 2475,
"height": 1988,
"barMinHeight": 575,
"lang": 131,
"symbolRotate": 2752,
"symbolOffset": 2549,
"showAllSymbol": 942,
"transitionDuration": 993,
"bottom": 3724,
"fillerColor": 229,
"nameMap": 1249,
"barMaxWidth": 747,
"radius": 2103,
"center": 2425,
"magicType": 3276,
"labelPrecision": 248,
"option": 654,
"seriesIndex": 935,
"controlPosition": 121,
"itemGap": 3188,
"padding": 3481,
"shadowStyle": 347,
"boxplot": 1394,
"labelFormatter": 264,
"realtime": 631,
"dataBackgroundColor": 239,
"showDetail": 247,
"showDataShadow": 217,
"x": 684,
"valueDim": 499,
"onZero": 931,
"right": 3255,
"clockwise": 1035,
"itemWidth": 1732,
"trigger": 3840,
"axis": 379,
"selectedOffset": 670,
"startAngle": 1293,
"minAngle": 590,
"top": 4637,
"avoidLabelOverlap": 870,
"labelLine": 3785,
"sankey": 2933,
"endAngle": 213,
"start": 779,
"roam": 1738,
"fontWeight": 2828,
"fontFamily": 2490,
"subtextStyle": 2066,
"indicator": 853,
"sublink": 708,
"zoom": 1038,
"subtarget": 659,
"length": 1060,
"itemSize": 505,
"controlStyle": 452,
"yAxisIndex": 2529,
"edgeLabel": 1188,
"radiusAxisIndex": 354,
"scaleLimit": 1313,
"geoIndex": 535,
"regions": 1892,
"itemHeight": 1290,
"nodes": 644,
"candlestick": 3166,
"crossStyle": 466,
"edges": 369,
"links": 3277,
"layout": 846,
"barBorderColor": 721,
"barBorderWidth": 498,
"treemap": 3865,
"y": 367,
"valueIndex": 704,
"showLegendSymbol": 482,
"mapValueCalculation": 492,
"optionToContent": 264,
"handleColor": 187,
"handleSize": 271,
"showContent": 1853,
"angleAxisIndex": 406,
"endValue": 327,
"triggerOn": 1720,
"contentToOption": 169,
"buttonColor": 71,
"rotate": 1144,
"hoverLink": 335,
"outOfRange": 491,
"textareaColor": 58,
"textareaBorderColor": 58,
"textColor": 60,
"buttonTextColor": 66,
"category": 336,
"hideDelay": 786,
"alwaysShowContent": 1267,
"extraCssText": 901,
"effectType": 277,
"force": 1820,
"rippleEffect": 723,
"edgeSymbolSize": 329,
"showEffectOn": 271,
"gravity": 199,
"edgeLength": 193,
"layoutAnimation": 152,
"length2": 169,
"enterable": 957,
"dim": 83,
"readOnly": 143,
"levels": 444,
"textGap": 256,
"pixelRatio": 84,
"nodeScaleRatio": 232,
"draggable": 249,
"brushType": 158,
"radarIndex": 152,
"large": 182,
"edgeSymbol": 675,
"largeThreshold": 132,
"leafDepth": 73,
"childrenVisibleMin": 73,
"minSize": 35,
"maxSize": 35,
"sort": 90,
"funnelAlign": 61,
"source": 336,
"nodeClick": 200,
"curveness": 350,
"areaSelectStyle": 104,
"parallelIndex": 52,
"initLayout": 359,
"trailLength": 116,
"boxWidth": 20,
"back": 53,
"rewind": 110,
"zoomToNodeRatio": 80,
"squareRatio": 60,
"parallelAxisDefault": 358,
"checkpointStyle": 440,
"nodeWidth": 49,
"color0": 62,
"layoutIterations": 56,
"nodeGap": 54,
"color(Array": 76,
"<string>)": 76,
"repulsion": 276,
"tiled": 105,
"currentIndex": 145,
"axisType": 227,
"loop": 97,
"playInterval": 112,
"borderColor0": 23,
"gap": 43,
"autoPlay": 123,
"showPlayBtn": 25,
"breadcrumb": 119,
"colorMappingBy": 85,
"id": 18,
"blurSize": 85,
"minOpacity": 50,
"maxOpacity": 54,
"prevIcon": 12,
"children": 21,
"shape": 98,
"nextIcon": 12,
"showNextBtn": 17,
"stopIcon": 21,
"visibleMin": 83,
"visualDimension": 97,
"colorSaturation": 56,
"colorAlpha": 66,
"emptyItemWidth": 10,
"inactiveOpacity": 4,
"activeOpacity": 4,
"showPrevBtn": 19,
"playIcon": 26,
"ellipsis": 19,
"gapWidth": 19,
"borderColorSaturation": 10,
"handleIcon": 2,
"handleStyle": 6,
"borderType": 1,
"constantSpeed": 1,
"polyline": 2,
"blendMode": 1,
"dataBackground": 1,
"textAlign": 1,
"textBaseline": 1,
"brush": 3
};
var data = [];
for (var key in keywords) {
data.push({
name: key,
value: Math.sqrt(keywords[key])
})
}
var maskImage = new Image();
maskImage.src = 'logo.png';
var option_wordCloud = {
title: {
text: '搜索指数',
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#F7F7F7',
series: [{
name: '搜索指数',
type: 'wordCloud',
//size: ['9%', '99%'],
sizeRange: [10, 50],
//textRotation: [0, 45, 90, -45],
rotationRange: [-45, 90],
//shape: 'circle',
maskImage: maskImage,
textPadding: 0,
autoSize: {
enable: true,
minSize: 2
},
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: data
}]
};
var myChart_wordCloud = echarts.init(document.getElementById('wordCloud'));
maskImage.onload = function() {
myChart_wordCloud.setOption(option_wordCloud);
};
window.onresize = function() {
myChart_wordCloud.resize();
};
window.addEventListener("resize",function(){
myChart_wordCloud.resize();
});
</script>
<script>
var myChart_month_count = echarts.init(document.getElementById('month-count'));
var data = [{
"name": "一月",
"value": 800
}, {
"name": "二月",
"value": 807.8
}, {
"name": "三月",
"value": 171
}, {
"name": "四月",
"value": 280
}, {
"name": "五月",
"value": 606
}, {
"name": "六月",
"value": 880
}, {
"name": "七月",
"value": 680
}, {
"name": "八月",
"value": 580
}, {
"name": "九月",
"value": 980
}, {
"name": "十月",
"value": 480
}, {
"name": "十一月",
"value": 180
}, {
"name": "十二月",
"value": 80
}];
var xData = [],
yData = [];
var min = 50;
data.map(function(a, b) {
xData.push(a.name);
if (a.value === 0) {
yData.push(a.value + min);
} else {
yData.push(a.value);
}
});
option = {
title : {
text: '全国大外网使用月度统计',
x:'center',
y:'top',
textStyle:{//标题内容的样式
color:'white',//京东红
fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily:"san-serif",//主题文字字体，默认微软雅黑
fontSize:18//主题文字字体大小，默认为18px
},
textAlign:'left'
},
backgroundColor:"#111c4e",
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
opacity: 0
}
},
formatter: function(prams) {
if (prams[0].data === min) {
return prams[0].name + "0"
} else {
return prams[0].name + "：" + prams[0].data
}
}
},
legend: {
//data: ['直接访问', '背景'],
show: false
},
grid: {
left: '0%',
right: '0%',
bottom: '5%',
top: '7%',
height: '85%',
containLabel: true,
z: 22
},
xAxis: [{
type: 'category',
gridIndex: 0,
data: xData,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#0c3b71'
}
},
axisLabel: {
show: true,
color: 'rgb(170,170,170)',
fontSize:14
}
}],
yAxis: [{
type: 'value',
gridIndex: 0,
splitLine: {
show: false
},
axisTick: {
show: false
},
min: 0,
//max: 100,
axisLine: {
lineStyle: {
color: '#0c3b71'
}
},
axisLabel: {
color: 'rgb(170,170,170)',
formatter: '{value}'
}
},
{
type: 'value',
gridIndex: 0,
min: min,
max: 100,
splitNumber: 8,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
}
}
}
],
series: [{
name: '合格率',
type: 'bar',
barWidth: '20%',
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
{
offset: 0.5,
color: '#027eff'
},
{
offset: 1,
color: '#0286ff'
}
]
)
}
},
data: yData,
zlevel: 11
},
{
name: '背景',
type: 'bar',
barWidth: '30%',
xAxisIndex: 0,
yAxisIndex: 1,
barGap: '-135%',
//data: [100, 100, 100, 100, 100, 100, 100],
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.1)'
}
},
zlevel: 9
},
]
};
myChart_month_count.setOption(option);
myChart_month_count.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
window.addEventListener("resize",function(){
myChart_month_count.resize();
});
</script>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
//计划单列市
var geoCoordMap = {
"青岛":[120.33,36.07],
"厦门":[118.1,24.46],
"宁波":[121.56,29.86],
"深圳":[114.07,22.62],
"大连":[121.62,38.92]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title : {
text: '全国大外网使用用户分布',
subtext: '数据来自运行部'
},/*
tooltip : {
trigger: 'item'
},*/
tooltip: { //实现分开显示，而不是加和
trigger: 'item',
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = option.series;
if (convertData) {
for (var i = 0; i < myseries.length-1; i++) { //利用这里的减一可以实现散点出现而不用左后一个series
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
}
}
}
}
else {
for (var i = 0; i < myseries.length; i++) {
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
}
}
}
}
return res;
}
},
dataRange: {
orient: 'horizontal',
min: 0,
max: 55000,
text:['高','低'], // 文本，默认为数值文本
splitNumber:0
},
toolbox: {
show : true,
orient: 'vertical',
x:'right',
y:'center',
feature : {
mark : {show: true},
//dataView : {show: true, readOnly: false}//数据视图
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#FFE4CA',
borderColor: '#84C1FF',
borderWidth: 0.8
},
emphasis: {
areaColor: '#FFC78E'
}
}
},
series : [
{
name: '大外网用户分布',
type: 'map',
mapType: 'china',
mapLocation: {
x: 'left'
},
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'西藏', value:605.83},
{name:'青海', value:1670.44},
{name:'宁夏', value:2102.21},
{name:'海南', value:2522.66},
{name:'甘肃', value:5020.37},
{name:'贵州', value:5701.84},
{name:'新疆', value:6610.05},
{name:'云南', value:8893.12},
{name:'重庆', value:10011.37},
{name:'吉林', value:10568.83},
{name:'山西', value:11237.55},
{name:'天津', value:11307.28},
{name:'江西', value:11702.82},
{name:'广西', value:11720.87},
{name:'陕西', value:12512.3},
{name:'黑龙江', value:12582},
{name:'内蒙古', value:14359.88},
{name:'安徽', value:15300.65},
{name:'北京', value:16251.93},
{name:'福建', value:17560.18},
{name:'上海', value:19195.69},
{name:'湖北', value:19632.26},
{name:'湖南', value:19669.56},
{name:'四川', value:21026.68},
{name:'辽宁', value:22226.7},
{name:'河北', value:24515.76},
{name:'河南', value:26931.03},
{name:'浙江', value:32318.85},
{name:'山东', value:45361.85},
{name:'江苏', value:49110.27},
{name:'广东', value:53210.28},
{name: '青岛',value:20000},
{name: '宁波',value:49110},
{name: '厦门',value:24515},
{name: '大连',value:16251},
{name: '深圳',value:11720}
]
},
{
name: '计划单列市',
type: 'effectScatter',//影响散点
coordinateSystem: 'geo',
symbolSize: 12,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
color: '#c60fff',
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#c60fff',
shadowBlur: 10,
shadowColor: '#333'
},
},
data: convertData([
{name: "青岛"},//把{name: "青岛", value: 1}换成{name: "青岛"}即可不随着值变换颜色
{name: "厦门"},
{name: "宁波"},
{name: "深圳"},
{name: "大连"},
]),
}
],
animation: false
};
myChart.setOption(option);
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
window.addEventListener("resize",function(){
myChart.resize();
});
</script>
</body>
</html>
扫一扫
1217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
