带【科技感】的Echarts 图表

请添加图片描述
Echarts脚本在线地址 https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js

引入Echarts 脚本后粘贴代码

vue2 代码：

<template><div><div ref="col-2-row-2" class="col-2-row-2"></div></div>
</template>
<script>
export default {data() {return {config: {list: [{name: "垃圾治理", id: "scene_type_2", value: 11},{name: "生活垃圾", id: "random_clap_type_3", value: 5},{name: "水域治理", id: "scene_type_5", value: 1},{name: "生活污水", id: "random_clap_type_2", value: 4},{name: "文明乡风", id: "random_clap_type_6", value: 10},{name: "农业废弃物", id: "random_clap_type_4", value: 2},{name: "农村厕所", id: "random_clap_type_1", value: 6},{name: "其他问题", id: "random_clap_type_7", value: 0},{name: "基础设施", id: "scene_type_3", value: 6},{name: "村容村貌", id: "scene_type_1", value: 19},{name: "蓝天守卫", id: "scene_type_4", value: 2},]}}},methods: {initEcharts(dom, config, fn) {let _self = this, angle = 0, myChartif (this.$echarts.init) {myChart = this.$echarts.init(dom, null);} else {myChart = this.$echarts(dom, null);}setInterval(() => {angle = angle + 3let option = fn(_self, config, angle)myChart.setOption(option, true);// eslint-disable-next-line no-undef// tools.loopShowTooltip(myChart, option, {loopSeries: true});}, 120);},col2row2(vm, config = {}, angle = 0){let data = [];//角度，用来做简单的动画效果的let { list = [] } = configlet _self = this;let img = 'data:image/png;base64,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'let color=['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000']let seriesOption = [{name: '',type: 'pie',clockWise: false,radius: ['33%', '38%'],y: '-25%',hoverAnimation: false,label: {show: true,position: 'outside',color: '#ddd',normal: {show: true,textStyle: {fontSize: 12,color: '#bbd0e8'}},},itemStyle: {normal: {labelLine: {length: 20,length2: 40,show: true,color: '#00ffff',},// 数据 百分比label: {formatter: function (params) {let percent = 0;let total = 0;for (let i = 0; i < list.length; i++) {total += list[i].value;}percent = ((params.value / total) * 100).toFixed(0);if (params.name !== '') {return params.name + '：' + percent + '%';} else {return '';}},}},},data: data,},// 外线{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.65,r: Math.min(api.getWidth(), api.getHeight()) / 3.3,startAngle: ((0 + angle) * Math.PI) / 180,endAngle: ((90 + angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},// 外点{name: 'ring5', //紫点type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;let point = _self.getCirlPoint(x0, y0, r, 90 + angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //绿fill: '#00FEFF',},silent: true,};},data: [0],},// 外线{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.68,r: Math.min(api.getWidth(), api.getHeight()) / 3.3,startAngle: ((180 + angle) * Math.PI) / 180,endAngle: ((270 + angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},// 蓝色 -- 外点{name: 'ring5', type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;let point = _self.getCirlPoint(x0, y0, r, 180 + angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //绿fill: '#00FEFF',},silent: true,};},data: [0],},{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.68,r: Math.min(api.getWidth(), api.getHeight()) / 3.8,startAngle: ((270 + -angle) * Math.PI) / 180,endAngle: ((40 + -angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},// 橘色{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.68,r: Math.min(api.getWidth(), api.getHeight()) / 3.8,startAngle: ((90 + -angle) * Math.PI) / 180,endAngle: ((220 + -angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;let point = _self.getCirlPoint(x0, y0, r, 90 + -angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //粉fill: '#00FEFF',},silent: true,};},data: [0],},{name: 'ring5', //绿点type: 'custom',coordinateSystem: 'none',renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;let point = _self.getCirlPoint(x0, y0, r, 270 + -angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //绿fill: '#00FEFF',},silent: true,};},data: [0],},];for (let i = 0; i < list.length; i++) {data.push({value: list[i].value,name: list[i].name,itemStyle: {normal: {borderWidth: 5,shadowBlur: 20,borderColor: color[i],shadowColor: color[i],},},},{value: 2,name: '',itemStyle: {label: {show: false,},normal: {labelLine: {show: false,},color: 'rgba(0, 0, 0, 0)',borderColor: 'rgba(0, 0, 0, 0)',borderWidth: 0,},},})}return {color,title: {text: '问题类型',textAlign: 'center',left: '49%',top: '34%',textStyle: {fontWeight: 'normal',fontSize: 14,color: '#bbd0e8',textAlign: 'center',},},// 内环graphic: {elements: [{type: 'image',z: 3,style: {image: img,width: 80,height: 80,},left: 'center',top: '25%',position: [100, 100],},],},tooltip: {show: false,},legend: {icon: 'circle',orient: 'horizontal',y: '76%',data: list.map(i => i.name),align: 'left',textStyle: {fontSize: 12,color: '#bbd0e8',},itemGap: 5,},toolbox: {show: false,},series: seriesOption,};},//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)getCirlPoint(x0, y0, r, angle) {let x1 = x0 + r * Math.cos(angle * Math.PI / 180)let y1 = y0 + r * Math.sin(angle * Math.PI / 180)return {x: x1,y: y1}}},mounted() {let _self = this;_self.$nextTick(() => {_self.initEcharts(_self.$refs['col-2-row-2'], _self.config, _self.col2row2)})}
}
</script>
<style lang="scss" scoped>
.col-2-row-2 {width: 400px;height: 300px;background-color: rgb(4, 36, 63);
}
</style>

因为Vue2 停止维护了嘛，所以我们要与时俱进。


Vue3 + Ts 版本：

需要注意：
this.dom.getContext is not a function
这个报错是指图表的实例对象只能通过document 获取，不可以用ref<'ElFormInstance>()
也就是27行和30行

“echarts”指 UMD 全局，但当前文件是模块。请考虑改为添加导入
这句说的是echarts应该通过全局引入的方式，可以通过npm安装echarts 解决，也可以在适当的位置全局引入echarts 脚本

<template><div class="p-2"><div ref="col2Row2" class="col-2-row-2"></div></div>
</template><script setup name="echarts" lang="ts">
import { getCurrentInstance, ref } from 'vue';// 数据列表
const config = reactive({list: [{name: "垃圾治理", id: "scene_type_2", value: 11},{name: "生活垃圾", id: "random_clap_type_3", value: 5},{name: "水域治理", id: "scene_type_5", value: 1},{name: "生活污水", id: "random_clap_type_2", value: 4},{name: "文明乡风", id: "random_clap_type_6", value: 10},{name: "农业废弃物", id: "random_clap_type_4", value: 2},{name: "农村厕所", id: "random_clap_type_1", value: 6},{name: "其他问题", id: "random_clap_type_7", value: 0},{name: "基础设施", id: "scene_type_3", value: 6},{name: "村容村貌", id: "scene_type_1", value: 19},{name: "蓝天守卫", id: "scene_type_4", value: 2},]
})
// 图表ref
const col2Row2 = ref<ElFormInstance>();onMounted(() => {initEcharts(document.querySelector('.col-2-row-2'), config, row2Config)
})// 初始化
const initEcharts = (dom: any, config: Object, fn: Function) => {let _self = this, angle = 0;let myChart = echarts.init(dom, undefined);setInterval(() => {angle = angle + 3let option = fn(_self, config, angle)myChart.setOption(option, true);// eslint-disable-next-line no-undef// tools.loopShowTooltip(myChart, option, {loopSeries: true});}, 120);
}// 配置
const row2Config = (vm:any, config = {list: []}, angle = 0) => {let data:any = [];//角度，用来做简单的动画效果的let { list = [{value: '', name: ''}] } = configlet _self = this;let img = 'data:image/png;base64,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'let color=['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000']let seriesOption = [{name: '',type: 'pie',clockWise: false,radius: ['33%', '38%'],y: '-25%',hoverAnimation: false,label: {show: true,position: 'outside',color: '#ddd',normal: {show: true,textStyle: {fontSize: 12,color: '#bbd0e8'}},},itemStyle: {normal: {labelLine: {length: 20,length2: 40,show: true,color: '#00ffff',},// 数据 百分比label: {formatter: function (params:any) {let percent:number = 0;let total:number = 0;for (let i = 0; i < list.length; i++) {total += +(list[i].value);}percent = +((params.value / total) * 100).toFixed(0);if (params.name !== '') {return params.name + '：' + percent + '%';} else {return '';}},}},},data: data,},// 外线{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.65,r: Math.min(api.getWidth(), api.getHeight()) / 3.3,startAngle: ((0 + angle) * Math.PI) / 180,endAngle: ((90 + angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},// 外点{name: 'ring5', //紫点type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;let point = getCirlPoint(x0, y0, r, 90 + angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //绿fill: '#00FEFF',},silent: true,};},data: [0],},// 外线{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.68,r: Math.min(api.getWidth(), api.getHeight()) / 3.3,startAngle: ((180 + angle) * Math.PI) / 180,endAngle: ((270 + angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},// 蓝色 -- 外点{name: 'ring5', type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;let point = getCirlPoint(x0, y0, r, 180 + angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //绿fill: '#00FEFF',},silent: true,};},data: [0],},{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.68,r: Math.min(api.getWidth(), api.getHeight()) / 3.8,startAngle: ((270 + -angle) * Math.PI) / 180,endAngle: ((40 + -angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},// 橘色{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2.68,r: Math.min(api.getWidth(), api.getHeight()) / 3.8,startAngle: ((90 + -angle) * Math.PI) / 180,endAngle: ((220 + -angle) * Math.PI) / 180,},style: {stroke: '#00FEFF',fill: 'transparent',lineWidth: 1.5,},silent: true,};},data: [0],},{name: 'ring5',type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;let point = getCirlPoint(x0, y0, r, 90 + -angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //粉fill: '#00FEFF',},silent: true,};},data: [0],},{name: 'ring5', //绿点type: 'custom',coordinateSystem: 'none',renderItem: function (params:any, api:any) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2.68;let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;let point = getCirlPoint(x0, y0, r, 270 + -angle);return {type: 'circle',shape: {cx: point.x,cy: point.y,r: 4,},style: {stroke: '#00FEFF', //绿fill: '#00FEFF',},silent: true,};},data: [0],},];for (let i = 0; i < list.length; i++) {data.push({value: list[i].value,name: list[i].name,itemStyle: {normal: {borderWidth: 5,shadowBlur: 20,borderColor: color[i],shadowColor: color[i],},},},{value: 2,name: '',itemStyle: {label: {show: false,},normal: {labelLine: {show: false,},color: 'rgba(0, 0, 0, 0)',borderColor: 'rgba(0, 0, 0, 0)',borderWidth: 0,},},})}return {color,title: {text: '问题类型',textAlign: 'center',left: '49%',top: '34%',textStyle: {fontWeight: 'normal',fontSize: 14,color: '#bbd0e8',textAlign: 'center',},},// 内环graphic: {elements: [{type: 'image',z: 3,style: {image: img,width: 80,height: 80,},left: 'center',top: '25%',position: [100, 100],},],},tooltip: {show: false,},legend: {icon: 'circle',orient: 'horizontal',y: '76%',data: list.map(i => i.name),align: 'left',textStyle: {fontSize: 12,color: '#bbd0e8',},itemGap: 5,},toolbox: {show: false,},series: seriesOption,};
}//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
const getCirlPoint = (x0:number, y0:number, r:number, angle:number) => {let x1 = x0 + r * Math.cos(angle * Math.PI / 180)let y1 = y0 + r * Math.sin(angle * Math.PI / 180)return {x: x1,y: y1}
}</script>
<style lang="scss" scoped>
.col-2-row-2 {width: 400px;height: 300px;background-color: rgb(4, 36, 63);
}
</style>

到底了！原创不易，转载请注明出处。
请添加图片描述

  前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获

推荐阅读：

Vue自定义轮播
Vue动态换肤
css圣诞树 立体模型
vue Tips 轻提示
vue系列自定义加载页
CSS手绘图形

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

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

相关文章

力扣题目训练（1）

力扣题目训练（1）

2024年1月25日力扣题目训练 2024年1月25日力扣题目训练225. 用队列实现栈257. 二叉树的所有路径258. 各位相加81. 搜索旋转排序数组 II82. 删除排序链表中的重复元素 II30. 串联所有单词的子串 2024年1月25日力扣题目训练 2024年1月25日开始进行编程训练&#xff0c;今天主要是…
阅读更多...
网安渗透攻击作业（1）

网安渗透攻击作业（1）

实现负载均衡 第一步&#xff1a;安装依赖 sudo apt insta11 libgd-dev 第二步&#xff1a;下载nginx wget http://nginx.org/download/nginx-1.22.1.tar.gz 第三步&#xff1a;对nginx进行解压 tar -zvxf nginx-1.22.1.tar.g2 第四步&#xff1a;编译安装nginx cd ngi…
阅读更多...
通达信动量振荡指标公式(AO)，反映市场驱动力的变化

通达信动量振荡指标公式(AO)，反映市场驱动力的变化

动量振荡指标AO(Awesome Oscillator)衡量的是最近5根K线的动量与过去34根K线的动量对比&#xff0c;反映市场驱动力的变化。 一、动量振荡指标公式&#xff08;副图&#xff09; 动量振荡指标AO计算公式&#xff1a; 1、计算中间价&#xff0c;将最高价和最低价的和除以2&…
阅读更多...
浅析HTTP协议

浅析HTTP协议

首先&#xff0c;前端请求后端数据&#xff0c;后端响应数据给前端&#xff0c;这是我们大家都知道的&#xff0c;那其中所涉及到的数据传输协议又是什么呢&#xff1f;这个传输规范就是我们大名鼎鼎的HTTP协议&#xff01; 什么是HTTP协议&#xff1f; HTTP&#xff08;超文本…
阅读更多...
SqlAlchemy使用教程(六) -- ORM 表间关系的定义与CRUD操作

SqlAlchemy使用教程(六) -- ORM 表间关系的定义与CRUD操作

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(二) 入门示例及编程步骤SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解SqlAlchemy使用教程(四) MetaData 与 SQL Express Language 的使用SqlAlchemy使用教程(五) ORM API 编程入门 本章内容&#xff0c;稍微有…
阅读更多...
Java链表（1）

Java链表（1）

&#x1f435;本篇文章将对单链表进行讲解&#xff0c;模拟实现单链表中常见的方法 一、什么是链表 链表是一种逻辑结构上连续而物理结构上不一定连续的线性表&#xff0c;链表由一个一个节点组成&#xff1a; 每一个节点中都由数据域&#xff08;val&#xff09;和指针域&…
阅读更多...
实战EDA电子设计自动化经典入门模型VHDL代码编写（含代码解释）上篇--状态机，逻辑设计：Y=AB+C

实战EDA电子设计自动化经典入门模型VHDL代码编写（含代码解释）上篇--状态机，逻辑设计：Y=AB+C

前言 电子设计自动化&#xff08;EDA&#xff09;&#xff1a; 定义&#xff1a;EDA是用于设计和开发复杂的电子系统&#xff08;如集成电路&#xff09;和印刷电路板的软件工具集合。这些工具通常用于设计电路、进行仿真测试、分析电路行为以及协助制造过程。应用&#xff1a;…
阅读更多...
机器人学论文——智能施药机器人调研报告

机器人学论文——智能施药机器人调研报告

目录 摘 要 Abstract 第一章&#xff1a;引言 1.1研究背景 1.2 研究意义 1.3文章架构 第二章&#xff1a;智能施药机器人发展现状 2.1引言 2.2 大田智能施药机器人发展现状 2.3 果园智能施药机器人发展现状 2.4 设施农业智能施药机器人发展现状 第三章&#xff1a;智能施药机器…
阅读更多...
docker指令存档

docker指令存档

目录 Docker 1、概念 2、架构图 3、安装 4、Docker怎么工作的&#xff1f; 5、Docker常用命令 帮助命令 镜像命令 1、查看镜像 2、帮助命令 3、搜索镜像 4、拉取镜像 5、删除镜像 容器命令 1、启动 2、查看运行的容器 3、删除容器 4、启动&停止 其他命令…
阅读更多...
大数据数据流分析和处理的工具pig,从入门到精通！

大数据数据流分析和处理的工具pig,从入门到精通！

介绍&#xff1a;Pig是一种数据流语言和运行环境&#xff0c;用于处理和分析大数据。 Pig由两个主要部分构成&#xff1a; Pig Latin语言&#xff1a;这是一种用于描述数据流的高级语言&#xff0c;它允许用户以较为简洁的方式编写数据处理和转换任务。 Pig执行环境&#xff1a…
阅读更多...
C++ 模拟实现mapset

C++ 模拟实现mapset

目录 一、改造红黑树 1、模板T改造节点 2、提取节点中的key 3、迭代器类 operator operator-- 4、改造insert 5、红黑树迭代器 6、 普通迭代器构造const迭代器 二、set 三、map 在stl中map和set的结构中&#xff0c;他们都使用一个红黑树进行封装。 由上图可知&a…
阅读更多...
Java 枚举和注解

Java 枚举和注解

一、枚举类 把具体的对象一个一个例举出来的类就称为枚举类 枚举对应英文(enumeration, 简写 enum)枚举是一组常量的集合。可以这里理解&#xff1a;枚举属于一种特殊的类&#xff0c;里面只包含一组有限的特定的对象。 1.实现方式1——自定义类实现枚举 public class Enume…
阅读更多...
Oracal学习

Oracal学习

Oracle是什么 是甲骨文公司的一款支持事务且吞吐量高的数据库特点&#xff1a; &#xff08;1&#xff09;支持多用户、大事务量的事务处理 &#xff08;2&#xff09;数据安全性和完整性控制 &#xff08;3&#xff09;支持分布式数据处理 &#xff08;4&#xff09;可移植性…
阅读更多...
【C++】C++入门基础讲解（一）

【C++】C++入门基础讲解（一）

&#x1f497;个人主页&#x1f497; ⭐个人专栏——C学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 导读 经过一段时间的C语言学习&#xff0c;我们以及基本掌握了C语言的知识&#xff0c;今天&#xff0c;我们就开始学习C&#xff0c;…
阅读更多...
2024最新幻兽帕鲁服务器多少钱一个？

2024最新幻兽帕鲁服务器多少钱一个？

幻兽帕鲁服务器多少钱&#xff1f;价格便宜&#xff0c;阿里云4核16G幻兽帕鲁专属服务器32元1个月、66元3个月&#xff0c;4核32G配置113元1个月、339元3个月&#xff1b;腾讯云4核16G14M服务器66元1个月、277元3个月、1584元一年。阿腾云atengyun.com分享阿里云和腾讯云palwor…
阅读更多...
SpringBoot的自动装配原理

SpringBoot的自动装配原理

一、SpringBootConfiguration注解的作用 SpringBootApplication注解是SpringBoot项目的核心注解,加在启动引导类上。点击进去可以发现SpringBootApplication注解是一个组合注解。其中SpringBootConfiguration和EnableAutoConfiguration是由Spring提供的,剩下的注解是由JDK提供的…
阅读更多...
简单计算与模拟1：鸡兔同笼（POJ 3237）

简单计算与模拟1：鸡兔同笼（POJ 3237）

1 问题描述 图1 问题描述 2 解题思路 鸡有两只脚&#xff0c;兔子有四只脚&#xff0c;且输入数据可能为奇数&#xff0c;使用公式计算即可。 3 设计代码 #include <cstdio> int main() {int nCases, nFeets;while (scanf("%d", &nCases) ! EOF){for (in…
阅读更多...
负载均衡-Ribbon-自定义负载均衡算法

负载均衡-Ribbon-自定义负载均衡算法

1.Ribbon 是什么 SpringCloud Ribbon 是基于 Netflix Ribbon 实现的一套客户端负载均衡的工具主要功能是提供客户端的软件负载均衡算法&#xff0c;将 Netflix 的中间服务处连接在一起Ribbon的客户端组件提供一系列完整的配置项&#xff0c;如&#xff1a;连接超时、重试等。简…
阅读更多...
echarts 绘制垂直滚动热力图

echarts 绘制垂直滚动热力图

问题1&#xff1a;提示功能无效 问题2&#xff1a;值筛选无效 效果 在线浏览 下载echarts官网例子(heatmap Examples - Apache ECharts) 稍作改动&#xff1a; generateData 入参改为长度和宽度noise.perlin2(i / 40, j / 20) Math.random() * 5y轴倒置指定zlevel为2 通过定…
阅读更多...
蓝桥杯备战——7.DS18B20温度传感器

蓝桥杯备战——7.DS18B20温度传感器

1.分析原理图 通过上图我们可以看到DS18B20通过单总线接到了单片机的P14上。 2.查阅DS18B20使用手册 比赛的时候是会提供DS18B20单总线通讯协议的代码&#xff0c;但是没有提供读取温度数据的代码&#xff0c;所以还是需要我们去查看手册&#xff0c;我只把重要部分截下来了 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023