前端开发工程师——数据可视化

已于 2024-05-23 10:10:23 修改
阅读量475 收藏 5
点赞数 12
分类专栏： 前端工程师学习 文章标签： 信息可视化
于 2024-05-22 17:42:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74421072/article/details/139087003
版权

canvas

canvas绘制线段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    canvas {
        border: 1px solid rgb(32, 30, 30);
    }
</style>
<body>
    <!-- canvas画布：双闭合标签 -->
    <!-- canvas默认标签宽度与高度 300 * 150 -->
    <!-- 在canvas中添加文字内容没有任何意义，只能通过js -->
    <!-- canvas的高度和宽度只能通过标签属性来设置 -->
    <!-- 不能通过样式设置宽度和高度 -->
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    // 通过js当中的笔去完成
    let canvas = document.querySelector('canvas');
    // 获取画布的笔（上下文）
    let ctx = canvas.getContext('2d');
    // 可以获取一些方法对象
    // console.log(ctx)
    // 绘制线段：绘制线段起点设置
    ctx.moveTo(100,100);
    // 其他点设置
    ctx.lineTo(100,200);
    ctx.lineTo(200,100);
    // 设置图形的填充的颜色，下面的fill是一起的
    ctx.fillStyle = 'red';
    ctx.fill();
    // 设置线段的颜色
    ctx.strokeStyle = 'pink';
    // 设置线段的宽度
    ctx.lineWidth = '20';
    // closePath方法表示起点和最终结束点的连接
    ctx.closePath();
    // stroke方法表示起点的其他点的连接
    ctx.stroke();
</script>

 canvas绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    canvas {
        border: 1px solid rgb(32, 30, 30);
    }
</style>
<body>
    
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    // 获取节点
    let canvas = document.querySelector('canvas');
    // 获取上下文
    let ctx = canvas.getContext('2d');
    // 绘制矩形的第一种方法：参数为x,y,w,h;x:表示距离水平轴的距离，y表示距离上面顶部的距离，w表示100宽度，h表示高度200
    // 这种方法是不能设置填充颜色的
    ctx.strokeRect(100,200,100,200);
    // 第二种：填充矩形，参数和上面一样
    // 注意：必须要在绘制图形之前填充颜色
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    ctx.fillRect(300,200,100,200);

</script>

canvas绘制圆形

arc(x,y,redius,startAngle,endAngle,anticlockwise)

  • x:圆心的x坐标
  • y:圆心的y坐标
  • redius:半径
  • startAngle:开始角度
  • endAngle:结束角度
  • anticlockwise：是否逆时针（true）逆时针，false顺时针
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    canvas {
        border: 1px solid rgb(32, 30, 30);
    }
</style>
<body>
    
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    // 获取canvas
    let canvas = document.querySelector('canvas')
    // 获取上下文
    let ctx = canvas.getContext('2d')
    // 绘制圆形
    // 开始绘制
    ctx.beginPath();
    // 绘制圆形的方法：x,y,r,起始弧度，结束弧度，是否逆时针，360°=2.PI
    ctx.arc(100,100,50,0,2 * Math.PI,true);
    // 是指填充颜色
    ctx.fillStyle = 'red';
    ctx.fill()
    // 绘制圆
    ctx.stroke();


    // 绘制第二个圆
    // 注意：弧度有一个计算
    // 2 * PI * 弧度 = 360
    ctx.beginPath();
    ctx.arc(200,200,50,0,1,false);
    ctx.stroke();

</script>

清除画布和绘制文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    canvas {
        border: 1px solid rgb(32, 30, 30);
    }
</style>
<body>
    
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    // 获取节点
    let canvas = document.querySelector('canvas')
    // 获取上下文
    let ctx = canvas.getContext('2d')
    // 绘制矩形
    ctx.fillRect(100,200,100,200);
    // 清除画布
    // 清除全部画布
    // ctx.clearRect(0,0,600,400);
    // 清除部分画布
    // 表示x,y,宽度50，高度100
    ctx.clearRect(100,200,50,100);
    // 绘制文字
    // 设置文字大小
    ctx.font = "20px 微软雅黑";
    ctx.fillStyle = 'red';
    // 绘制文字
    // 参数表示：需要的文字，x,y坐标
    ctx.fillText("数据可视化",50,20)

</script>

绘制柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    /* canvas {
        border: 1px solid rgb(201, 109, 109);
    } */
</style>
<body>
    
    <canvas width="800" height="420"></canvas>
</body>
</html>
<script>
    // 获取节点
    let canvas = document.querySelector('canvas');
    // 获取上下文
    let ctx = canvas.getContext('2d');
    // 绘制文字
    ctx.font = '16px 微软雅黑';
    ctx.fillText('数据可视化',50,80);
    // 绘制主线
    ctx.moveTo(100,100);
    ctx.lineTo(100,400);
    ctx.lineTo(700,400);
    // 连接点
    ctx.stroke();

    // 其他线
    ctx.moveTo(100,100);
    ctx.lineTo(700,100);
    ctx.fillText('150',70,110);
    ctx.moveTo(100,160);
    ctx.lineTo(700,160);
    ctx.fillText('120',70,170);
    ctx.moveTo(100,220);
    ctx.lineTo(700,220);
    ctx.fillText('90',70,230);
    ctx.moveTo(100,280);
    ctx.lineTo(700,280);
    ctx.fillText('60',70,290);
    ctx.moveTo(100,340);
    ctx.lineTo(700,340);
    ctx.fillText('30',70,350);
    ctx.fillText('0',80,400);
    ctx.stroke();

    // 绘制水平轴底部的线
    ctx.moveTo(250,400);
    ctx.lineTo(250,410);
    // 底部的文字
    ctx.fillText('食品',170,415);
    ctx.moveTo(400,400);
    ctx.lineTo(400,410);
    ctx.fillText('数码',310,415);
    ctx.moveTo(550,400);
    ctx.lineTo(550,410);
    ctx.fillText('服饰',460,415);
    ctx.fillText('箱包',600,415);
    ctx.stroke();

    // 绘制矩形
    ctx.fillStyle = 'red'
    ctx.fillRect(120,200,100,200)
</script>

svg 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 800px;
        height: 800px;
    }
</style>
<body>
    <!-- svg双闭合标签：默认宽度和高度300*150，svg绘制图形务必在svg标签内部绘制图形 -->
    <svg class="box">
        <!-- x1 y1第一个点的坐标，x2 y2第二个点的坐标，stroke表示绘制
        line标签用于绘制直线
        -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
        <!-- 绘制折线 -->
        <!-- <polyline points="x1 y1 x2 y2 x3 y3"></polyline> -->
        <!-- 折线默认是填充黑色，fill-opacity去除填充，stroke表示折线颜色 -->
        <polyline points="300 300, 50 100, 120 400" fill-opacity="0" stroke="cyan"></polyline>
        <!-- 绘制矩形 -->
        <!-- fill属性：表示填充颜色 -->
        <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
        <!-- 绘制圆型 -->
        <!-- cx，cy表示圆心，r半径，style表示样式 -->
        <circle cx="370" cy="95" r="50" style="stroke: black; fill:none" ></circle>

        <!-- 绘制椭圆 -->
        <!-- cx,cy表示圆心，rx表示x轴半径，ry表示y轴半径 -->
        <ellipse cx="500" cy="500" rx="100" ry="50" style="fill: black;"></ellipse>
        <!-- 绘制多边形 -->
        <!-- <polygon points="x1 y1, x2 y2, x3 y3"></polygon> -->
        <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"></polygon>

        <!-- 绘制任意图型 -->
        <!-- M：移动到初始位置 L：画线 Z：将结束和开始点闭合-->
        <!-- <path d="
        M x1 y1
        L x2 y2
        L x3 y3
        Z
        ">

        </path> -->
        <path d="
        M 10 10
        L 400 20
        L 30 120
        L 50 99
        Z
        ">

        </path>
    </svg>
</body>
</html>

ECharts

echarts基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <!-- 准备一个容器用于显示图标 -->
    <div></div>
</body>
</html>
<script>
    // 基于准备好的dom初始化echarts实例
    let dom = document.querySelector('div');
    // 创建echarts实例
    let mycharts = echarts.init(dom);
    // console.log(mycharts);
    // 指定图表 的配置项与数据
    mycharts.setOption({
        // 图表的标题
        title:{
            // 主标题的设置
            text:'数据可视化',
            // 子标题
            subtext:'echarts基本使用',
            // 主标题的颜色
            textStyle:{
                color:'cyan'
            },
            // 设置标题的位置
            left:'center',
        },
        // x轴的配置项
        xAxis:{
            // 数据
            // data表示底部数据的设置
            data:['衣服','直播','游戏','电影']
        },
        // y轴的配置项
        yAxis:{
            // 显示y轴的线
            axisLine:{
                show:true
            },
            // 显示y轴的刻度
            axisTick:{
                show:true
            },
        },
        // 系列的设置：绘制什么样类型的图表，数据的展示都在这里
        series:[
            {
                // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
                type:'bar',
                data:[10,20,30,40],
                // 表示柱状图的颜色
                color:'blue',
            }
        ]
        
    })
</script>

多个容器显示多个表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <!--准备一个容器用于显示图标 -->
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
<script>
    // 基于准备好的dom初始化echarts实例
    let dom1 = document.querySelector('.box1');
    let dom2 = document.querySelector('.box2')
    // 创建echarts实例
    let mycharts1 = echarts.init(dom1);
    let mycharts2 = echarts.init(dom2);
    // console.log(mycharts);
    // 指定图表 的配置项与数据
    mycharts1.setOption({
        // 图表的标题
        title:{
            // 主标题的设置
            text:'数据可视化',
            // 子标题
            subtext:'echarts基本使用',
            // 主标题的颜色
            textStyle:{
                color:'cyan'
            },
            // 设置标题的位置
            left:'center',
        },
        // x轴的配置项
        xAxis:{
            // 数据
            // data表示底部数据的设置
            data:['衣服','直播','游戏','电影']
        },
        // y轴的配置项
        yAxis:{
            // 显示y轴的线
            axisLine:{
                show:true
            },
            // 显示y轴的刻度
            axisTick:{
                show:true
            },
        },
        // 系列的设置：绘制什么样类型的图表，数据的展示都在这里
        series:[
            {
                // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
                type:'bar',
                data:[10,20,30,40],
                // 表示柱状图的颜色
                color:'blue',
            }
        ]
        
    });
    // 第二个图表的配置项
    mycharts2.setOption({
        title:{
            // 主标题
            text:'折线图',
            left:'center',
            textStyle:{
                color:'red',
            },
            // 子标题
            subtext:'echarts基本使用',
            subtextStyle:{
                color:'skyblue',
            }
        },
        // x轴
        xAxis:{
            data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
        },
        // y轴
        yAxis:{

        },
        // 图表类型与数据
        series:[
            {
                type:'line',
                data:[10,20,15,44,2,19,100],
            }
        ]
    })
</script>

一个容器显示多个图表

 series:[
            {
                // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
                type:'bar',
                data:[10,20,30,40],
                // 表示柱状图的颜色
                color:'blue',
            },
            {
                // 折线图
                type:'line',
                data:[10,20,30,40]
            },
            {
                // 饼图
                type:'pie',
                // name:名称，value：值,显示文字
                data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],
                // 饼图的宽度和高度
                width:150,
                height:150,
                // 饼图的位置
                left:150,
                top:100,
                // 表示饼图的半径
                radius:25,
            }
        ]

数据集和dataset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 800px;
        height: 400px;
    }
</style>
<body>
    <!--准备一个容器用于显示图标 -->
    <div class="box1"></div>
    
</body>
</html>
<script>
    // 基于准备好的dom初始化echarts实例
    let dom1 = document.querySelector('.box1');
    
    // 创建echarts实例
    let mycharts1 = echarts.init(dom1);
    // 数据集
    let data = [
        // 第一个是衣服，第二个是10表示柱状图数据，第二个表示折线图数据，第三个表示饼图名字是x的数据
        ["衣服",10,46,'x',30],
        ["直播",20,28,'y',40],
        ["游戏",30,39,'z',20],
        ["电影",5,10,'t',10],
    ]
    // console.log(mycharts);
    // 指定图表 的配置项与数据
    mycharts1.setOption({
        // 设置字符集
        dataset:{
            // 数据源
            source:data
        },
        // 图表的标题
        title:{
            // 主标题的设置
            text:'数据可视化',
            // 子标题
            subtext:'echarts基本使用',
            // 主标题的颜色
            textStyle:{
                color:'cyan'
            },
            // 设置标题的位置
            left:'center',
        },
        // x轴的配置项
        xAxis:{
            // 数据
            // data表示底部数据的设置
            data:['衣服','直播','游戏','电影']
        },
        // y轴的配置项
        yAxis:{
            // 显示y轴的线
            axisLine:{
                show:true
            },
            // 显示y轴的刻度
            axisTick:{
                show:true
            },
        },
        // 系列的设置：绘制什么样类型的图表，数据的展示都在这里
        series:[
            {
                // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
                type:'bar',
                // data:[10,20,30,40],
                // 表示柱状图的颜色
                color:'blue',
                encode:{
                    // encode表示可以定义data中的数据表示那个表，y表示data中柱状图的数据位置
                    y:1
                }
            },
            {
                // 折线图
                type:'line',
                // data:[10,20,30,40]
                encode:{
                    y:2
                }
            },
            {
                // 饼图
                type:'pie',
                // name:名称，value：值,显示文字
                // data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],
                // 饼图的宽度和高度
                width:150,
                height:150,
                // 饼图的位置
                left:120,
                top:150,
                // 表示饼图的半径
                radius:25,
                encode:{
                    // 饼图旁边的文字
                    itemName:3,
                    value:4
                }
            }
        ]
        
    });
    // 第二个图表的配置项
   
</script>

内置组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        height: 500px;
        /* border: 1px solid rgb(68, 60, 60); */
    }
</style>
<body>
    <div class="box"></div>    
</body>
</html>
<script>
    // 获取容器
    let dom = document.querySelector('.box');
    // 初始化
    let mycharts = echarts.init(dom);
    // console.log(mycharts);
    // 配置数据
    mycharts.setOption({
        // 标题
        title:{
            text:'echarts组件'
        },
        xAxis:{
            data:['游戏','电影','直播','娱乐']
        },
        yAxis:{},
        series:[
            {
                name:'柱状图',
                type:'bar',
                data:[20,30,40,50]
            },
            {
                name:'折线图',
                type:'line',
                data:[30,40,50,60]
            }
        ],
        // 提示组件
        tooltip:{
            // 提示框文字的颜色
            textStyle:{
                color:'red'
            }
        },
        // 系列切换组件
        legend:{
            data:['柱状图','折线图']
        },
        // 工具栏组件
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{},
                dataZoom:{
                    yAxisIndex:"none"
                },
                dataView:{
                    readOnly:false
                },
                magicType:{
                    type:['line','bar']
                },
                restore:{},
            }
        },
        // 缩放
        dataZoom:{},
        // 调整图表布局
        grid:{
            left:30
        }
    })
</script>

 

 

坐标体系

单个坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        height: 500px;
        /* border: 1px solid rgb(68, 60, 60); */
    }
</style>
<body>
    <div class="box"></div>    
</body>
</html>
<script>
    // 获取容器
    let dom = document.querySelector('.box');
    // 初始化
    let mycharts = echarts.init(dom);
    // 一个坐标体系：散点图
    mycharts.setOption({
        // 标题
        title:{
            text:'一个坐标系'
        },
        // x轴
        xAxis:{
            // 可以是数据更加聚合
            type:'category'
        },
        // y轴
        yAxis:{},
        // 散点图
        series:[
            {
                type:'scatter',
                // 散点图数据
                data:[
                    [10,20],
                    [30,64],
                    [20,16],
                    [78,56],
                ]
            }
        ]
    })
</script>

双坐标体系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        height: 500px;
        /* border: 1px solid rgb(68, 60, 60); */
    }
</style>
<body>
    <div class="box"></div>    
</body>
</html>
<script>
    // 获取容器
    let dom = document.querySelector('.box');
    // 初始化
    let mycharts = echarts.init(dom);
    // 双坐标
    mycharts.setOption({
        title:{
            text:'双坐标'
        },
        xAxis:{
            data:['游戏','直播','经济','娱乐']
        },
        yAxis:[
            {
                // 显示y轴的线
                axisLine:{
                    show:true
                },
                // 显示y轴的刻度
                axisTick:{
                    show:true
                }
            },
            {
                // 显示y轴的线
                axisLine:{
                    show:true
                },
                // 显示y轴的刻度
                axisTick:{
                    show:true
                }
            }
        ],
        series:[
            {
                type:'line',
                data:[10,20,30,40],
                // 表示折线图用的是第一个y轴，索引值为0的y轴
                yAxisIndex:0,
            },
            {
                type:'bar',
                data:[5,10,20,30],
                // 表示柱状图用的是第二个y轴
                yAxisIndex:1
            }
        ]
    })
</script>

南栀北夏ii
关注
  • 12
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Python大作业——爬虫+可视化+数据分析+数据库（可视化篇）
m0_67402731的博客
08-02 3977
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。color#FFFFFF;，由UI图我们首先可以将界面分为左右两个部件，并为它们设置Name标示，随后将左右两侧的部件加入主部件中，并为他们设置位置以及所占大小。创建三个标签并为它们设置Name标示，随后创建九个按钮，同样设置Name标识，并在左侧布局中加入这些标签和按钮。..
想要应聘前端工程师——了解前端招聘需求
SmiledrinkCat的博客
04-27 786
市场对前端工程师的需求依然旺盛。所谓知己知彼，百战不殆，分析各个公司对前端工程师的招聘需求，一方面可以了解到前端各细分领域在企业的需求情况，调整自己对岗位和薪资的期待，另一方面可以获得各种前端技术在企业中的应用情况，调整自己的学习和面试准备方向。因篇幅所限，文中仅列举少数大厂的岗位分布情况。
Davinci可视化平台 ——前端部分代码开发
huzhenv5的博客
02-08 1万+
Davinci 是一个 DVaaS（Data Visualization as a Service）平台解决方案，面向业务人员/数据工程师/数据分析师/数据科学家，致力于提供一站式数据可视化解决方案。 Davinci源码地址： https://github.com/edp963/davinci Davinci源码大概分为三部分： 采用React的前端工程 采用Spring Boot的后端工程 采...
数据可视化学习笔记一——概述
wsdchong的博客
07-15 1578
工作准备 文章目录工作准备工作内容补充说明地理信息数字化技术GISQGisPostGISPostgreSQL可视化技术echartsmapboxthree.js[Vue.js Examples](https://vuejsexamples.com/)数据处理技术Spark数据存储、查询及Rdd操作互联网数据爬虫数据分析技术数据挖掘通用机器学习算法学习说明 工作内容 岗位：web前端开发工程师 岗位职责：1参与大数据可视化平台研发；2参与大数据查询系统的研发；3能独立完成网站页面开发；4负责使用美观的组件将数
数据可视化概览
般若
12-07 2万+
科学可视化（Scientific Visualization）、 信息可视化（Information Visualization）和可视分析学（Visual Analytics）三个学科方向通常被看成可视化的三个主要分支。而将这三个分支整合在一起形成的新学科 “数据可视化”，这是可视化研究领域的新起点。
数据分析可视化01 掌握数字化转型时代的必备技能
fegus的博客
10-05 947
本课时，我为你详细介绍了数据分析、数据挖掘、数据可视化和数据可视化分析的概念和体系结构，旨在让你对于数据可视化分析有一个明确的认知。明确了它们的概念，再回到我在本课时一开始提到的业务案例，你是否已经有了明确的答案呢？不妨结合我讲述的知识体系，尝试着寻找答案。欢迎你将你的思考写在留言区，与我和其他同学进行讨论。
Python数据分析入门（一）——初探数据可视化
热门推荐
Carl1994的博客
08-10 7万+
前言 静下心算算，当程序员已经有好几年了，不过自大学时代开始，学习对我来说就是个被动接受的过程，学校的课程、当时热门的移动端开发、数据库的学习、web学习、PHP后端学习……需要做什么我便去学什么，到了今天，突然意识到我是不是该给自己一个明确的发展方向了，毕竟岁月不饶人，96年的小朋友都参加工作了，不精通某一领域始终都会觉得浑浑噩噩。因为对大数据比较感兴趣，而这方面的知识挖掘空间和发展空间都很大...
使用 Python 进行数据可视化之Bokeh(1)
2301_81749759的博客
04-22 787
"""))同样，更多的小部件可用，如下拉菜单或选项卡小部件可以添加。下一节我们继续谈第四个库——Plotly🥇 评论区抽粉丝送书啦💌 欢迎大家在评论区提出意见和建议!(抽两位幸运儿送书，实物图如下)💌《Python Web开发从入门到精通》【内容简介】**本书分为3部分：第1部分是基础篇，带领初学者实践Python开发环境和掌握基本语法，同时对网络协议、Web客户端技术、数据库建模编程等网络编程基础深入浅出地进行学习；
大数据高级开发工程师——大数据相关工具之四 Superset
yangwei2048的博客
06-26 1207
[Superset](https://airbnb.io/projects/superset/) 是一款由 Airbnb 开源的“现代化的企业级 BI（商业智能） Web 应用程序”，其通过创建和分享 dashboard，为数据分析提供了轻量级的数据查询和可视化方案。
数据可视化——数据可视化网站（e-charts）.zip
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括...
IDL程序设计——数据可视化与ENVI二次开发.rar
12-19
基于IDL的Envi二次开发，共计20章，包含源码和工程文档，可直接进行调试。使用户遥感从业者和GIS专业本科生及研究生科研使用。
前端简单的数据可视化分辨率自适应js
07-02
用于web前端数据可视化分辨率自适应，将数据可视化内容包裹在#best-box div中，引入下载的js即可
财报数据可视化 —— pandas数据分析，pyecharts可视化
06-03
财报数据可视化 —— pandas数据分析，pyecharts可视化
前端开发前端ECharts图表可视化大屏开发案例.zip
05-27
前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts...
常用的五大数据可视化工具测评分享
qq_43696218的博客
06-12 616
然而，对于复杂的数据分析和高级计算功能，帆软BI的操作相对繁琐，需要用户具备一定的技术背景。奥威BI提供了直观的数据可视化图表和强大的数据钻取功能，用户可以通过简单的操作深入挖掘数据背后的业务含义。然而，由于功能的复杂性，亿信华辰BI的学习成本相对较高。本文将对帆软BI、奥威BI、思迈特BI、永洪BI以及亿信华辰BI这五大数据可视化工具进行详细的操作体验测评，总结它们的特点和优势。永洪BI提供了丰富的可视化数据图表组件和多种内置的风格样式，用户可以通过简单的拖拽操作快速构建数据可视化报表。
Python 中的 Pandas(数据分析与处理)
m0_74995879的博客
06-12 1446
Pandas 是 Python 中最受欢迎的数据处理库之一，其名字源自于“Panel Data”（面板数据）的缩写。它提供了三种主要的数据结构：Series ， DataFrame ， Panel（在新版本已经被弃用） 使用列表或数组创建Series：可以通过传递Python列表或NumPy数组来创建Series 使用字典创建Series：字典的键将成为Series的索引 2，索引 3，基本属性 values 返回Series的数据部分（一个NumPy数组）
Cesium源码解析六（3dtiles属性获取、建筑物距离计算、建筑物着色及其原理分析）
最新发布
AIGIS的博客
06-17 968
在本文中，我们将探讨如何使用 CesiumJS 来加载和显示 3D 建筑物数据，并根据用户点击的位置进行动态着色。我们将使用 CesiumJS 的 OpenStreetMap 建筑物数据集，通过点击地图上的建筑物，根据距离计算并动态地为这些建筑物着色。这不仅增强了地图的交互性，还为用户提供了直观的地理空间数据可视化体验。我们将逐步讲解如何设置 Cesium Viewer，加载 3D 建筑物数据，处理用户点击事件，以及根据距离进行建筑物的颜色处理。
数据可视化：让数据讲述故事
AI心易行者
06-16 291
数据可视化不仅仅是一种技术，更是一种艺术。通过正确的方法和工具，你可以将枯燥的数据转化为引人入胜的故事，帮助人们更好地理解和决策。
educoder数据科学导论——数据可视化
01-28
数据可视化是数据科学领域中重要的一环，它通过图表、图形和其他可视化工具将数据呈现出来，以便能够更好地理解和分析数据。 首先，数据可视化可以帮助我们更好地理解数据。通过将数据可视化成图表或图像，我们可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南栀北夏ii

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值