数据源
https://zhuanlan.zhihu.com/p/25130679
Tableau
Tableau制作地图数据
将这两张图组合在一起
image.png
image.png
https://www.jianshu.com/p/d81ebe0f7240
tableau的库
https://public.tableau.com/zh-cn/s/gallery
纽扣数据部分
https://doc.niucodata.com/index.php?s=/1&page_id=2
API文档如图
利用postman来调用请求
image.png
拿到数据的json key value对
Echart部分
- 数据转换
http://echarts.baidu.com/spreadsheet.html
image.png
利用此部分可将excel快速转换为键值对的形式
利用如此代码转换数据
input = {"result": {"data": [
{
"time": "2018-05-08",
"index": 5774
},
x = new Array();
y = new Array();
for (var i = 0; i <input.result.data.length; i++) {
x.push(input.result.data[i].time)
y.push(input.result.data[i].index)
- 表格制作
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
下载好echarts.common.min.js包，并将写好的html与他放在同一级路径下。
-
曲线图（借助模版）
代码示例
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.common.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
input = {"result": {"data": [
{
"time": "2018-05-08",
"index": 5774
},
{
"time": "2018-05-07",
"index": 2048
},
{
"time": "2018-05-06",
"index": 1362
},
{
"time": "2018-05-05",
"index": 2220
},
{
"time": "2018-05-04",
"index": 3406
},
{
"time": "2018-05-03",
"index": 5614
},
{
"time": "2018-05-02",
"index": 12694
},
{
"time": "2018-05-01",
"index": 5484
},
{
"time": "2018-04-30",
"index": 3807
},
{
"time": "2018-04-29",
"index": 8382
},
{
"time": "2018-04-28",
"index": 29308
},
{
"time": "2018-04-27",
"index": 18446
},
{
"time": "2018-04-26",
"index": 4608
},
{
"time": "2018-04-25",
"index": 6625
},
{
"time": "2018-04-24",
"index": 11684
},
{
"time": "2018-04-23",
"index": 5186
},
{
"time": "2018-04-22",
"index": 9488
},
{
"time": "2018-04-21",
"index": 13587
},
{
"time": "2018-04-20",
"index": 15496
},
{
"time": "2018-04-19",
"index": 47597
},
{
"time": "2018-04-18",
"index": 35225
},
{
"time": "2018-04-17",
"index": 8937
},
{
"time": "2018-04-16",
"index": 9874
},
{
"time": "2018-04-15",
"index": 17381
},
{
"time": "2018-04-14",
"index": 3762
},
{
"time": "2018-04-13",
"index": 4959
},
{
"time": "2018-04-12",
"index": 8566
},
{
"time": "2018-04-11",
"index": 14907
},
{
"time": "2018-04-10",
"index": 4845
},
{
"time": "2018-04-09",
"index": 11993
},
{
"time": "2018-04-08",
"index": 12192
},
{
"time": "2018-04-07",
"index": 12085
},
{
"time": "2018-04-06",
"index": 10086
},
{
"time": "2018-04-05",
"index": 5671
},
{
"time": "2018-04-04",
"index": 15708
},
{
"time": "2018-04-03",
"index": 25596
},
{
"time": "2018-04-02",
"index": 949
},
{
"time": "2018-04-01",
"index": 2517
},
{
"time": "2018-03-31",
"index": 7301
},
{
"time": "2018-03-30",
"index": 9369
},
{
"time": "2018-03-29",
"index": 3750
},
{
"time": "2018-03-28",
"index": 2044
},
{
"time": "2018-03-27",
"index": 2261
},
{
"time": "2018-03-26",
"index": 588
},
{
"time": "2018-03-25",
"index": 359
},
{
"time": "2018-03-24",
"index": 1319
},
{
"time": "2018-03-23",
"index": 56
},
{
"time": "2018-03-22",
"index": 310
},
{
"time": "2018-03-21",
"index": 81
},
{
"time": "2018-03-20",
"index": 18
},
{
"time": "2018-03-19",
"index": 35
},
{
"time": "2018-03-18",
"index": 720
},
{
"time": "2018-03-17",
"index": 1855
},
{
"time": "2018-03-16",
"index": 8269
},
{
"time": "2018-03-15",
"index": 1407
},
{
"time": "2018-03-14",
"index": 691
},
{
"time": "2018-03-13",
"index": 367
},
{
"time": "2018-03-12",
"index": 252
},
{
"time": "2018-03-11",
"index": 114
},
{
"time": "2018-03-10",
"index": 3303
},
{
"time": "2018-03-09",
"index": 2912
}
],
"name": "重庆大学的折线统计"
},
"error": false,
"info": "Success."
};
x = new Array();
y = new Array();
for (var i = 0; i <input.result.data.length; i++) {
x.push(input.result.data[i].time)
y.push(input.result.data[i].index)
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
// var option = {
// title: {
// text: 'ECharts 入门示例'
// },
// tooltip: {},
// legend: {
// data:['热度']
// },
// xAxis: {
// data: x
// },
// yAxis: {},
// series: [{
// name: '热度',
// type: 'pie',
// data: y
// }]
// };
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: '重庆大学热度图',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: x
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'模拟数据',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
},
data: y
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
-
折线图
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.common.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
input = {
"result": {
"data": [
{
"time": "2018-05-08",
"index": 5774
},
{
"time": "2018-05-07",
"index": 2048
},
{
"time": "2018-05-06",
"index": 1362
},
{
"time": "2018-05-05",
"index": 2220
},
{
"time": "2018-05-04",
"index": 3406
},
{
"time": "2018-05-03",
"index": 5614
},
{
"time": "2018-05-02",
"index": 12694
},
{
"time": "2018-05-01",
"index": 5484
},
{
"time": "2018-04-30",
"index": 3807
},
{
"time": "2018-04-29",
"index": 8382
},
{
"time": "2018-04-28",
"index": 29308
},
{
"time": "2018-04-27",
"index": 18446
},
{
"time": "2018-04-26",
"index": 4608
},
{
"time": "2018-04-25",
"index": 6625
},
{
"time": "2018-04-24",
"index": 11684
},
{
"time": "2018-04-23",
"index": 5186
},
{
"time": "2018-04-22",
"index": 9488
},
{
"time": "2018-04-21",
"index": 13587
},
{
"time": "2018-04-20",
"index": 15496
},
{
"time": "2018-04-19",
"index": 47597
},
{
"time": "2018-04-18",
"index": 35225
},
{
"time": "2018-04-17",
"index": 8937
},
{
"time": "2018-04-16",
"index": 9874
},
{
"time": "2018-04-15",
"index": 17381
},
{
"time": "2018-04-14",
"index": 3762
},
{
"time": "2018-04-13",
"index": 4959
},
{
"time": "2018-04-12",
"index": 8566
},
{
"time": "2018-04-11",
"index": 14907
},
{
"time": "2018-04-10",
"index": 4845
},
{
"time": "2018-04-09",
"index": 11993
},
{
"time": "2018-04-08",
"index": 12192
},
{
"time": "2018-04-07",
"index": 12085
},
{
"time": "2018-04-06",
"index": 10086
},
{
"time": "2018-04-05",
"index": 5671
},
{
"time": "2018-04-04",
"index": 15708
},
{
"time": "2018-04-03",
"index": 25596
},
{
"time": "2018-04-02",
"index": 949
},
{
"time": "2018-04-01",
"index": 2517
},
{
"time": "2018-03-31",
"index": 7301
},
{
"time": "2018-03-30",
"index": 9369
},
{
"time": "2018-03-29",
"index": 3750
},
{
"time": "2018-03-28",
"index": 2044
},
{
"time": "2018-03-27",
"index": 2261
},
{
"time": "2018-03-26",
"index": 588
},
{
"time": "2018-03-25",
"index": 359
},
{
"time": "2018-03-24",
"index": 1319
},
{
"time": "2018-03-23",
"index": 56
},
{
"time": "2018-03-22",
"index": 310
},
{
"time": "2018-03-21",
"index": 81
},
{
"time": "2018-03-20",
"index": 18
},
{
"time": "2018-03-19",
"index": 35
},
{
"time": "2018-03-18",
"index": 720
},
{
"time": "2018-03-17",
"index": 1855
},
{
"time": "2018-03-16",
"index": 8269
},
{
"time": "2018-03-15",
"index": 1407
},
{
"time": "2018-03-14",
"index": 691
},
{
"time": "2018-03-13",
"index": 367
},
{
"time": "2018-03-12",
"index": 252
},
{
"time": "2018-03-11",
"index": 114
},
{
"time": "2018-03-10",
"index": 3303
},
{
"time": "2018-03-09",
"index": 2912
}
],
"name": "重庆大学的折线统计"
},
"error": false,
"info": "Success."
};
x = new Array();
y = new Array();
for (var i = 0; i <input.result.data.length; i++) {
x.push(input.result.data[i].time)
y.push(input.result.data[i].index)
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['热度']
},
xAxis: {
data: x
},
yAxis: {},
series: [{
name: '热度',
type: 'bar',
data: y
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
-
扇形图
image.png
示例代码 通过ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.common.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
})
</script>
</body>
</html>
可视化之后数据的调用
- 实现数据库的调用 利用ajax前端代码去请求
可能需要对数据做整理，这一阶段可以在前端代码处理也可以通过python或者java连接数据库处理（有对应的库）要把数据库先部署在服务器上面。 - 实现页面上数据的实时执行更新的话，可以通过以下两种方式：
- js定时执行
- websocket：通过聊天室的模式进行实时的更新广播来执行。
- 代码接口
- 部署在服务器上，去请求和调用。
- 直接通过打包的形式去调用。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<!-- 导入ECharts -->
<script type="text/javascript" src="js/jquery.js" charset="UTF-8"></script>
<script src="js/echarts.js" charset="UTF-8"></script>
</head>
<body>
<!-- ECharts 定义长*宽的 DOM -->
<div id="main" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
x = new Array();
y = new Array();
function loadDATA(option) {
$.ajax({
type : "post",
async : false, //异步（同步处理无法显示）
url : "reflection",
data : {},
dataType : "json", //数据类型为json
success : function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
x.push(result[i].datetime)
y.push(result[i].reflection)
}
}
}
});
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text : '反射功率'
},
tooltip : {
trigger : 'axis'
},
xAxis : {
data : x,
},
yAxis : {
min : 0,
splitLine : {
show : false
}
},
toolbox : {
left : 'center',
feature : {
dataZoom : {
yAxisIndex : 'none'
},
restore : {},
saveAsImage : {}
}
},
dataZoom : [ {
start : 0,
end : 100,
}, {
type : 'inside'
} ],
visualMap : {
top : 370,
right : 0,
pieces : [ {
gt : 1500,
lte : 1800,
color : '#069911'
}, {
gt : 1800,
lte : 2100,
color : '#069911'
}, {
gt : 2100,
lte : 2400,
color : '#069911'
}, {
gt : 2400,
lte : 2700,
color : '#069911'
}, {
gt : 2700,
lte : 3000,
color : '#99193a'
}, {
gt : 3000,
color : '#7e0023'
} ],
outOfRange : {
color : '#999'
}
},
series : {
name : 'Power',
type : 'line',
data:y,
markLine : {
silent : true,
data : [ {
yAxis : 8
}, {
yAxis : 10
}, {
yAxis : 12
}, {
yAxis : 13
}, {
yAxis : 14
}, {
yAxis : 15
} ]
}
}
};
loadDATA(option)
myChart.setOption(option)
</script>
</body>
</html>
网友评论