ECharts中Map(地图)样式配置、渐变色生成

news2025/3/16 10:27:28

前言

ECharts是我们常用的图表控件,功能特别强大,每次使用都要查API比较繁琐,这里就记录开发中常用的配置。

官网:https://echarts.apache.org/handbook/zh/get-started

配置项:https://echarts.apache.org/zh/option.html#title

第三方示例平台:https://www.makeapie.cn/echarts

主题:https://echarts.apache.org/zh/theme-builder.html

样式

示例

let option = {
    tooltip: {
      show: true,
      formatter: function (params) {
        if (params.value.length > 1) {
          return "  " + params.name + ":" + params.value[2];
        } else {
          return "  " + params.name + ":" + (params.value || 0);
        }
      },
    },
    geo: {
      map: "china",
      zoom: 1.2,
      show: true,
      roam: false,
      emphasis: {
        label: {
          show: false,
        },
      },
      layoutSize: "100%",
      itemStyle: {
        borderColor: "rgba(147, 235, 248, 1)",
        borderWidth: 2,
        shadowColor: "rgb(90,160,234)",
        shadowOffsetX: 0,
        shadowOffsetY: 10,
        shadowBlur: 10,
      },
    },
    visualMap: {
      show: false,
      seriesIndex: [0],
      inRange: {
        color: ["#8db1f1", "#026aa9"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        aspectScale: 0.75,
        zoom: 1.2,
        label: {
          show: true,
          color: "#ffffff",
        },
        itemStyle: {
          borderColor: "rgba(147, 235, 248, 1)",
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.9,
            colorStops: [
              {
                offset: 0,
                color: "rgba(17,217,245,0.5)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(10,209,231,0.2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          borderWidth: 1,
        },
        emphasis: {
          label: {
            show: false,
            color: "#ffffff",
          },
          itemStyle: {
            areaColor: "#026aa9",
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
        data: allData,
      },
    ],
};

层级

地图的配置是一层盖一层,从底层顶层的配置依次为:

geo => series => visualMap

geoseries 中都有两个配置项

  • itemStyle 未选中的样式
  • emphasis 选中的样式

geo隐藏掉只有series也是能正常显示整个地图的。

geoseries 的搭配可以实现一些阴影,偏移从而实现类似立体的效果。

visualMap

其中visualMap设置的背景颜色是动态的,会根据数值的大小在两个颜色之间变化。

visualMap: {
  show: false,
  seriesIndex: [0],
  inRange: {
    color: ["#cdcaf8", "#026aa9"],
  },
},

需要注意的是:

当区域有数据的时候会使用visualMap的颜色覆盖,如果没有数据则会使用seriesitemStyle的样式。

默认最小值和最大值会根据数据自动计算,当然我们也可以指定具体的值。

visualMap: {
    min: 0,
    max: 100,
    inRange: {
        color: ['#e0ffff', '#0066ff'] // 设置颜色范围,浅色到深色
    },
    calculable: true,
    show: true
},

渐变色

线性渐变

沿着一条直线从一种颜色过渡到另一种颜色。

{
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#8db1f1", // 起始颜色
      },
      {
        offset: 1,
        color: "#026aa9", // 终止颜色
      },
    ],
}

径向渐变

从一个中心点向四周辐射的渐变色。

{
    type: 'radial',
    x: 0.5, 
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'rgba(255, 0, 0, 1)' // 起始颜色
    }, {
        offset: 1, color: 'rgba(0, 0, 255, 1)' // 终止颜色
    }]
}

你可以设置以下属性:

  1. type:设置渐变的类型,固定值为 ‘radial’。
  2. x、y:设置渐变的中心点坐标,取值范围为 0~1,其中 (0, 0) 表示左上角,(1, 1) 表示右下角。
  3. r:设置渐变的半径,也是相对于整个绘图区域的半径,取值范围为 0~1,1 表示半径等于绘图区域的最短边的一半。
  4. colorStops:设置渐变的起始颜色、终止颜色以及它们的位置。 它是一个数组,每个元素包含两个属性,分别是 offset 和 color。 其中 offset 表示该位置距离渐变位置的百分比,取值范围为 0~1,color 则是该位置所对应的颜色值。

覆盖散点

涟漪散点

series: [
  {
    type: "map",
    map: "china",
    aspectScale: 0.75,
    zoom: 1.2,
    label: {
      show: true,
      color: "#11688a",
    },
    itemStyle: {
      areaColor: "rgba(10,76,139,1)",
      borderColor: "#215495",
      borderWidth: 1,
    },
    emphasis: {
      label: {
        show: false,
      },
      itemStyle: { areaColor: "#061E3D" },
    },
    data: allData,
  },
  {
    type: "effectScatter",
    coordinateSystem: "geo",
    rippleEffect: {
      brushType: "stroke",
    },
    showEffectOn: "render",
    itemStyle: {
      color: {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: "rgba(5,80,151,0.2)",
          },
          {
            offset: 0.8,
            color: "rgba(5,80,151,0.8)",
          },
          {
            offset: 1,
            color: "rgba(0,108,255,0.7)",
          },
        ],
        global: false, // 缺省为 false
      },
    },
    label: {
      show: true,
      color: "#fff",
      fontWeight: "bold",
      position: "inside",
      formatter: function (para) {
        return "{cnNum|" + para.data.value[2] + "}";
      },
      rich: {
        cnNum: {
          fontSize: 13,
          color: "#D4EEFF",
        },
      },
    },
    symbol: "circle",
    symbolSize: function (val) {
      if (val[2] === 0) {
        return 0;
      }
      let a = (maxSize4Pin - minSize4Pin) / (max - min);
      let b = maxSize4Pin - a * max;
      return a * val[2] + b * 1.2;
    },
    data: convertData(allData),
    zlevel: 1,
  },
],
let convertData = function (outdata) {
    let res = [];
    for (let i = 0; i < outdata.length; i++) {
      let geoCoord = geoCoordMap[outdata[i].name];
      if (geoCoord) {
        res.push({
          name: outdata[i].name,
          value: geoCoord.concat(outdata[i].value),
        });
      }
    }
    return res;
};

值类似于

{
    name : "陕西",
    value: [113.0668, 33.8818, 140]
}

普通散点

{
    type: "scatter",
    coordinateSystem: "geo",
    rippleEffect: {
      brushType: "stroke",
    },
    showEffectOn: "render",
    itemStyle: {
      color: {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: "rgba(5,80,151,0.8)",
          },
          {
            offset: 0.5,
            color: "rgba(0,108,255,0.7)",
          },
          {
            offset: 1,
            color: "rgba(5,80,151,0.2)",
          },
        ],
        global: false, // 缺省为 false
      },
    },
    label: {
      show: true,
      color: "#fff",
      fontWeight: "bold",
      position: "inside",
      formatter: function (para) {
        return "{cnNum|" + para.data.value[2] + "}";
      },
      rich: {
        cnNum: {
          fontSize: 13,
          color: "#D4EEFF",
        },
      },
    },
    symbol: "circle",
    symbolSize: function (val) {
      if (val[2] === 0) {
        return 0;
      }
      let a = (maxSize4Pin - minSize4Pin) / (max - min);
      let b = maxSize4Pin - a * max;
      return a * val[2] + b * 1.2;
    },
    data: convertData(allData),
    zlevel: 1,
},

放射线

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";

export default {
  name: "BarChart",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    title: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: function () {
      this.initChart();
    },
  },
  async mounted() {
    await this.$nextTick();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el);
      }
      var chinaGeoCoordMap = {
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京市: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [114.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [101.4038, 36.8207],
        新疆: [87.9236, 43.5883],
        西藏: [91.11, 29.97],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        江苏: [118.8062, 31.9208],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [119.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        上海: [121.4648, 31.2891],
      };
      let chinaDatas = [
        [
          {
            name: "黑龙江",
            value: 0,
          },
        ],
        [
          {
            name: "内蒙古",
            value: 0,
          },
        ],
        [
          {
            name: "吉林",
            value: 0,
          },
        ],
        [
          {
            name: "辽宁",
            value: 0,
          },
        ],
        [
          {
            name: "河北",
            value: 0,
          },
        ],
        [
          {
            name: "天津",
            value: 0,
          },
        ],
        [
          {
            name: "山西",
            value: 0,
          },
        ],
        [
          {
            name: "陕西",
            value: 0,
          },
        ],
        [
          {
            name: "甘肃",
            value: 0,
          },
        ],
        [
          {
            name: "宁夏",
            value: 0,
          },
        ],
        [
          {
            name: "青海",
            value: 0,
          },
        ],
        [
          {
            name: "新疆",
            value: 0,
          },
        ],
        [
          {
            name: "西藏",
            value: 0,
          },
        ],
        [
          {
            name: "四川",
            value: 0,
          },
        ],
        [
          {
            name: "重庆",
            value: 0,
          },
        ],
        [
          {
            name: "山东",
            value: 0,
          },
        ],
        [
          {
            name: "河南",
            value: 0,
          },
        ],
        [
          {
            name: "江苏",
            value: 0,
          },
        ],
        [
          {
            name: "安徽",
            value: 0,
          },
        ],
        [
          {
            name: "湖北",
            value: 0,
          },
        ],
        [
          {
            name: "浙江",
            value: 0,
          },
        ],
        [
          {
            name: "福建",
            value: 0,
          },
        ],
        [
          {
            name: "江西",
            value: 0,
          },
        ],
        [
          {
            name: "湖南",
            value: 0,
          },
        ],
        [
          {
            name: "贵州",
            value: 0,
          },
        ],
        [
          {
            name: "广西",
            value: 0,
          },
        ],
        [
          {
            name: "海南",
            value: 0,
          },
        ],
        [
          {
            name: "上海",
            value: 1,
          },
        ],
      ];
      let allpoints = Object.values(chinaGeoCoordMap);

      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];
          let fromCoord = chinaGeoCoordMap[dataItem[0].name];
          let toCoord = allpoints[Math.floor(Math.random() * allpoints.length)];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value,
              },
              {
                coord: toCoord,
              },
            ]);
          }
        }
        return res;
      };
      var series = [];
      series.push(
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度,值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              color: "#17F5FF",
            },
          },
          data: convertData(chinaDatas),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间,值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制,值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: "right", //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name;
              },
              fontSize: 10,
              color: "#FFFFFF",
            },
            emphasis: {
              show: true,
            },
          },
          symbol: "circle",
          symbolSize: function (val) {
            return 5 + val[2] * 5; //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: "#17F5FF",
            },
          },
          data: chinaDatas.map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([
                dataItem[0].value,
              ]),
            };
          }),
        }
      );

      let option = {
        tooltip: {
          show: false,
          trigger: "item",
          backgroundColor: "rgba(166, 200, 76, 0.82)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res =
              "<span style='color:#fff;'>" +
                name +
                "</span><br/>数据:" +
                value || 0;
            return res;
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false, //是否允许缩放
          itemStyle: {
            normal: {
              color: "rgba(51, 69, 89, .5)", //地图背景色
              borderColor: "#516a89", //省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //悬浮背景
            },
          },
        },
        series: series,
      };
      this.chart.setOption(option);
    },
  },
};
</script>

背景变色

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";

export default {
  name: "BarChart",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    title: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: function () {
      this.initChart();
    },
  },
  async mounted() {
    await this.$nextTick();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el);
      }

      let dataList = [
        {
          name: "重庆",
          value: 347,
        },
        {
          name: "浙江",
          value: 59,
        },
        {
          name: "云南",
          value: 115,
        },
        {
          name: "新疆维吾尔自治区",
          value: 45,
        },
        {
          name: "香港",
          value: 81,
        },
        {
          name: "西藏自治区",
          value: 5,
        },
        {
          name: "天津",
          value: 121,
        },
        {
          name: "四川",
          value: 23,
        },
        {
          name: "上海",
          value: 1140,
        },
        {
          name: "陕西",
          value: 143,
        },
        {
          name: "山西",
          value: 77,
        },
        {
          name: "山东",
          value: 209,
        },
        {
          name: "青海",
          value: 3,
        },
        {
          name: "宁夏回族自治区",
          value: 1,
        },
        {
          name: "内蒙古自治区",
          value: 7,
        },
        {
          name: "辽宁",
          value: 386,
        },
        {
          name: "江西",
          value: 67,
        },
        {
          name: "江苏",
          value: 464,
        },
        {
          name: "湖南",
          value: 6,
        },
        {
          name: "湖北",
          value: 614,
        },
        {
          name: "黑龙江",
          value: 53,
        },
        {
          name: "河南",
          value: 140,
        },
        {
          name: "河北",
          value: 190,
        },
        {
          name: "海南",
          value: 24,
        },
        {
          name: "贵州",
          value: 2,
        },
        {
          name: "广西壮族自治区",
          value: 77,
        },
        {
          name: "广东",
          value: 449,
        },
        {
          name: "甘肃",
          value: 7,
        },
        {
          name: "福建",
          value: 23,
        },
        {
          name: "北京",
          value: 603,
        },
        {
          name: "安徽",
          value: 29,
        },
      ];

      let option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.value.length > 1) {
              return "&nbsp;&nbsp;" + params.name + ":" + params.value[2];
            } else {
              return "&nbsp;&nbsp;" + params.name + ":" + (params.value || 0);
            }
          },
        },
        visualMap: {
          show: false,

          seriesIndex: [0],
          inRange: {
            color: ["#A5DCF4", "#006edd"],
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false,
            },
          },
          layoutSize: "100%",
          itemStyle: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 2,
              shadowColor: "rgba(10,76,139,1)",
              shadowOffsetY: 0,
              shadowBlur: 60,
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                color: "#4dccff",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#073684", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#061E3D", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#215495",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#061E3D",
              },
            },
            data: dataList,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

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

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

相关文章

MySQL | MySQL表的增删改查(CRUD)

目录 前言&#xff1a;什么是 CRUD ?一、Creat 新增1.1 语法1.2 示例1.2.1 单行数据全列插入1.2.2 单行数据指定列插入1.2.3 多行数据指定列插入 二、Retrieve 检索2.1 语法2.2 示例2.2.1 全列查询2.2.2 指定列查询2.2.3 查询字段为表达式2.2.4 结果去重查询2.2.5 where条件查…

电子电气架构 --- 分布到集中的动カ系统及基于域控制器的架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

基于SpringBoot的“考研互助平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“考研互助平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体功能图 局部E-R图 系统首页界面 系统注册…

基于javaweb的SpringBoot足球俱乐部管理系统设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…

DQN 玩 2048 实战|第一期!搭建游戏环境(附 PyGame 可视化源码)

视频讲解&#xff1a; DQN 玩 2048 实战&#xff5c;第一期&#xff01;搭建游戏环境&#xff08;附 PyGame 可视化源码&#xff09; 代码仓库&#xff1a;GitHub - LitchiCheng/DRL-learning: 深度强化学习 2048游戏介绍&#xff0c;引用维基百科 《2048》在44的网格上进行。…

高频面试题(含笔试高频算法整理)基本总结回顾24

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…

第八节:红黑树(初阶)

【本节要点】 红黑树概念红黑树性质红黑树结点定义红黑树结构红黑树插入操作的分析 一、红黑树的概念与性质 1.1 红黑树的概念 红黑树 &#xff0c;是一种 二叉搜索树 &#xff0c;但 在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是 Red和 Black 。 通过对 任何…

Webpack vs Rollup vs Parcel:构建工具深度对比

文章目录 1. 核心特性对比1.1 功能定位1.2 技术架构对比 2. 配置与使用2.1 Webpack 配置示例2.2 Rollup 配置示例2.3 Parcel 使用示例 3. 性能对比3.1 构建速度3.2 输出质量 4. 生态系统4.1 插件生态4.2 学习曲线 5. 适用场景分析5.1 Webpack 适用场景5.2 Rollup 适用场景5.3 P…

Centos7使用docker搭建redis集群

前置准备&#xff1a; Centos7安装docker就不多说了… 本次目的是搭建3主3从&#xff08;当然你也可以按需扩展&#xff09;准备三台服务器&#xff0c;假定IP分别为&#xff1a;192.168.75.128、192.168.75.129、192.168.75.130安装 redis&#xff1a; #拉取redis docker p…

数字孪生像魔镜,映照出无限可能的未来

在当今科技飞速发展的时代&#xff0c;数字孪生作为一项极具潜力的前沿技术&#xff0c;正逐渐崭露头角&#xff0c;成为众多领域关注的焦点。它犹如一面神奇的魔镜&#xff0c;以数字化的方式精准映照出现实世界中的各种实体与系统&#xff0c;为我们开启了一扇通往无限可能未…

前端知识点---原型-原型链(javascript)

文章目录 原型原型链:实际应用面试题回答 原型 原型:每个函数都有prototype属性 称之为原型 因为这个属性的值是个对象&#xff0c;也称为原型对象 只有函数才有prototype属性 作用: 1.存放一些属性和方法 2.在Javascript中实现继承 const arr new Array(1, 2, 3, 4) con…

数据类设计_图片类设计之6_混合图形类设计(前端架构)

前言 学的东西多了,要想办法用出来.C和C是偏向底层的语言,直接与数据打交道.尝试做一些和数据方面相关的内容 引入 接续上一篇,讨论混合图形类设计 方法论-现在能做什么 这段属于聊天内容---有句话是这么说的&#xff1a;不要只埋头拉车&#xff0c;还要抬头看路。写代码也是…

2024年12月CCF-GESP编程能力等级认证C++编程一级真题解析

一级真题的难度: ‌ CCF-GESP编程能力等级认证C++编程一级真题的难度适中‌。这些真题主要考察的是C++编程的基础知识、基本语法以及简单的算法逻辑。从搜索结果中可以看到,真题内容包括了选择题、编程题等题型,涉及的内容如C++表达式的计算、基本输入输出语句的理解…

尤瓦尔·诺亚·赫拉利(Yuval Noah Harari)作品和思想深度报告

尤瓦尔诺亚赫拉利&#xff08;Yuval Noah Harari&#xff09;作品和思想深度报告 引言 尤瓦尔诺亚赫拉利&#xff08;Yuval Noah Harari&#xff09;是当今最具影响力的公众知识分子之一 ynharari.com 。作为一名历史学家和哲学家&#xff0c;他以宏大的视角和清晰生动的语言…

JConsole:JDK性能监控利器之JConsole的使用说明与案例实践

&#x1fa81;&#x1f341; 希望本文能给您带来帮助&#xff0c;如果有任何问题&#xff0c;欢迎批评指正&#xff01;&#x1f405;&#x1f43e;&#x1f341;&#x1f425; 文章目录 一、背景二、JConsole的启动与连接2.1 JConsole的启动2.2 进程连接2.2.1 本地进程连接2.2…

Neural Architecture Search for Transformers:A Survey

摘要 基于 Transformer 的深度神经网络架构因其在自然语言处理 (NLP) 和计算机视觉 (CV) 领域的各种应用中的有效性而引起了极大的兴趣。这些模型是多种语言任务&#xff08;例如情绪分析和文本摘要&#xff09;的实际选择&#xff0c;取代了长短期记忆 (LSTM) 模型。视觉 Tr…

Browser Copilot 开源浏览器扩展,使用现有或定制的 AI 助手来完成日常 Web 应用程序任务。

一、软件介绍 文末提供源码和开源扩展程序下载 Browser Copilot 是一个开源浏览器扩展&#xff0c;允许您使用现有或定制的 AI 助手来帮助您完成日常 Web 应用程序任务。 目标是提供多功能的 UI 和简单的框架&#xff0c;以实现和使用越来越多的 copilots&#xff08;AI 助手&…

基于PSO粒子群优化的XGBoost时间序列预测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 XGBoost算法原理 4.2 XGBoost优化 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2024b 3.部分核心程序 &#xff08;完整版代码包含…

aws(学习笔记第三十三课) 深入使用cdk 练习aws athena

文章目录 aws(学习笔记第三十三课) 深入使用cdk学习内容&#xff1a;1. 使用aws athena1.1 什么是aws athena1.2 什么是aws glue1.2 为什么aws athena和aws glue一起使用 2. 开始练习aws athena2.1 代码链接2.2 整体架构2.3 代码解析2.3.1 创建测试数据的S3 bucket2.3.2 创建保…

基于RAGFlow本地部署DeepSpeek-R1大模型与知识库:从配置到应用的全流程解析

作者&#xff1a;后端小肥肠 &#x1f34a; 有疑问可私信或评论区联系我。 &#x1f951; 创作不易未经允许严禁转载。 姊妹篇&#xff1a; DeepSpeek服务器繁忙&#xff1f;这几种替代方案帮你流畅使用&#xff01;&#xff08;附本地部署教程&#xff09;-CSDN博客 10分钟上手…