echarts柱状图数据太多设置滚动条

news2024/11/25 21:45:17

在这里插入图片描述
当你的项目中因数据量太大，导致柱状图数据全部叠在一起不便于看的时候，你们是怎么处理的？

大部分同学可能第一想法就是裁剪一部分数据，仅展示页面最大限度能够展示的数据，这确实是一个好办法，简单快速。但有时候怎么展示是要根据业务需求来定的，如果你的业务不能满足截取的需求，必须要展示超出这个范围的数据量，那应该怎么办呢？

此时还有一部分同学会提出使用滚动条，这样不就能够展示更多的数据了吗？但又面临一个问题，具体应该怎么使用呢？

接下来我就上面如何使用滚动条的问题贴一下自己的一点点配置技巧，希望对大家有所帮助。

//参考：http://chartlib.datains.cn/detail?id=0e2474b7044f44ff97b51d1d67450f15
var datas = [
  { ranking: 1, station: '菱威有限公司', value: 16.74 },
  { ranking: 2, station: '瑞缘诚有限公司', value: 14.97 },
  { ranking: 3, station: '启蒙有限公司', value: 13.03 },
  { ranking: 4, station: '盛唐艺有限公司', value: 12.48 },
  { ranking: 5, station: '嘉宏有限公司', value: 11.20 },
  { ranking: 6, station: '爱赛特有限公司', value: 10.00 },
  { ranking: 7, station: '浩威有限公司', value: 8.20 },
  { ranking: 8, station: '美威有限公司', value: 7.20 },
  { ranking: 9, station: '安图山地有限公司', value: 6.20 },
  { ranking: 10, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 11, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 12, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 13, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 14, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 15, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 16, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 17, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 18, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 19, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 20, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 21, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 22, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 23, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 24, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 25, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 26, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 27, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 28, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 29, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 30, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 31, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 32, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 33, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 34, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 35, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 36, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 37, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 38, station: '天城陆风有限公司', value: 5.20 },
];
var seriesName = ['2023年出口额','2022年出口额'];
var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];
function contains(arr, dst) {
  var i = arr.length;
  while ((i -= 1)) {
    if (arr[i] == dst) {
      return i;
    }
  }
  return false;
}
var attackSourcesColor = [
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(255,85,127,1)' },
    { offset: 1, color: 'rgba(255,85,127,1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(255,170,0,1)' },
    { offset: 1, color: 'rgba(255,170,0,1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(84,112,198,1)' },
    { offset: 1, color: 'rgba(84,112,198,1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(30,159,255,.82)' },
    { offset: 1, color: 'rgba(30,159,255,.82)' },
  ]),
];

var rankings = [];
var stationData = [];
var values = [];

datas.forEach(function (it, index) {
  rankings.push(it.ranking);
  stationData.push(it.station);
  values.push(it.value);
});

console.log(rankings)
console.log(stationData)
console.log(values)

function dataFormat(data) {
  var arr = [];
  data.forEach(function (item, i) {
    let itemStyle = {
      color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
    };
    arr.push({
      value: item,
      itemStyle: itemStyle,
    });
  });
  return arr;
}

option = {
  // backgroundColor: '#000',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },

  grid: {
    left: '0%',
    right: '2%',
    bottom: '3%',
    top:'2%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: stationData,
      axisLabel: {
        margin: 30,
        fontSize: 14,
        align: 'left',
        padding: [3, 0, 0, 0],
        color: '#000',
        rich: {
          nt1: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[0],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            lineHeight: '5',
            padding: [2, 0, 0, 0],
            // padding:[0,0,2,0],
          },
          nt2: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[1],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            padding: [2, 0, 0, 0],
          },
          nt3: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[2],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            padding: [2, 0, 0, 0],
          },
          nt: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[3],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            padding: [2, 0, 0, 0],
          },
        },
        formatter: function (value, index) {
          index = contains(stationData, value) + 1;
          if (index - 1 < 3) {
            return ['{nt' + index + '|' + index + '}'].join('\n');
          } else {
            return ['{nt|' + index + '}'].join('\n');
          }
        },
      },
    },

    {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true,
      axisLabel: {
        textStyle: {
          color: '#666',
          fontSize: '12',
        },
      },
      data: dataFormat(values),
    },
  ],

  series: [
    {
      zlevel: 1,
      name:'',
      type: 'bar',
      barWidth: 35,
      data: dataFormat(values),
      align: 'center',
      itemStyle: {
        normal: {
          barBorderRadius: 10,
        },
      },
      label: {   //条状中的样式
        show: true,
        fontSize: 10,
        color: '#fff', //条装中字体颜色
        textBorderWidth: 2,
        padding: [2, 0, 0, 0],
        position: "insideLeft",
        formatter: (data) => {
          return `{labelName|${data.name}}`;
        },
        rich: {
          labelName: {
              color: "#fff",
              align: "left",
              padding: [2, 0, 0, 0],
          }
        },
      },
    },
  ],
};

以上代码经过稍微修改了一下，最后的展示如下图所示：

在这里插入图片描述

虽然经过了一些修改，但还是没有达成我们最初的目的【滚动条】

接下来我给大家介绍一个新的配置参数：dataZoom，具体详细配置可以去 echarts官网 查看。

下面我就贴上设置滚动条相关的代码：

{
	// ...其他配置
	dataZoom: [
	    {
	        type: "slider",
	        realtime: true, // 拖动时，是否实时更新系列的视图
	        startValue: 0,
	        endValue: 5,
	        width: 5,
	        height: "90%",
	        top: "5%",
	        right: 0,
	        // orient: 'vertical', // 设置横向还是纵向, 但是官方不太建议如此使用，建议使用 yAxisIndex 具体指明
	        yAxisIndex: [0, 1], // 控制y轴滚动对象
	        fillerColor: "#0093ff", // 滚动条颜色
	        borderColor: "rgba(17, 100, 210, 0.12)",
	        backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
	        handleSize: 0, // 两边手柄尺寸
	        showDataShadow: false, //是否显示数据阴影 默认auto
	        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
	        zoomLock: true,
	        moveHandleStyle: {
	            opacity: 0,
	        },
	    },
	    {
	        type: "inside",
	        // width: 0,
	        startValue: 0,
	        endValue: 10,
	        minValueSpan: 10,
	        yAxisIndex: [0],
	        zoomOnMouseWheel: false, // 关闭滚轮缩放
	        moveOnMouseWheel: true, // 开启滚轮平移
	        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
	    },
	  ],
	  // 与xAxis，yAxis，series同级
  }

在这里插入图片描述
到了这一步，滚动条就实现了，但是到此就真的结束了吗？不一定，因为还是要根据业务来，比如我这里就是只使用滚动，拖拽即可，其他什么过滤，刷新，范围选择这些都不要。

如果大家按照上面的代码练习后，不知道有没有发现一个小问题，就是当鼠标放到滚动条上的时候鼠标箭头会变成一个十字，这就是上面提到的范围筛选的问题。

为什么不想要呢，请看效果：
在这里插入图片描述
看到没有，密密麻麻的对不，一点也不好看，所以下面贴的代码就是要解决上面这个问题，很简单的一个配置：brushSelect: false

brushSelect 的默认配置为true，此处要改成false。

最后再贴上一份完整的代码，有需要的同学可以拷贝尝试一下。

//参考：https://www.makeapie.com/editor.html?c=xqjNqqjc_U
var datas = [
  { ranking: 1, station: '菱威有限公司', value: 16.74 },
  { ranking: 2, station: '瑞缘诚有限公司', value: 14.97 },
  { ranking: 3, station: '启蒙有限公司', value: 13.03 },
  { ranking: 4, station: '盛唐艺有限公司', value: 12.48 },
  { ranking: 5, station: '嘉宏有限公司', value: 11.20 },
  { ranking: 6, station: '爱赛特有限公司', value: 10.00 },
  { ranking: 7, station: '浩威有限公司', value: 8.20 },
  { ranking: 8, station: '美威有限公司', value: 7.20 },
  { ranking: 9, station: '安图山地有限公司', value: 6.20 },
  { ranking: 10, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 11, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 12, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 13, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 14, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 15, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 16, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 17, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 18, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 19, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 20, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 21, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 22, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 23, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 24, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 25, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 26, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 27, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 28, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 29, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 30, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 31, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 32, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 33, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 34, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 35, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 36, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 37, station: '天城陆风有限公司', value: 5.20 },
  { ranking: 38, station: '天城陆风有限公司', value: 5.20 },
];
var seriesName = ['2023年出口额','2022年出口额'];
var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];
function contains(arr, dst) {
  var i = arr.length;
  while ((i -= 1)) {
    if (arr[i] == dst) {
      return i;
    }
  }
  return false;
}
var attackSourcesColor = [
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(255,85,127,1)' },
    { offset: 1, color: 'rgba(255,85,127,1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(255,170,0,1)' },
    { offset: 1, color: 'rgba(255,170,0,1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(84,112,198,1)' },
    { offset: 1, color: 'rgba(84,112,198,1)' },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: 'rgba(30,159,255,.82)' },
    { offset: 1, color: 'rgba(30,159,255,.82)' },
  ]),
];

var rankings = [];
var stationData = [];
var values = [];

datas.forEach(function (it, index) {
  rankings.push(it.ranking);
  stationData.push(it.station);
  values.push(it.value);
});

console.log(rankings)
console.log(stationData)
console.log(values)

function dataFormat(data) {
  var arr = [];
  data.forEach(function (item, i) {
    let itemStyle = {
      color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
    };
    arr.push({
      value: item,
      itemStyle: itemStyle,
    });
  });
  return arr;
}

option = {
  // backgroundColor: '#000',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },

  grid: {
    left: '0%',
    right: '2%',
    bottom: '3%',
    top:'2%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: stationData,
      axisLabel: {
        margin: 30,
        fontSize: 14,
        align: 'left',
        padding: [3, 0, 0, 0],
        color: '#000',
        rich: {
          nt1: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[0],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            lineHeight: '5',
            padding: [2, 0, 0, 0],
            // padding:[0,0,2,0],
          },
          nt2: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[1],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            padding: [2, 0, 0, 0],
          },
          nt3: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[2],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            padding: [2, 0, 0, 0],
          },
          nt: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[3],
            width: 20,
            height: 18,
            fontSize: 12,
            align: 'center',
            borderRadius: 50,
            padding: [2, 0, 0, 0],
          },
        },
        formatter: function (value, index) {
          index = contains(stationData, value) + 1;
          if (index - 1 < 3) {
            return ['{nt' + index + '|' + index + '}'].join('\n');
          } else {
            return ['{nt|' + index + '}'].join('\n');
          }
        },
      },
    },

    {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true,
      axisLabel: {
        textStyle: {
          color: '#666',
          fontSize: '12',
        },
      },
      data: dataFormat(values),
    },

  ],
  dataZoom: [
    {
        type: "slider",
        realtime: true, // 拖动时，是否实时更新系列的视图
        startValue: 0,
        endValue: 5,
        width: 5,
        height: "90%",
        top: "5%",
        right: 0,
        brushSelect: false,
        yAxisIndex: [0, 1], // 控制y轴滚动
        fillerColor: "#0093ff", // 滚动条颜色
        borderColor: "rgba(17, 100, 210, 0.12)",
        backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
        handleSize: 0, // 两边手柄尺寸
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
        zoomLock: true,
        moveHandleStyle: {
            opacity: 0,
        },
    },
    {
        type: "inside",
        // width: 0,
        startValue: 0,
        endValue: 10,
        minValueSpan: 10,
        //   maxValueSpan: 20,
        yAxisIndex: [0],
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
    },
  ],
  series: [
    {
      zlevel: 1,
      name:'',
      type: 'bar',
      barWidth: 35,
      data: dataFormat(values),
      align: 'center',
      itemStyle: {
        normal: {
          barBorderRadius: 10,
        },
      },
      label: {   //条状中的样式
        show: true,
        fontSize: 10,
        color: '#fff', //条装中字体颜色
        textBorderWidth: 2,
        padding: [2, 0, 0, 0],
        position: "insideLeft",
        formatter: (data) => {
          return `{labelName|${data.name}}`;
        },
        rich: {
          labelName: {
              color: "#fff",
              align: "left",
              padding: [2, 0, 0, 0],
          }
        },
      },
    },
  ],
};

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

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

相关文章

【分布式】分布式存储架构

【分布式】分布式存储架构

文章目录 一、集中存储结构二、分布式存储2.1 、分布式存储的兴起2.2 、分布式存储的重要性2.3 、分布式存储的种类和比较 三、分布式理论浅析3.1 、一致性和可用性3.2 、数据分布哈希分布&#xff08; Swift &#xff09;顺序分布&#xff08; Bigtable &#xff09;CRUSH 分布…
阅读更多...
模版方法模式在 JDK 及 spring 源码中的引用

模版方法模式在 JDK 及 spring 源码中的引用

模版方法模式 模板方法模式是一种行为设计模式&#xff0c; 它在超类中定义了一个算法的框架&#xff0c; 允许子类在不修改结构的情况下重写算法的特定步骤。 更多有关于模版方法模式的介绍详见&#xff1a;https://refactoringguru.cn/design-patterns/template-method 模版…
阅读更多...
【4】tf实现神经网络模型

【4】tf实现神经网络模型

1 M-P神经元与神经网络前向传输 1.1 训练单个神经元 一个含有两个输入的神经元&#xff0c;指定一个输入x1x21,期望y能输出0.3。要求不断的输入x1x21,然后不断的训练权重w与偏置b值&#xff0c;训练一万次后&#xff0c;再次输入x1与x2输出y的值是否为0.3 # 导入TensorFlow库…
阅读更多...
Linux 进程的睡眠和唤醒详解

Linux 进程的睡眠和唤醒详解

概要 在Linux中&#xff0c;仅等待CPU时间的进程称为就绪进程&#xff0c;它们被放置在一个运行队列中&#xff0c;一个就绪进程的状 态标志位为 TASK_RUNNING。一旦一个运行中的进程时间片用完&#xff0c; Linux 内核的调度器会剥夺这个进程对CPU的控制权&#xff0c;并且从…
阅读更多...
QGIS实现tiff影像栅格数据切片教程

QGIS实现tiff影像栅格数据切片教程

实现栅格切片的方式有很多种，geoserver可以，qgis可以。自己写代码也可以，方式非常多。这篇文章介绍一下如何使用QGIS实现栅格切片。 首先我们要去下载一个qgis软件。下载地址如下： Welcome to the QGIS project! 随后我们打开软件，然后把要切片的栅格数据（tiff文件或者…
阅读更多...
【Python 随练】逆序打印数字

【Python 随练】逆序打印数字

题目&#xff1a; 给一个不多于 5 位的正整数&#xff0c;要求&#xff1a; 一、求它是几位数&#xff0c; 二、逆序打印出各位数字。 简介&#xff1a; 在本篇博客中&#xff0c;我们将解决一个关于正整数的问题。根据题目要求&#xff0c;我们需要判断给定的正整数是几位数…
阅读更多...
你的仓库VS别人家的仓库，有什么不同？

你的仓库VS别人家的仓库，有什么不同？

导读&#xff1a; 近年来&#xff0c;随着新技术的蓬勃发展&#xff0c;企业的仓储管理水平大大提高&#xff0c;PDA、RFID、AGV、立体仓库、智能分拣线等各项新技术的应用层出不穷。然而&#xff0c;着眼于制造型企业&#xff0c;却发现仍有许多仓库处在比较原始、传统、粗放…
阅读更多...
[译] DeepSpeed：所有人都能用的超大规模模型训练工具

[译] DeepSpeed：所有人都能用的超大规模模型训练工具

我们于今年 2 月份发布了 DeepSpeed。这是一个开源深度学习训练优化库&#xff0c;其中包含的一个新的显存优化技术—— ZeRO&#xff08;零冗余优化器&#xff09;&#xff0c;通过扩大规模&#xff0c;提升速度&#xff0c;控制成本&#xff0c;提升可用性&#xff0c;极大地…
阅读更多...
如何绘制甘特图？这个软件来帮你

如何绘制甘特图？这个软件来帮你

最好用的甘特图软件是什么&#xff1f;先看效果&#xff0c;再放教程&#xff1a; 这是大家用的比较多的excel做出的甘特图&#xff1a; 这是我做的动态甘特图&#xff1a; 两种方法&#xff0c;分享给大家&#xff0c;按需选择即可。 第一种&#xff1a;用Excel制作甘特图 用…
阅读更多...
nx安装cuda与cudnn

nx安装cuda与cudnn

本文参考 Jetson xavier nx 安装CUDA10.2&#xff0c;和cudnn8.0_jetson安装cuda_三羊木木的博客-CSDN博客 NX安装cuda和cudnn_nx cuda_viatea的博客-CSDN博客 进入nx系统后&#xff0c;输入 sudo apt-get update 更新源 目录 1 cuda 2 cudnn 1 cuda sudo apt-get ins…
阅读更多...
如何注册GitHub账号

如何注册GitHub账号

一、注册GitHub账号 1、浏览器URL中输入地址: https://github.com/ 2、跳转至GitHub官网 3、点击右上角sign up按钮 4、填写注册信息 这个大意是产品更新时消息会通过邮箱发给你&#xff0c;根据需求选择y or n 5、验证账户 有的小伙伴会出现错误信息 Unable to verify you…
阅读更多...
考研算法28天：优化版插入排序（折半插入排序）【二分，插入排序】

考研算法28天：优化版插入排序（折半插入排序）【二分，插入排序】

算法介绍 算法介绍就是说我们原先写的插入排序的这段代码 for(int i1;i<n;i){//开始向前遍历&#xff0c;如果发现前面的元素比//x大的话&#xff0c;就将前面的元素放到x的后面int x q[i],ji;while( j && q[j-1]>x ){q[j] q[j-1];j--;}q[j] x;}我们里面那层…
阅读更多...
Redis_6.2.12下载及安装（CentOS7）

Redis_6.2.12下载及安装（CentOS7）

文章目录 Redis安装-CentOS71、下载地址2、下载安装流程2.1 安装依赖2.2 官网下载tar包2.3 进入解压目录并编译2.4 启动Redis服务2.5 全局使用redis-cli、redis-server2.6 防火墙开启6379端口查看防火墙状态以及启动、关闭配置firewalld-cmd开启防火墙端口 3、设置开机自动启动…
阅读更多...
SpringBoot集成百度人脸识别

SpringBoot集成百度人脸识别

SpringBoot集成百度人脸识别 1、概述2、账号申请账号登录注册创建应用 3、抽取模板工具AipFacePropertiesAipFaceTemplateapplication.yml 4、测试 ​ 人脸识别&#xff08;Face Recognition&#xff09;基于图像或视频中的人脸检测、分析和比对技术&#xff0c;提供对您已获授…
阅读更多...
如何使用 SpringBoot 创建 RESTful API

如何使用 SpringBoot 创建 RESTful API

如何使用 SpringBoot 创建 RESTful API SpringBoot是一个流行的Java框架&#xff0c;它可以帮助我们快速构建应用程序。其中&#xff0c;创建RESTful API是SpringBoot的常见用例之一。在本文中&#xff0c;我们将介绍如何使用SpringBoot创建RESTful API。 什么是RESTful API …
阅读更多...
不同业务场景、不同数据类型，对应亚马逊云科技不同数据库服务

不同业务场景、不同数据类型，对应亚马逊云科技不同数据库服务

小小的改变&#xff0c;标志一个新时代的全面开启&#xff0c;一个数据库的云原生时代。前不久&#xff0c;Gartner公布了一组数据&#xff0c;引起了不小的讨论度。在2022年全球数据库管理系统的市场份额排名中&#xff0c;作为纯云厂商的亚马逊云科技&#xff0c;超越了老牌传…
阅读更多...
电脑如何录屏？3个方法教您win10电脑怎么录屏！

电脑如何录屏？3个方法教您win10电脑怎么录屏！

案例&#xff1a;有时手机录屏满足不了我的录制需求&#xff0c;我需要在电脑上录屏&#xff0c;但我对电脑不是特别熟悉&#xff0c;不知道如何在电脑上录屏。 很多小伙伴想在电脑上录制视频&#xff0c;但又不知道如何操作。win10电脑录屏怎么录&#xff1f;有没有简单且详细…
阅读更多...
趋势分享 | 多云时代数据安全面临的挑战

趋势分享 | 多云时代数据安全面临的挑战

IT 和数据管理研究和咨询公司 EMA&#xff08;Enterprise Management Associates&#xff09;早前发布的一份《多云环境下的数据安全》&#xff08;Data Security in a Multi-Cloud World&#xff09;研究报告&#xff0c;调查了来自十个以上不同行业垂直领域、公司规模在 500 …
阅读更多...
Kotlin对象和单例模式：探索这种强大设计模式的好处

Kotlin对象和单例模式：探索这种强大设计模式的好处

Kotlin对象和单例模式&#xff1a;探索这种强大设计模式的好处 在Kotlin中&#xff0c;使用关键字"object"来定义一个单例对象。所谓单例对象&#xff0c;就是在整个应用程序中只有一个实例存在。简单来说&#xff0c;就好像只有一个蜘蛛侠一样&#xff0c;不可能同时…
阅读更多...
群晖NAS遇到断电如何自动关机

群晖NAS遇到断电如何自动关机

群晖NAS遇到断电时如何自动关机 前置条件实现功能的想法具体实施的步骤开启群晖Linux的SSH登陆安装Putty或是Xshell远程登陆上群晖创建计划任务 前置条件 需要一台UPS&#xff08;品牌功能不限&#xff0c;只需续航5分钟以上就可以&#xff09; 实现功能的想法 通过监控网卡…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023