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

news/2024/7/22 1:07:52/文章来源: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>// 获取canvaslet canvas = document.querySelector('canvas')// 获取上下文let ctx = canvas.getContext('2d')// 绘制圆形// 开始绘制ctx.beginPath();// 绘制圆形的方法:x,y,r,起始弧度,结束弧度,是否逆时针,360°=2.PIctx.arc(100,100,50,0,2 * Math.PI,true);// 是指填充颜色ctx.fillStyle = 'red';ctx.fill()// 绘制圆ctx.stroke();// 绘制第二个圆// 注意:弧度有一个计算// 2 * PI * 弧度 = 360ctx.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,高度100ctx.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 y1L x2 y2L x3 y3Z"></path> --><path d="M 10 10L 400 20L 30 120L 50 99Z"></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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1052458.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web安全:SQL注入之时间盲注原理+步骤+实战操作

「作者简介」&#xff1a;2022年北京冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础对安全知识体系进行总结与归纳&#xff0c;著作适用于快速入门的 《网络安全自学教程》&#xff0c;内容涵盖系统安全、信息收集等…

Golang | Leetcode Golang题解之第116题填充每个节点的下一个右侧节点指针

题目&#xff1a; 题解&#xff1a; func connect(root *Node) *Node {if root nil {return root}// 每次循环从该层的最左侧节点开始for leftmost : root; leftmost.Left ! nil; leftmost leftmost.Left {// 通过 Next 遍历这一层节点&#xff0c;为下一层的节点更新 Next …

帝国CMS验证码不显示怎么回事呢?

帝国CMS验证码有时候会不显示或打叉&#xff0c;总结自己的解决方法。 1、检查服务器是否开启GD库 测试GD库是否开启的方法&#xff1a;浏览器访问&#xff1a;/e/showkey/index.php&#xff0c;如果出现一堆乱码或报错&#xff0c;证明GD库没有开启&#xff0c;开启即可。 2…

深度学习-转置卷积

转置卷积 转置卷积&#xff08;Transposed Convolution&#xff09;&#xff0c;也被称为反卷积&#xff08;Deconvolution&#xff09;&#xff0c;是深度学习中的一种操作&#xff0c;特别是在卷积神经网络&#xff08;CNN&#xff09;中。它可以将一个低维度的特征图&#x…

echarts学习篇

一、使用echarts 1.引入 Apache ECharts <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <!-- 引入刚刚下载的 ECharts 文件 --> <script src"echarts.js"></script> </head> </html> 2.…

数据结构---链表

1、链表分类 对于链表可以分为几种&#xff0c;不同的分类对应不同的应用场景&#xff0c;其中&#xff0c;双向循环链表和单向链表最常用。 1.1链表按照有头无头分类 也就是说有无哨兵位&#xff0c;哨兵位&#xff0c;是一个开辟的空间&#xff0c;但是不放置数据&#xf…

AURIX TC3xx单片机介绍-启动过程介绍1

从各个域控制器硬件解决方案来看,MPU可能来自多个供应商,有瑞萨,有NXP等,但对于MCU来说,基本都采用英飞凌TC3xx。 今天我们就来看一下TC3xx的启动过程,主要包含如下内容: uC上电过程中,会经过一个上电时序,从复位状态“脱离”出来;Boot Firmware是复位后第一个执行的…

金职优学:分析央国企面试如何通关?

在当今竞争激烈的就业市场中&#xff0c;中央和国有企业&#xff08;以下简称“央国企”&#xff09;的面试机会对求职者来说是非常有吸引力的。这些企业通常拥有稳定的发展前景、良好的薪酬福利和广阔的职业发展空间。但是&#xff0c;要想成功通过央国企的面试&#xff0c;求…

YOLOv8+PyQt5西红柿成熟度检测系统完整资源集合(yolov8模型,从图像、视频和摄像头三种路径识别检测,包含登陆页面、注册页面和检测页面)

西红柿成熟度检测&#xff08;https://mbd.pub/o/bread/mbd-ZpWbk5ly&#xff09;_哔哩哔哩_bilibili 资源包含可视化的西红柿成熟度检测系统&#xff0c;基于最新的YOLOv8训练的西红柿成熟度检测模型&#xff0c;和基于PyQt5制作的可视化西红柿成熟度检测系统&#xff0c;包含…

加速模型训练 GPU cudnn

GPU的使用 在定义模型时&#xff0c;如果没有特定的GPU设置&#xff0c;会使用 torch.nn.DataParallel 将模型并行化&#xff0c;充分利用多GPU的性能&#xff0c;这在加速训练上有显著影响。 model torch.nn.DataParallel(model).cuda() cudnn 的配置&#xff1a; cudnn.…

Habicht定理中有关子结式命题3.4.6的证明

个人认为红色区域有问题&#xff0c;因为 deg ⁡ ( ϕ ( S j ) ) r \deg{\left( \phi\left( S_{j} \right) \right) r} deg(ϕ(Sj​))r&#xff0c;当 i ≥ r i \geq r i≥r时&#xff0c; s u b r e s i ( ϕ ( S j 1 ) , ϕ ( S j ) ) subres_{i}\left( \phi(S_{j 1}),\p…

景源畅信电商:做抖店的成本高吗?

在当今数字化时代&#xff0c;抖音不仅仅是一个分享短视频的平台&#xff0c;更是一个充满商机的市场。随着抖音用户量的激增&#xff0c;越来越多的商家和个人开始关注在抖音上开设店铺&#xff0c;即所谓的“抖店”。那么&#xff0c;做抖店的成本高吗?这个问题困扰着许多初…

《python编程从入门到实践》day40

# 昨日知识点回顾 编辑条目及创建用户账户 暂没能解决bug&#xff1a; The view learning_logs.views.edit_entry didnt return an HttpResponse object. It returned None instead.# 今日知识点学习 19.2.5 注销 提供让用户注销的途径 1.在base.html中添加注销链接 …

数据仓库ETL

小白的数据仓库学习笔记 2024/5/20 18:25 文章目录 ETLdim打开创建项目&#xff08;选这个&#xff0c;这个是做etl的&#xff09;建立元数据的连接同样的&#xff0c;建立与数据仓库的连接新建ssis包序列容器全量etl增量etl建立sql任务双击打开&#xff0c;设置连接、内容 双击…

linux 阿里云服务器安装ImageMagick和php扩展imagick

操作系统版本 Alibaba Cloud Linux 3.2104 LTS 64位 # 1.安装ImageMagick yum install -y ImageMagick ImageMagick-devel # 没有pecl要先安装pecl 和头文件 sudo yum install php-devel # 2.pecl 安装扩展 pecl install imagick #寻找所有php.ini文件 find / -name php.…

Word整理论文参考文献

1.安装Zotero软件 2.安装Zotero的Chrome网站插件&#xff0c;并将插件固定到浏览器 3.安装Word的Zotero插件 4.在DBLP网站https://dblp.org/search 搜索需要添加的参考文献->点击BibTex->点击网页右上角的Zotero符号&#xff08;即第二步所指的符号&#xff09;->至…

《python本机环境多版本切换》-两种方式以及具体使用--venv/pyenv+pycharm测试

阿丹&#xff1a; source myenv/bin/activate 在开发使用rasa的时候发现自己安装的python环境是3.12的&#xff0c;和rasa不兼容&#xff0c;所以实践一下更换多python环境。 使用虚拟环境 在Python中使用虚拟环境来切换Python版本是一个常见的做法&#xff0c;这可以帮助你…

创新实训2024.05.28日志:记忆化机制、基于MTPE与CoT技术的混合LLM对话机制

1. 带有记忆的会话 1.1. 查询会话历史记录 在利用大模型自身能力进行对话与解答时&#xff0c;最好对用户当前会话的历史记录进行还原&#xff0c;大模型能够更好地联系上下文进行解答。 在langchain chat chat的chat函数中&#xff0c;通过实现langchain框架提供的ChatMemo…

Redisson集成SpringBoot

前言&#xff1a;Redisson集成SpringBoot主要有两种方式&#xff0c;一个是使用redisson-spring-boot-starter依赖&#xff08;优先推荐&#xff09;&#xff0c;毕竟springboot主打的就是约定大于配置&#xff0c;这个依赖就是为springboot准备的。 再一种方式就是引入rediss…

springboot+vue+mybatis基于java web的公益网站的设计与实现+jsp+PPT+论文+讲解+售后

现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本公益网站就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&#xff0c;使…