ECharts的基本使用

news2024/11/18 22:45:32

目录

一、使用前提

1、安装

2、创建文件

二、LineView.vue文件【相当于一个组件】

1、导入

2、methods方法下写init(){}方法进行选择

3、methods方法下写setOptioin(option)

4、init()函数调用

5、整合完整代码

三、IndexView.vue文件【实现组件引入显示】

1、引入

2、注册

3、显示

四、数据操作

1、series系列

2、title标题

3、legend图例

4、tooltip提示框

五、地图

1、前期准备

2、设置配置项

3、点击事件

六、动态数据渲染

1、问题提出

2、解决方案

整篇文章将通过实例讲述ECharts的基本使用

官网：快速上手 - Handbook - Apache ECharts

一、使用前提

1、安装

npm install echarts --save

2、创建文件

（1）在views文件夹下=》创建echarts=》创建LineView.vue文件

（2）在views文件夹下=》创建IndexView.vue【用于所有图片的展示】

二、LineView.vue文件【相当于一个组件】

1、导入

//5.0以上版本
import * as echarts from 'echarts'
//5.0以下
import  echarts from 'echarts'

2、methods方法下写init(){}方法进行选择

（1）获取dom元素

const dom = document.getElementById('')

（2）初始化表

this.chart = echarts.init(dom)

（3）配置项单独封装出去

this.setOptions()

3、methods方法下写setOptioin(option)

（1）option的定义

const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};

（2）option的作用

//作用：保证两样都有执行
option && this.chart.setOption(option)

4、init()函数调用

属于dom渲染，根据生命周期，要在mounted()调用

mounted() {
  this.init()
},

5、整合完整代码

<template>
  <div>
    <div id="line"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "LineView",

  data() {
    return {};
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      // 获取dom元素
      var dom = document.getElementById("line");
      // 初始化表
      this.chart = echarts.init(dom);
      // 设置配置项
      this.setOptions();
    },
    setOptions() {
      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
#line {
  width: 500px;
  height: 500px;
}
</style>

三、IndexView.vue文件【实现组件引入显示】

1、引入

import lineView from './echarts/lineView.vue';

2、注册

components:{
    lineView
},

3、显示

<div class="index">
    <!-- 折线图 -->
    <div class="line">
    <lineView></lineView>
    </div>
</div>
.index {
  width: 100%;
  height: 100%;
  .line {
    width: 500px;
    height: 500px;
  }
}

四、数据操作

1、series系列

（1）折线图、柱状图

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],//数据
    type: "line",//折线图
    smooth: true,//平滑
  },
  {
    data: [50, 30, 24, 18, 35, 147, 260],
    type: "line",//折线图
  },
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: "bar",//柱状图
  },
],

（2）饼图

IndexView.vue

<template>
  <div>
    <div class="index">
      <!-- 折线图 -->
      <div class="line">
        <lineView></lineView>
      </div>
      <!-- 饼图 -->
      <div class="pie">
        <pieView></pieView>
      </div>
    </div>
  </div>
</template>

<script>
import lineView from "./echarts/lineView.vue";
import pieView from "./echarts/PieView.vue";

export default {
  name: "IndexView",

  components: {
    lineView,
    pieView,
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  .line {
    width: 500px;
    height: 500px;
  }
  .pie {
    width: 500px;
    height: 500px;
  }
}
</style>

PieView.vue

<template>
  <div>
    <div id="PiePage"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PieView",

  data() {
    return {};
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      // 获取dom元素
      var dom = document.getElementById("PiePage");
      // 初始化表
      this.chart = echarts.init(dom);
      // 设置配置项
      this.setOptions();
    },
    setOptions() {
      const option = {
        title: {
          text: "饼状图",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: '50%', //饼状大小
            data: [
              //数据
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              //高亮状态
              itemStyle: {
                //样式
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
#PiePage {
  width: 500px;
  height: 500px;
}
</style>

①通过radius指定外半径、内半径

series: [
  {
    name: "Access From",
    type: "pie",
    radius: ['20%','50%'],//[内半径, 外半径]
    data: [
      { value: 1048, name: "Search Engine" },
      { value: 735, name: "Direct" },
      { value: 580, name: "Email" },
      { value: 484, name: "Union Ads" },
      { value: 300, name: "Video Ads" },
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
    },
  },
],

②文本标签

const option = {
  title: {
    text: "饼状图",
    subtext: "Fake Data",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["20%", "50%"], //[内半径, 外半径]
      data: [
        //数据
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      label:{
        show:true,
        position:'center'
      },
      emphasis: {
        //高亮状态
        itemStyle: {
          //样式
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

③emphasis高亮状态

const option = {
  title: {
    text: "饼状图",
    subtext: "Fake Data",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["20%", "50%"], //[内半径, 外半径]
      data: [
        //数据
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      label:{
        show:false,
        position:'center'
      },
      //高亮状态
      emphasis: {
        //文字样式
        label:{
          show:true,
          fontSize:20,
          fontWeight:'bold'
        },
        //样式
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

2、title标题

const option = {
  title:{
    text:'统计图',
    link:'https://www.baidu.com/',//跳转路径
    target:'blank',//在新页面打开
    textStyle:{
      color:"blue",
      fontSize:'26',
      fontWeight:"bold",
    },
    left:'center',
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line", //折线图
    },
    {
      data: [50, 30, 24, 18, 35, 147, 260],
      type: "line", //折线图
    },
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "bar", //柱状图
    },
  ],
};

3、legend图例

const option = {
  title:{
    text:'统计图',
    link:'https://www.baidu.com/',//跳转路径
    target:'blank',//在新页面打开
    textStyle:{
      color:"blue",
      fontSize:'26',
      fontWeight:"bold",
    },
    left:'center',
  },
  legend: {
    data: ['1', '2', '3'],//对应的系列
    left:'right',
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name:'1',//对应图例
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line", //折线图
    },
    {
      name:'2',
      data: [50, 30, 24, 18, 35, 147, 260],
      type: "line", //折线图
    },
    {
      name:'3',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "bar", //柱状图
    },
  ],
};

4、tooltip提示框

const option = {
  title:{
    text:'统计图',
    link:'https://www.baidu.com/',//跳转路径
    target:'blank',//在新页面打开
    textStyle:{
      color:"blue",
      fontSize:'26',
      fontWeight:"bold",
    },
    left:'center',
  },
  legend: {
    data: ['1', '2', '3'],//对应的系列
    left:'right',
  },
  tooltip:{
    show:true,//展示
    trigger:'axis',//同时显示三种数据，方便对比
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name:'1',//对应图例
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line", //折线图
    },
    {
      name:'2',
      data: [50, 30, 24, 18, 35, 147, 260],
      type: "line", //折线图
    },
    {
      name:'3',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "bar", //柱状图
    },
  ],
};

五、地图

1、前期准备

（1）获取JSON格式地图信息文档

DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。icon-default.png?t=N7T8http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.29b915ddWQjcfk（2）下载需要的数据，小编以福建省为例子

（3）放入静态文件夹assets中

（4）引入、注册地图

<template>
  <div>
    <div id="MapPage"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入
import map from "@/assets/福建省.json";

export default {
  name: 'ThreeTwoMapView',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    init(){
      const dom = document.getElementById('MapPage')
      this.chart = echarts.init(dom)
      // 注册地图
      echarts.registerMap('Fujian',map)
      // 设置配置项
      this.setOption()
    },
    setOption(){
      const option = {

      }

      option && this.chart.setOption(option);
    }
  },
};
</script>

<style lang="scss" scoped>
#MapPage{
  width: 500px;
  height: 500px;
}
</style>

2、设置配置项

setOption(){
  const option = {
    series:[
      {
        name:'福建省',
        type:"map",
        map:'Fujian',
      }
    ]
  }

  option && this.chart.setOption(option);
}

（1）roam鼠标拖拽缩放、偏移

const option = {
  series:[
    {
      name:'福建省',
      type:"map",
      map:'Fujian',
      roam:true,
    }
  ]
}

（2）scaleLimit缩放限制

const option = {
  series: [
    {
      name: "福建省",
      type: "map",
      map: "Fujian",
      roam: true,//是否可缩放、偏移
      zoom:0.5,//初始缩放比例
      scaleLimit:{//缩放限制
        min:0.5,
        max:10,
      }
    },
  ],
};

（3）itemStyle图形样式

const option = {
  series: [
    {
      name: "福建省",
      type: "map",
      map: "Fujian",
      roam: true,//是否可缩放、偏移
      zoom:0.5,//初始缩放比例
      scaleLimit:{//缩放限制
        min:0.5,
        max:10,
      },
      // 文本标签
      label:{
        show:true,
        color:"#0000ff"
      },
      // 图形样式
      itemStyle:{
        areaColor:"#00ffff",//区域颜色
        borderColor:'black',//描边颜色
        shadowColor:'rgba(0,0,0,0.5)',//阴影颜色
        shadowBlur:10,//阴影的模糊大小
      }
    },
  ],
};

（4）emphasis高亮

const option = {
  series: [
    {
      name: "福建省",
      type: "map",
      map: "Fujian",
      roam: true,//是否可缩放、偏移
      zoom:0.5,//初始缩放比例
      scaleLimit:{//缩放限制
        min:0.5,
        max:10,
      },
      // 文本标签
      label:{
        show:true,
        color:"#0000ff"
      },
      // 图形样式
      itemStyle:{
        areaColor:"#00ffff",//区域颜色
        borderColor:'black',//描边颜色
        shadowColor:'rgba(255,0,0,0.5)',//阴影颜色
        shadowBlur:10,//阴影的模糊大小
      },
      // 高亮
      emphasis:{
        label:{
          show:true,
          color:'#fff'
        },
        // 图形样式
        itemStyle:{
          areaColor:"#000",//区域颜色
          borderColor:'black',//描边颜色
        },
      }
    },
  ],
};

（5）选中

// 选中
select:{
  label:{
    show:true,
    color:'#fff'
  },
  // 图形样式
  itemStyle:{
    areaColor:"#0f0",//区域颜色
    borderColor:'black',//描边颜色
  },
},

3、点击事件

init() {
  const dom = document.getElementById("MapPage");
  this.chart = echarts.init(dom);
  // 注册地图
  echarts.registerMap("Fujian", map);
  // 点击
  this.chart.on("click", (params) => {
    console.log(params);
  });
  // 设置配置项
  this.setOption();
},

六、动态数据渲染

1、问题提出

当data数据是动态的，在created的dom还没有渲染时，异步获取数据，发现图并不能绘制成功

export default {
  name: "LineView",

  data() {
    return {
      arr:[],//动态数据
    };
  },

  created(){
    // dom还没有渲染
    this.arrApi()
  },

  mounted() {
    this.init();
  }, 

  methods: {
    init() {
      // 获取dom元素
      var dom = document.getElementById("line");
      // 初始化表
      this.chart = echarts.init(dom);
      // 设置配置项
      this.setOptions();
    },
    setOptions() {
      const option = {
        title: {
          text: "统计图",
          link: "https://www.baidu.com/", //跳转路径
          target: "blank", //在新页面打开
          textStyle: {
            color: "blue",
            fontSize: "26",
            fontWeight: "bold",
          },
          left: "center",
        },
        legend: {
          data: ["1", "2", "3"], //对应的系列
          left: "right",
        },
        tooltip: {
          show: true, //展示
          trigger: "axis", //同时显示三种数据，方便对比
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "1", //对应图例
            data: this.arr,
            type: "line", //折线图
          },
        ],
      };

      option && this.chart.setOption(option);
    },
    // 模拟异步请求获取数据
    arrApi(){
      setTimeout(()=>{
        this.arr = [50, 30, 24, 18, 35, 147, 260]
      })
    }
  },
};

2、解决方案

监听数据变化时，再次绘制即可

// 监听数据变化
watch:{
  arr:{
    handler(newV,oldV){
      console.log(newV,oldV);
      this.setOptions()//再次调用配置项
    }
  }
},

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

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

相关文章

P34~36第八章相量法

P34~36第八章相量法

8.1复数 复数可表示平面矢量、也可表示正弦量。特别是: 当复数表示正弦量的时候&#xff0c;此时复数称为相量。 8.2复数运算 复数除法也可看做乘法&#xff0c;乘法的几何意义是旋转&#xff08;辐角相加&#xff09;( e^x e^y e^xy)&#xff0c;同时伸缩&#xff08;模变…
阅读更多...
计算机操作系统-第七天

计算机操作系统-第七天

1、计算机操作系统的结构&#xff08;续集&#xff09; 分层结构 特性&#xff1a;最底层是硬件&#xff0c;最高层是用户接口&#xff0c;每层只可使用更低的相邻层所提供的功能接口&#xff08;只有第一层可以直接操作硬件&#xff0c;第二次只能使用第一层提供的功能接口..…
阅读更多...
英语——语法——从句——状语从句——笔记

英语——语法——从句——状语从句——笔记

一、概念 状语从句&#xff08;Adverbial Clause&#xff09;是指句子用作状语时&#xff0c;起副词作用的句子。状语从句中的从句可以修饰谓语。 状语从句根据其作用可分为时间、地点、原因、条件、目的、结果、让步、方式和比较等九 种状语从句。状语从句一般由连词(从属连词…
阅读更多...
01_51单片机软件安装和使用

01_51单片机软件安装和使用

step1:keil软件安装 安装keil5&#xff1a;安装keil5 新用户进入官网下载需要先注册 官网&#xff1a;官网 嵌入式51开发资源百度网盘&#xff1a;江协科技 网盘地址&#xff1a;网盘地址 提取码&#xff1a;gdzf 桌面上出现该图标表示安装完成 双击图标打开对软件进行破…
阅读更多...
向量空间概述

向量空间概述

向量空间 向量空间与子空间 当存在这样的一组向量集合 V V V&#xff0c;其中 v &#xff0c; u &#xff0c; w v&#xff0c;u&#xff0c;w v&#xff0c;u&#xff0c;w分别为集合 V V V中的元素&#xff0c;以及存在标量c&#xff0c;d u v ∈ V uv \in V uv∈V u v …
阅读更多...
【算法练习Day21】组合剪枝

【算法练习Day21】组合剪枝

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 组合剪枝总结&#xff1a; …
阅读更多...
c语言练习88：：移除链表元素

c语言练习88：：移除链表元素

移除链表元素 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 代码&#xff1a; /*** Definition for sing…
阅读更多...
基于Springboot宠物医院管理系统

基于Springboot宠物医院管理系统

项目环境&#xff1a; mysql5.7 jdk1.8
阅读更多...
CSS之实现线性渐变背景

CSS之实现线性渐变背景

1. background: linear-gradient() background: linear-gradient是CSS中用于创建线性渐变背景的属性&#xff0c;这个属性允许你定义一个在元素的背景中进行渐变的效果&#xff0c;可以从一个颜色过渡到另一个颜色。 基本语法 background: linear-gradient(direction, color-…
阅读更多...
Vue中this.$set()解决页面不更新问题

Vue中this.$set()解决页面不更新问题

Vue中的this.$set()用于解决数据更新后页面没有更新的问题&#xff0c;因为Vue2中的双向数据绑定是通过object.defineproperty()实现的。通过get和set方法&#xff0c;获取时触发get&#xff0c;更改时触发set。但是对于对象属性的删除和添加与根据数组的下标去修改数据的时候是…
阅读更多...
香港高才通通过后要做什么？

香港高才通通过后要做什么？

网上说现在香港高才通审核要一个月&#xff0c;所以最近没有每天关注&#xff0c;以为还要很久&#xff0c;结果今天打开邮箱&#xff0c;发现昨天就已经收到了我们一家人都审核通过的邮件&#xff0c;哈哈&#xff0c;开心… 今天整理了一下后续要做得事情&#xff1a; 缴费…
阅读更多...
【LeetCode刷题（数据结构与算法）】：二叉树的中序遍历

【LeetCode刷题（数据结构与算法）】：二叉树的中序遍历

给定一个二叉树的根节点root 返回它的中序遍历 示例1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[] 示例 3&#xff1a; 输入&#xff1a;root [1] 输出&#xff1a;[1] 这里…
阅读更多...
常见的噪声：高斯、泊松和椒盐噪声

常见的噪声：高斯、泊松和椒盐噪声

一、什么是图像噪声&#xff1f; 噪声在图像上常表现为一引起较强视觉效果的孤立像素点或像素块。一般噪声信号与要研究的对象不相关&#xff0c;它以无用的信息形式出现&#xff0c;扰乱图像的可观测信息。通俗的说就是噪声让图像不清楚。 二、噪声来源—两个方面 &#xf…
阅读更多...
数据结构 二叉树OJ题

数据结构 二叉树OJ题

数据结构 二叉树OJ题 文章目录 数据结构 二叉树OJ题1. 检查两颗二叉树是否相同2. 判断树是否为另一个树的子树3. 翻转二叉树4. 平衡二叉树5. 对称二叉树6. 二叉树遍历7. 二叉树层序遍历8. 最近公共祖先9. 二叉树创建字符串10. 非递归方式实现前序遍历11. 非递归方式实现中序遍历…
阅读更多...
动态内存管理+柔性数组+经典笔试题

动态内存管理+柔性数组+经典笔试题

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言进阶之路&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅数据结构探索&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…
阅读更多...
springboot 使用RocketMQ客户端生产消费消息DEMO

springboot 使用RocketMQ客户端生产消费消息DEMO

创建springboot项目省略 项目依赖 注意&#xff1a;当前客户端版本是 5.1.3 &#xff0c;安装的rocketmq服务的版本要与其对应 <properties><java.version>11</java.version><rocketmq-client-java-version>5.1.3</rocketmq-client-java-version&…
阅读更多...
EasyX趣味化编程note6，图片操作及文字

EasyX趣味化编程note6，图片操作及文字

大家好这里是Dark FlameMaster 如果说前边所学的内容会给我们带来一定的乐趣&#xff0c;那么今天这篇可以说是最好玩的了&#xff0c;我们可以进一步改进写出小程序的好玩度&#xff0c;你甚至可以把身边的人或事写进一个小程序&#xff0c;制作一个小游戏&#xff0c;恶搞身边…
阅读更多...
工业级Netty网关，京东是如何架构的？

工业级Netty网关，京东是如何架构的？

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;很多小伙伴拿到一线互联网企业如阿里、网易、有赞、希音、百度、滴滴的面试资格。 最近&#xff0c;尼恩指导一个小伙伴简历&#xff0c;写了一个《高并发网关项目》&#xff0c;此项目帮这个小伙拿到 字节/阿里/…
阅读更多...
掌握Golang匿名函数

掌握Golang匿名函数

一个全面的指南&#xff0c;以理解和使用Golang中的匿名函数 Golang以其简单和高效而闻名&#xff0c;赋予开发人员各种编程范式。其中一项增强代码模块化和灵活性的功能就是匿名函数。在这篇正式的博客文章中&#xff0c;我们将踏上探索Golang匿名函数深度的旅程。通过真实世…
阅读更多...
机器学习之Sigmoid函数

机器学习之Sigmoid函数

文章目录 Sigmoid函数是一种常用的数学函数&#xff0c;通常用于将实数映射到一个特定的区间。它的形状类似于"S"形状曲线&#xff0c;因此得名。Sigmoid函数在机器学习、神经网络和统计学中经常被使用&#xff0c;主要用于二元分类和处理概率值。 Sigmoid函数的一般…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023