数据可视化

最新推荐文章于 2022-12-22 17:49:01 发布

半_调_子

最新推荐文章于 2022-12-22 17:49:01 发布

阅读量487

点赞数

文章标签： html javascript html5

本文链接：https://blog.csdn.net/wangjunji34478/article/details/113702949

版权

数据可视化前言

echarts的基本使用

echarts的高级使用

电商平台数据可视化实时监控系统

后台搭建

结合vue开发图表组件

websocket实现数据可视化

主题切换、页面合并、全屏切换

知识储备

html css js

echarts的使用

vue , vuex , router , webpack

websocker的使用

一、课程简介

数据可视化前言：

数据可视化概念

项目演示：

该项目为电商平台数据可视化实时监控系统

可以保证实时获取数据进行分析

支持大屏展示，自适应分辨率

支持联动效果，一端操作，多端联动展示

1.3技术选型

echarts

vue,vue router,vuex

webpack

Axios

websocket

实现前后端交互

什么是数据可视化

可视化的实现方式：

1、报表类

Excel

水晶报表

2、商业智能BI

Microsoft bi

power bi

3、编码类

Echats.js

D3.js

Echarts的介绍：

Echats是一个使用javascript实现的开源的可视化库，兼容性强，底层依赖矢量图形库Zrender,提供直观，交互丰富，可高度个性化定的数据可视化的图表。

Echarts的快带入门

Echarts的常用图表：encharts 官网地址：https://echarts.apache.org/zh/index.html

Echats的特点：

多种数据格式支持：

key -value 数据格式

二维表

TypedArray格式

Echarts的特点：

流数据的支持：

流数据的动态渲染

增量渲染技术

移动端优化

跨平台的使用

绚丽的物效

三维可视化

Echarts的特点：

小结：Echarts能满足绝大多数可视化图表实现

兼容性强

使用方便

功能强大

实现数据可视化的最佳选择之一。

Echars的基本使用：

5分钟上手

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/echarts.js"></script>

</head>
<body>
    <div style="width: 600px;height: 400px">

    </div>
    <script>
        //参数：dom,决定图表最终呈现的位置
        var mCharts =    echarts.init(document.querySelector("div"))
        //步骤准备配置项
        var option = {
            title:{
                text:'语文成绩',
                link:"https://www.baidu.com",
                color:"red"
            },
            xAxis:{
                type:'category',
                data:['小明','小红','小王']
            },
            yAxis:{
              type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:[70,92,87]
                }
            ]
        }

        mCharts.setOption(option)

    </script>

</body>
</html>

7大图表：

图表1：柱状图

图表2：折线图

图表3：散点图

图表4：饼图

图表5：地图

图表6：雷达图

图表7：仪表盘图