数据可视化

作者: Babus | 来源:发表于2018-05-09 16:27 被阅读0次

python生成数据
数据可视化方案
数据可视化基础知识
第一章数据可视化简介
这篇文章你一定要阅读：大数据可视化以及几款数据可视化的工具介绍
Python 教程：使用 Matplotlib 和 Seabor
第三章数据可视化
数据可视化<第一天>
数据可视化.视频.2017-09-26
基于Python的数据可视化：从一维到多维

数据源

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>

python生成数据
数据可视化指：数据可视化指的是通过可视化表示来探索数据，它与数据挖掘紧密相关。数据挖掘：数据挖掘指的是使用代...
数据可视化方案
数据可视化-数据大屏-产品介绍可视化大数据时代，数据可视化将成为IT领域一个重点发展方向。数据可视化已经不在是...
数据可视化基础知识
1. 数据可视化简介创建图表探索数据并分享结果数据可视化：量化信息的可视化 2. 为何使用数据可视化？安斯库姆...
第一章数据可视化简介
第一章数据可视化简介 1.1 数据可视化简史 1.1.1 20世纪前的数据可视化数据可视化有着悠久的历史，并在...
这篇文章你一定要阅读：大数据可视化以及几款数据可视化的工具介绍
大数据可视化是什么数据可视化要根据数据的特性，可视化要根据数据的特性，如时间信息和空间信息等，找到合适的可视化方...
Python 教程：使用 Matplotlib 和 Seabor
数据可视化是以图形、图表和其他可视化表示形式表示数据的过程。它通过提供可视化表示来帮助我们理解数据。数据可视化是数...
第三章数据可视化
第一章数据可视化简介第二章数据第三章数据可视化 3.1 数据可视化流程数据可视化是一个相当复杂的过程，...
数据可视化<第一天>
数据可视化数据可视化是指通过可视化表示来探索数据，它与数据挖掘紧密相关而数据挖掘指的是使用代码来探索数据集的规律...
数据可视化.视频.2017-09-26
统计学：数据图像化大卫.麦克德里斯：数据可视化之美 Uber数据可视化TED 颠覆性的数据可视化演示(2) 数据可...
基于Python的数据可视化：从一维到多维
目录一、iris数据集介绍二、一维数据可视化三、二维数据可视化四、多维数据可视化五、参考资料一、iris数据集...