数据可视化工具 - ECharts以及柱状图的编写

news2024/11/16 7:55:42

1 快速上手

  1. 引入echarts 插件文件到html页面中
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- step1 引入刚刚下载的 ECharts 文件 -->
    <script src="./echarts.js"></script>
</head>
  1. 准备一个具备大小的DOM容器
<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>
  1. 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
  1. 指定配置项和数据(option)
 var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };
  1. 将配置项设置给echarts实例对象
myChart.setOption(option);
  1. 完整代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

在这里插入图片描述

2 Echarts-基础配置

需要了解的主要配置:series xAxis yAxis grid tooltip title legend color

  • series 系列列表 每个系列通过 type 决定自己的图表类型在这里插入图片描述
  • xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置
    offset 属性防止同个位置多个 x 轴的重叠。
    boundaryGap:坐标轴两边留白策略【是否让我们的线条和坐标轴有缝隙】,类目轴和非类目轴的设置和表现不一样。
    类目轴中 boundaryGap 可以配置为 true false。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
    在这里插入图片描述
    在这里插入图片描述
    非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。 示例:boundaryGap: ['20%', '20%']
  • yAxis:直角坐标系 grid 中的 y 轴
  • grid:直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid组件,在 ECharts 3 中可以存在任意个 grid 组件。在这里插入图片描述
  • title:标题组件,包含主标题和副标题。title.textAlign 文本水平对齐(文本相对于文本框) title.textVerticalAlign 文本垂直对齐(文本相对于文本框)在这里插入图片描述
    title 相对于图表的对齐配置项:应该是 left,right,top,bottom,因此我们希望标题在图表中居中的话,应该设置这些选项。left:‘center’ 这样就可以让标题在 文本中图表中居中了在这里插入图片描述
  • tooltip:提示框组件 tooltip. trigger = 'item' 触发类型: 在这里插入图片描述
  • legend:图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。在这里插入图片描述
  • color:调色盘颜色列表 在这里插入图片描述

通过一个案例详细解释配置:

2.1 grid 的详细配置讲解

  • grid. show 是否显示直角坐标系网格。在这里插入图片描述
  • grid. left = ‘10%’ grid 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’,组件会根据相应的位置自动对齐。在这里插入图片描述
  • grid. containLabel 在这里插入图片描述
  • grid. backgroundColor = ‘transparent’ 网格背景色,默认透明。颜色可以使用 RGB 表示,比如 ‘rgb(128, 128, 128)’ ,如果想要加上 alpha 通道,可以使用 RGBA,比如 ‘rgba(128, 128, 128, 0.5)’,也可以使用十六进制格式,比如 ‘#ccc’ 注意:此配置项生效的前提是,设置了 show: true。
    在这里插入图片描述
  • grid. borderColor = ‘#ccc’ 网格的边框颜色。支持的颜色格式同 backgroundColor。注意:此配置项生效的前提是,设置了 show: true。

2.2 toolbox 的详细配置讲解

工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。

  • toolbox. show = true 是否显示工具栏组件。
  • toolbox. orient = ‘horizontal’ 工具栏 icon 的布局朝向。可选:‘horizontal’ ‘vertical’
  • toolbox. itemSize = 15 工具栏 icon 的大小。
  • toolbox. itemGap = 8 工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
  • toolbox. showTitle = true 是否在鼠标 hover 的时候显示每个工具 icon 的标题。
  • toolbox. feature 各工具配置项。除了各个内置的工具按钮外,还可以自定义工具按钮。注意,自定义的工具名字,只能以 my 开头,例如下例中的 myTool1,myTool2:https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.44在这里插入图片描述在这里插入图片描述
  • toolbox.feature. saveAsImage 保存为图片。
  • toolbox.feature. restore 配置项还原。
  • toolbox.feature. dataView 数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
  • toolbox.feature. dataZoom 数据区域缩放。目前只支持直角坐标系的缩放。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<style>
</style>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        // color设置我们线条的颜色 注意后面是个数组
        color: ['pink', 'red', 'green', 'skyblue'],
        // 设置图表的标题
        title: {
            text: '折线图堆叠123'
        },
        // 图表的提示框组件
        tooltip: {
            // 触发方式
            trigger: 'axis'
        },
        // 图例组件
        legend: {
            // series里面有了 name值则 legend里面的data可以删掉
        },
        // 网格配置  grid可以控制线形图 柱状图 图表大小
        grid: {
            show: true,
            left: '10%',
            right: '10%',
            bottom: '10%',
            /**
             * grid 区域是否包含坐标轴的刻度标签。
             containLabel 为 false 的时候:
             grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
             这比较适用于多个 grid 进行对齐的场景,因为往往多个 grid 对齐的时候,是依据坐标轴来对齐的。
             containLabel 为 true 的时候:
             grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
             这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。
             */
            containLabel: false,
            backgroundColor: 'rgba(128, 128, 128, 0.5)'
        },
        // 工具箱组件  可以另存为图片等功能
        toolbox: {
            show: true,
            orient: 'horizontal',
            itemSize: 15,
            itemGap: 8,
            showTitle: true,
            feature: {
                saveAsImage: {},
                myTool1: {
                    show: true,
                    title: '自定义扩展方法1',
                    icon: 'path://M512.62 890A128.56 128.56 0 0 0 638.9 785.5H386.34A128.57 128.57 0 0 0 512.62 890zM793.86 656.24l-65.37-130.55a9.7 9.7 0 0 1-1.09-4.56l0.17-117.75a177.41 177.41 0 0 0-119.33-167.8 20.4 20.4 0 0 1-13.52-16.2A85.05 85.05 0 0 0 512 147h-0.29A85 85 0 0 0 429 219.38a20.43 20.43 0 0 1-13.53 16.2 177.41 177.41 0 0 0-119.33 167.8l0.17 117.75a9.58 9.58 0 0 1-1.09 4.56l-65.37 130.55c-19.08 38.18 8.62 83.1 51.35 83.1h461.31c42.73 0 70.43-44.92 51.35-83.1z',
                    onclick: function () {
                        alert('myToolHandler1')
                    }
                }
            }
        },
        // 设置x轴的相关配置
        xAxis: {
            type: 'category',
            // 是否让我们的线条和坐标轴有缝隙
            boundaryGap: false,
            data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        // 设置y轴的相关配置
        yAxis: {
            type: 'value'
        },
        // 系列图表配置 它决定着显示那种类型的图表
        series: [
            {
                name: '邮件营销',
                type: 'line',

                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',

                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',

                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',

                data: [320, 332, 301, 334, 390, 330, 320]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

3 柱状图图表(两大步骤)

  1. 官网找到类似实例, 适当分析,并且引入到HTML页面中
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<style>
</style>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        color: ["#3398DB"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器,坐标轴触发有效
                type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: "value"
            }
        ],
        series: [
            {
                name: "直接访问",
                type: "bar",
                barWidth: "60%",
                data: [10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

  1. 根据需求定制图表

3.1 修改图表柱形颜色 大小 【grid决定我们的柱状图的大小】

修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小

color: ["#2f89cf"],
grid: {
  left: "0%",
  top: "10px",
  right: "0%",
  bottom: "4%",
  containLabel: true
},

X轴相关设置 xAxis:

3.2 X轴文本颜色 字体大小 X轴线的样式

在这里插入图片描述

3.3 单独设置x轴的样式

  axisLine: {
      show: true,
      lineStyle: {
          color: "pink",
          width: 1,
          type: "solid"
      }
  }

3.4 修改柱形为圆角以及柱子宽度 series

在这里插入图片描述
更换对应数据:

// x轴中更换data数据
 data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据
 data: [200, 300, 300, 900, 1500, 1200, 600]

3.5 让图表跟随屏幕自适应

    window.addEventListener("resize", function() {
        myChart.resize();
    });

y轴相关定制:

3.6 不显示y轴线和相关刻度

在这里插入图片描述

3.7 y轴文字的颜色设置为red色

 // y轴文字的颜色设置为red色
 axisLabel: {
     color: "red"
 },

3.8 修改第一组柱子相关样式(条状)

在这里插入图片描述

设置第一组柱子内百分比显示数据:

  • series-bar. label 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
  • series-bar.label. show 是否显示标签。
  • series-bar.label. distance = 5 距离图形元素的距离。
  • series-bar.label. rotate 标签旋转。从 -90 度到 90 度。正值是逆时针。
  • series-bar.label. offset 是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。在这里插入图片描述
  • series-bar.label. formatter 标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

在这里插入图片描述
在这里插入图片描述

  • 设置第一组柱子不同颜色
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6", "#8B78F6", "#8B78F6"];
itemStyle: {
    normal: {
        // 柱子设为圆角
        barBorderRadius: 5,
        color: (params) => {
            return myColor[params.dataIndex]
        }
    }
}
  • 修改第二组柱子的相关配置(框状)
    在这里插入图片描述

  • 给y轴添加第二组数据
    在这里插入图片描述

  • 设置两组柱子层叠以及更换数据

// 给series  第一个对象里面的 添加 
yAxisIndex: 0,
// 给series  第二个对象里面的 添加 
yAxisIndex: 1,
// series 第一个对象里面的data
data: [70, 34, 60, 78, 69],
// series 第二个对象里面的data
data: [100, 100, 100, 100, 100],
// y轴更换第一个对象更换data数据
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// y轴更换第二个对象更换data数据
data:[702, 350, 610, 793, 664],

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<style>
</style>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
<script type="text/javascript">
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // 1. 实例化对象
    var myChart = echarts.init(document.getElementById("main"));
    // 2. 指定配置和数据
    var option = {
        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%"
            // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
            show: false
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                // 把刻度标签里面的文字颜色设置为白色
                axisLabel: {
                    color: "#2b2b2b"
                }
            },
            {
                data: [702, 350, 610, 793, 664],
                inverse: true,
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                // 把刻度标签里面的文字颜色设置为白色
                axisLabel: {
                    color: "#2b2b2b"
                }
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                data: [70, 34, 60, 78, 69],
                yAxisIndex: 0,
                // 修改第一组柱子的圆角
                itemStyle: {
                    barBorderRadius: 20,
                    // 此时的color 可以修改柱子的颜色
                    color: function (params) {
                        // params 传进来的是柱子对象
                        console.log(params);
                        // dataIndex 是当前柱子的索引号
                        return myColor[params.dataIndex];
                    }
                },
                // 柱子之间的距离
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 10,
                // 显示柱子内的文字
                label: {
                    show: true,
                    position: "inside",
                    // {c} 会自动的解析为 数据  data里面的数据
                    formatter: "{c}%"
                }
            },
            {
                name: "框",
                type: "bar",
                barCategoryGap: 50,
                barWidth: 15,
                yAxisIndex: 1,
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

apc-service-bus项目Docker镜像发布

apc-service-bus项目Docker镜像发布 1. 提交代码到Gitee代码仓&#xff0c;通过建木将项目打包到服务器 1.1 可直接打开访问建木&#xff0c;无有不熟悉建木发布流程的请咨询其他同事或者自行研究 建木地址&#xff1a;http://10.11.148.21/ 1.2 找到bus的开发环境部署执行…

神经网络全连接层数学推导

全连接层分析 对于神经网络为什么都能产生很好的效果虽然其是一个黑盒&#xff0c;但是我们也可以对其中的一些数学推导有一定的了解。 数学背景 目标函数为 f ∣ ∣ m a x ( X W , 0 ) − Y ∣ ∣ F 2 &#xff0c;求 ∂ f ∂ W , ∂ f ∂ X , ∂ f ∂ Y 目标函数为f ||ma…

SpringBoot项目如何打包成exe应用程序

准备 准备工作&#xff1a; 一个jar包&#xff0c;没有bug能正常启动的jar包 exe4j&#xff0c;一个将jar转换成exe的工具 链接: https://pan.baidu.com/s/1m1qA31Z8MEcWWkp9qe8AiA 提取码: f1wt inno setup&#xff0c;一个将依赖和exe一起打成一个安装程序的工具 链接:…

设计模式——代理模式(静态代理、JDK动态代理、CGLIB动态代理)

是什么&#xff1f; 如果因为某些原因访问对象不适合&#xff0c;或者不能直接引用目标对象&#xff0c;这个时候就需要给该对象提供一个代理以控制对该对象的访问&#xff0c;代理对象作为访问对象和目标对象之间的中介&#xff1b; Java中的代理按照代理类生成时机不同又分…

婴儿摇篮语音播放芯片,高品质MP3音乐播放芯片,WT2003H

婴儿摇篮是一种用于帮助婴儿入睡的设备。传统的婴儿摇篮通常只是简单的摇晃&#xff0c;但是带有语音播报芯片的婴儿摇篮则可以更好地模拟妈妈的声音&#xff0c;从而更有效地帮助婴儿入睡。 如果您正在寻找高品质音乐摇篮方案&#xff0c;那么WT2003H语音播放芯片&#xff0c…

5月7日 2H55min|5月8日8H50min|时间轴复盘|14:00~14:30

5月8日 todo list list4 40min ✅ |实际上用了50+50 list6 40min ✅ |实际上用了30+60 阅读+听力连做 100min ✅ 口语 day01 ✅ 口语 day02 口语 day03

6、并发事务控制MVCC汇总

1.并发事务控制 单版本控制-锁 先来看锁&#xff0c;锁用独占的方式来保证在只有一个版本的情况下事务之间相互隔离&#xff0c;所以锁可以理解为单版本控制。 在 MySQL 事务中&#xff0c;锁的实现与隔离级别有关系&#xff0c;在 RR&#xff08;Repeatable Read&#xff0…

vCenter Server 8.0U1 OVF:在 Fusion 和 Workstation 中快速部署 vCSA

vCenter Server 8.0U1 OVF&#xff1a;在 Fusion 和 Workstation 中快速部署 vCSA vCenter Server 8.0U1 系列更新 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-vcenter-8-ovf/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#x…

Win上通过Jconsole查看Java程序资源占用情况(教程总结,一篇就够了)

最近需要读取一个大文件&#xff0c;为了判断有没有读取到内存中&#xff0c;需要一个能查看jar包占用内存的工具&#xff0c;一顿面向百度后&#xff0c;发现了jdk自带的工具Jconsole&#xff0c;将教程分享给大家 一、介绍 JConsole 是一个内置 Java 性能分析器&#xff0c;…

手把手教你使用unisat 交易市场|BRC20|Unisat

开始前先熟悉下这张平台市场标注图&#xff0c;能让你跟得心应手&#xff01; 一、查看实时成交信息&#xff08;已 moon 为例子&#xff09; 搜索进入Token界面&#xff0c;点击 Orders 可以看到 1w 枚成交 87.86U&#xff08;单价 30 聪&#xff0c;大约 0.008786u&#xf…

牛客网剑指offer|中等题day2|JZ76删除链表中的重复节点、JZ23链表中环的入口节点、JZ24 反转链表(简单)

JZ76删除链表中的重复节点 链接&#xff1a;删除链表中重复的结点_牛客题霸_牛客网 参考代码&#xff1a; 自己好像还是偏向双指针这种想法&#xff0c;所以用了两个指针&#xff0c;这样感觉更好理解一些。 对了&#xff0c;去重有两种&#xff0c;我一开始写成了简单的那种&a…

MGV3001_ZG_当贝纯净桌面-线刷固件包

MGV3001_ZG_当贝纯净桌面-线刷固件包-内有教程及短接点 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0c;运…

【标准化方法】(3) Group Normalization 原理解析、代码复现,附Pytorch代码

今天和各位分享一下深度学习中常用的标准化方法&#xff0c;Group Normalization 数据分组归一化&#xff0c;向大家介绍一下数学原理&#xff0c;并用 Pytorch 复现。 Group Normalization 论文地址&#xff1a;https://arxiv.org/pdf/1803.08494.pdf 1. 原理介绍 在目标检测…

Javascript - Cookie的获取和保存应用

在之前的博客介绍了如何利用 Selenium去搭建 cookie池&#xff0c;进行自动化登录、获取信息等。那什么是cookie呢&#xff1f;它的作用又是什么呢&#xff1f; 这里&#xff0c;再重复简单介绍一下。 cookie 是浏览器储存在用户电脑上的一小段文本文件。该文件里存了加密后的用…

LeetCode之回溯算法

文章目录 思想&框架1.组合/子集和排列问题2.组合应用问题 组合/子集问题1. lc77 组合2. lc216 组合总和III3. lc39 组合总和4. lc40 组合总和II5. lc78 子集6. lc90 子集II 排列1. 全排列I2. 全排列II 组合问题的应用1.lc17 电话号码的字母组合2.lc131 分割回文串3. lc19 复…

集约式智能自动化办公,实在智能门户开启政企数字化转型新范式

导语&#xff1a; 随着数字化和智能化的快速发展&#xff0c;数字技术已经深入到各个行业和领域。实在智能基于数字员工在行业的深厚理解和丰富的实践经验&#xff0c;打造一站式的智能化统一平台——智能门户&#xff0c;打破了技术壁垒和系统数据之间的割裂感&#xff0c;实现…

软考A计划-重点考点-专题五(计算机网络知识)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

Apache Sentry

官方 说明 Sentry是一种用于在Hadoop集群中控制和管理访问权限的工具。因此&#xff0c;CDH的Sentry指的是Cloudera Distribution for Hadoop中集成的Sentry组件&#xff0c;用于管理Hadoop集群中的访问控制和权限管理。 作用 Sentry是一个用于管理Hadoop集群中的访问权限的…

基于C++实现旅行线路设计

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 系统根据风险评估&#xff0c;为旅客设计一条符合旅行策略的旅行线路并输出&#xff0c;系统能查询当前时刻旅客所处的地点和状态&#xff08;停留城市/所在交通工具&#xff09;。 实验内容和实验环境描述 1.1 实验内容 城…

【吐槽贴】项目经理如何进行高效沟通?

“项目最大的风险就是都觉得没有风险。” 这还是跟同行聊天时开玩笑的一句话&#xff0c;最近我却深有体会。一直以为一切正常的项目&#xff0c;最近却接连出了问题&#xff0c;复盘才发现几个关键性问题都出在沟通方面&#xff0c;还一直认为沟通能力是自己的优势。这次主要踩…