ECharts配置个性化图表：圆环、立体柱状图

2024-01-04 20:20
文章标签 配置 图表 个性化 echarts 柱状图 立体 圆环

本文主要是介绍ECharts配置个性化图表：圆环、立体柱状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ECharts配置个性化图表：圆环、立体柱状图

        • 圆环图
        • 双纵轴多数据面积图
        • 折柱混合图
        • 3D立体圆环饼图
        • 3D立体饼图
        • 参考文章

官网调试地址：点击跳转调试

圆环图

效果图：
在这里插入图片描述
配置：

option = {color: ['#29BEFF', '#A2DC00', '#FFC400', '#FF7F5C', '#CA99FC'],// 提示窗tooltip: {trigger: 'item',show: false},// 图例legend: {top: '5%',left: 'center',show: false},// 数据series: [{name: 'Access From',type: 'pie',radius: ['35%', '60%'], //可以设置圆环的宽度avoidLabelOverlap: false,itemStyle: {borderColor: '#fff',borderWidth: 2},label: {show: true,formatter: '{d}%',position: 'outside',fontSize: 11,color: '#999'},emphasis: {label: {show: false,formatter: ['{a|{b}}', '{b|{c}}'].join('\n'),rich: {a: {fontFamily: 'PingFangSC-Regular',fontSize: 11,color: '#999',textAlign: 'center',lineHeight: 20,fontWeight: 400},b: {fontFamily: 'PingFangSC-Medium',fontSize: 20,color: '#333',letterSpacing: 0,textAlign: 'center',lineHeight: 30,fontWeight: 500},x: {fontSize: 18,fontFamily: 'Microsoft YaHei',borderColor: '#449933',borderRadius: 4}}}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},{name: '外边框',type: 'pie',clockWise: false,radius: ['32%', '32%'], //边框大小center: ['50%', '50%'], //边框位置data: [{value: 10,itemStyle: {normal: {borderWidth: 8, //设置边框粗细borderColor: '#eee' //边框颜色}}}]},{//显示中间的数据name: 'Access From',type: 'pie',radius: ['35%', '60%'], //可以设置圆环的宽度avoidLabelOverlap: false,itemStyle: {borderColor: '#fff',borderWidth: 2},label: {show: false,formatter: '{d}%',position: 'center',fontSize: 11,color: '#999'},emphasis: {label: {show: true,formatter: ['{a|{b}}', '{b|{c}}'].join('\n'),rich: {a: {fontFamily: 'PingFangSC-Regular',fontSize: 11,color: '#999',textAlign: 'center',lineHeight: 20,fontWeight: 400},b: {fontFamily: 'PingFangSC-Medium',fontSize: 20,color: '#333',letterSpacing: 0,textAlign: 'center',lineHeight: 30,fontWeight: 500},x: {fontSize: 18,fontFamily: 'Microsoft YaHei',borderColor: '#449933',borderRadius: 4}}}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
};
双纵轴多数据面积图

效果图：
在这里插入图片描述
代码：

option = {// 提示窗tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['发电量', '供电气耗']},xAxis: {type: 'category',axisTick: {show: false //x轴刻度尺},axisLine: {show: false, //x轴刻度尺//x轴线条颜色lineStyle: {color: '#999'}},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: [{type: 'value',name: '万kwh',position: 'left',splitLine: {lineStyle: {color: '#EFEFEF' //网格线颜色}},axisLine: {show: false //y轴线条}},{type: 'value',name: 'Nm3/kwh',position: 'right',splitLine: {lineStyle: {color: '#EFEFEF' //网格线颜色}},axisLine: {show: false //y轴线条}}],series: [{type: 'line',name: '发电量',data: [820, 932, 901, 934, 524, 754, 142],smooth: true, //面积图改成弧形状lineStyle: {width: 1, //外边线宽度color: '#377AFA' //外边线颜色},showSymbol: false, //去除面积图节点圆areaStyle: {//区域填充渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(91,143,249,0.20)' // 0% 处的颜色},{offset: 1,color: 'rgba(91,143,249,0.00)' // 100% 处的颜色}],global: false // 缺省为 false}}},{name: '供电气耗',type: 'line',yAxisIndex: 1,data: [154, 565, 756, 934, 248, 788, 1320],smooth: true, //面积图改成弧形状lineStyle: {width: 1, //外边线宽度color: '#35C724' //外边线颜色},showSymbol: false, //去除面积图节点圆areaStyle: {//区域填充渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(221,243,215, 0.5)' // 0% 处的颜色},{offset: 1,color: 'rgba(250,252,252, 1)' // 100% 处的颜色}],global: false // 缺省为 false}}}]
};
折柱混合图

效果图：
在这里插入图片描述
代码：

option = {color: ['#2078F7 ', '#04C591 ', '#FFB202 '],tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {left: 'right',data: ['计划电量', '实际电量', '出清电价']},xAxis: [{type: 'category',axisTick: {show: false //x轴刻度尺},axisLine: {show: false, //x轴刻度尺//x轴线条颜色lineStyle: {color: '#999'}},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: 'MW',axisLabel: {formatter: '{value}'},splitLine: {lineStyle: {color: '#EFEFEF' //网格线颜色}},axisLine: {show: false //y轴线条}},{type: 'value',name: '元',axisLabel: {formatter: '{value}'},splitLine: {show: false,lineStyle: {color: '#EFEFEF' //网格线颜色}},axisLine: {show: false //y轴线条}}],series: [{name: '计划电量',type: 'bar',barWidth: 8, // 设置柱状图的宽度itemStyle: {borderRadius: [5, 5, 5, 5] // 分别表示左上、右上、右下、左下四个角的半径大小},tooltip: {valueFormatter: function (value) {return value + ' ml';}},data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name: '实际电量',type: 'bar',barWidth: 8, // 设置柱状图的宽度itemStyle: {borderRadius: [5, 5, 5, 5] // 分别表示左上、右上、右下、左下四个角的半径大小},tooltip: {valueFormatter: function (value) {return value + ' ml';}},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: '出清电价',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + ' °C';}},data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]
};
3D立体圆环饼图

效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.8/echarts-gl.js"></script>
</head><body><div id="echarts-bt" style="width: 375px; height: 300px;"></div>
</body><script>init();//3D饼图 - 1function init() {//初始化，根据自己项目进行初始化var chartDom = document.getElementById('echarts-bt');var myChart = echarts.init(chartDom);let boxHeightlet legendData = [];let legendBfb = [];function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {// 计算let midRatio = (startRatio + endRatio) / 2;let startRadian = startRatio * Math.PI * 2;let endRadian = endRatio * Math.PI * 2;let midRadian = midRatio * Math.PI * 2;// 如果只有一个扇形，则不实现选中效果。if (startRatio === 0 && endRatio === 1) {isSelected = false;}// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）k = typeof k !== 'undefined' ? k : 1 / 3;// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 计算高亮效果的放大比例（未高亮，则比例为 1）let hoverRate = isHovered ? 1.05 : 1;// 返回曲面参数方程return {u: {min: -Math.PI,max: Math.PI * 3,step: Math.PI / 32},v: {min: 0,max: Math.PI * 2,step: Math.PI / 20},x: function (u, v) {if (u < startRadian) {return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;},y: function (u, v) {if (u < startRadian) {return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;},z: function (u, v) {if (u < -Math.PI * 0.5) {return Math.sin(u);}if (u > Math.PI * 2.5) {return Math.sin(u) * h * .1;}return Math.sin(v) > 0 ? 1 * h * .1 : -1;}};}// 生成模拟 3D 饼图的配置项function getPie3D(pieData, internalDiameterRatio) {//internalDiameterRatio:透明的空心占比let series = [];let sumValue = 0;let startValue = 0;let endValue = 0;let k = 1 - internalDiameterRatio;pieData.sort((a, b) => {return (b.value - a.value);});// 为每一个饼图数据，生成一个 series-surface 配置for (let i = 0; i < pieData.length; i++) {sumValue += pieData[i].value;let seriesItem = {name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,type: 'surface',parametric: true,wireframe: {show: false},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k: k},center: ['10%', '50%'],};if (typeof pieData[i].itemStyle != 'undefined') {let itemStyle = {};typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;seriesItem.itemStyle = itemStyle;}series.push(seriesItem);}// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。legendData = [];legendBfb = [];for (let i = 0; i < series.length; i++) {endValue = startValue + series[i].pieData.value;series[i].pieData.startRatio = startValue / sumValue;series[i].pieData.endRatio = endValue / sumValue;series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,series[i].pieData.value    // 控制各模块高度一致100   控制各模块高度根据value改变 );startValue = endValue;const bfb = fomatFloat(series[i].pieData.value / sumValue, 4)legendData.push({name: series[i].name,value: bfb});legendBfb.push({name: series[i].name,value: bfb});}boxHeight = getHeight3D(series, 26);//通过传参设定3d饼/环的高度，26代表26pxreturn series}function fomatFloat(num, n) {var f = parseFloat(num);if (isNaN(f)) {return false;}f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n);var s = f.toString();var rs = s.indexOf('.');//判定如果是整数，增加小数点再补0if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + n) {s += '0';}return s;}//获取3d饼图的最高扇区的高度function getHeight3D(series, height) {series.sort((a, b) => {return (b.pieData.value - a.pieData.value);})return height * 25 / series[0].pieData.value;}let optionData = [{name: '一般违章',value: 15,itemStyle: {color: '#42ABFD',}}, {name: '较严重违章',value: 27,itemStyle: {color: '#FFC96B'}}, {name: '严重违章',value: 15,itemStyle: {color: '#FF90A1'}}]const series = getPie3D(optionData, 0.59);//重新绘一个2D的饼图显示连接线及数据series.push({name: 'pie2d',type: 'pie',label: {opacity: 1,fontSize: 13,lineHeight: 20,},labelLine: {length: 10,length2: 20},startAngle: -20, //起始角度，支持范围[0, 360]。clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式radius: ['10%', '52%'],data: optionData,itemStyle: {opacity: 0}});optionData.forEach((item, index) => {item.label = {color: '#333',show: true,formatter: '{b|{b}{c} \n}{c|{d}%}',rich: {b: {fontSize: 11,lineHeight: 16},c: {fontSize: 11,},},};})// 准备待返回的配置项，把准备好的 legendData、series 传入。let option = {backgroundColor: '#fff',legend: {data: legendData,bottom: 0,itemWidth: 6,textStyle: {color: '#333',},show: true,icon: "circle",},xAxis3D: {min: -1,max: 1},yAxis3D: {min: -1,max: 1},zAxis3D: {min: -1,max: 1},grid3D: {show: false,boxHeight: boxHeight, //圆环的高度viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置alpha: 40, //角度distance: 240,//调整视角到主体的距离，类似调整zoomrotateSensitivity: 0, //设置为0无法旋转zoomSensitivity: 0, //设置为0无法缩放panSensitivity: 0, //设置为0无法平移autoRotate: false //自动旋转}},series: series};myChart.setOption(option, true);}
</script></html>
3D立体饼图

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.8/echarts-gl.js"></script>
</head><body><div id="echarts-bt" style="width: 375px; height: 300px;"></div>
</body><script>let optionData = [{name: '一般违章',value: 15,itemStyle: {color: '#42ABFD',}}, {name: '较严重违章',value: 27,itemStyle: {color: '#FFC96B'}}, {name: '严重违章',value: 15,itemStyle: {color: '#FF90A1'}}]mastery(optionData);//3D饼图 - 1function mastery(data) {var myChart = echarts.init(document.getElementById('echarts-bt'));var color = ["#42ABFD", "#FFC96B", "#FF90A1"]var data = datadata.forEach((item, index) => {item.itemStyle = {color: color[index],opacity: 1,}})function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {// 计算let midRatio = (startRatio + endRatio) / 2;let startRadian = startRatio * Math.PI * 2;let endRadian = endRatio * Math.PI * 2;let midRadian = midRatio * Math.PI * 2;// 如果只有一个扇形，则不实现选中效果。if (startRatio === 0 && endRatio === 1) {isSelected = false;}// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）k = 1// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 计算高亮效果的放大比例（未高亮，则比例为 1）let hoverRate = isHovered ? 1.05 : 1;// 返回曲面参数方程return {u: {min: -Math.PI,max: Math.PI * 3,step: Math.PI / 32,},v: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},x: function (u, v) {if (u < startRadian) {return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;},y: function (u, v) {if (u < startRadian) {return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;},z: function (u, v) {if (u < -Math.PI * 0.5) {return Math.sin(u);}if (u > Math.PI * 2.5) {return Math.sin(u) * h * 0.1;}return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;},};}function getPie3D(pieData, internalDiameterRatio) {let series = [];let sumValue = 0;let startValue = 0;let endValue = 0;let legendData = [];let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 +internalDiameterRatio) : 1 /3;// 为每一个饼图数据，生成一个 series-surface 配置for (let i = 0; i < pieData.length; i++) {sumValue += pieData[i].value;let seriesItem = {name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,value: typeof pieData[i].value === 'undefined' ? `series${i}` : pieData[i].value,type: 'surface',parametric: true,wireframe: {show: false,},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k: k,},};if (typeof pieData[i].itemStyle != 'undefined') {let itemStyle = {};typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) :null;typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;seriesItem.itemStyle = itemStyle;}series.push(seriesItem);}// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。for (let i = 0; i < series.length; i++) {endValue = startValue + series[i].pieData.value;series[i].pieData.startRatio = startValue / sumValue;series[i].pieData.endRatio = endValue / sumValue;series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,series[i].pieData.value);startValue = endValue;legendData.push(series[i].name);}// 补充一个透明的圆环，用于支撑高亮功能的近似实现。series.push({name: 'mouseoutSeries',type: 'surface',parametric: true,wireframe: {show: false,},itemStyle: {opacity: 0,},parametricEquation: {u: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},v: {min: 0,max: Math.PI,step: Math.PI / 20,},x: function (u, v) {return Math.sin(v) * Math.sin(u) + Math.sin(u);},y: function (u, v) {return Math.sin(v) * Math.cos(u) + Math.cos(u);},z: function (u, v) {return Math.cos(v) > 0 ? 0.1 : -0.1;},},}, {name: 'pie2d',type: 'pie',labelLine: {length: 20,length2: 30,},startAngle: -30, //起始角度，支持范围[0, 360]。clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式radius: ['40%', '40%'],center: ['50%', '50%'], //指示线的位置data: data,itemStyle: {opacity: 0,},});// 准备待返回的配置项，把准备好的 legendData、series 传入。let option = {label: {color: '#333',show: true,formatter: '{b|{b}{c} \n}{c|{d}%}',rich: {b: {fontSize: 11,lineHeight: 16},c: {fontSize: 11,},},},xAxis3D: {min: -1,max: 1,},yAxis3D: {min: -1,max: 1,},zAxis3D: {min: -1,max: 1,},grid3D: {show: false,boxHeight: 30,viewControl: {//3d效果可以放大、旋转等，请自己去查看官方配置alpha: 40,beta: 40,distance: 500,rotateSensitivity: 0,zoomSensitivity: 0,panSensitivity: 0,autoRotate: false,}},series: series,};return option;}option = getPie3D(data, 0.71);if (option && typeof option === 'object') {myChart.setOption(option)}}
</script></html>
参考文章
  1. echarts 立体图
  2. 记录下echarts立体柱形图实现的几种方式
  3. echarts-3D立体饼图（1）
  4. echarts 实现圆柱体柱形图效果
  5. 【ECharts】环形图、饼状图
  6. echarts面积图颜色渐变的实现
  7. echarts怎么设置双纵坐标并且可以缩放，自适应浏览器
  8. echarts-3D立体饼图（2）
  9. echarts3d饼图，环形图（包含透明效果）
  10. echarts 实现3D饼图
  11. Echarts 3D饼图开发

这篇关于ECharts配置个性化图表：圆环、立体柱状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/570487。

相关文章

Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
wolfSSL参数设置或配置项解释

wolfSSL参数设置或配置项解释

1. wolfCrypt Only 解释：wolfCrypt是一个开源的、轻量级的、可移植的加密库，支持多种加密算法和协议。选择“wolfCrypt Only”意味着系统或应用将仅使用wolfCrypt库进行加密操作，而不依赖其他加密库。 2. DTLS Support 解释：DTLS（Datagram Transport Layer Security）是一种基于UDP的安全协议，提供类似于
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

目录 1.  RISC-V简介 2.  CPU架构现状 3.  MounRiver Studio软件下载 4.  MounRiver Studio软件安装 5.  MounRiver Studio软件介绍 6.  创建工程 7.  编译代码 1.  RISC-V简介         RISC就是精简指令集计算机（Reduced Instruction SetCom
阅读更多...
log4j2相关配置说明以及${sys:catalina.home}应用

log4j2相关配置说明以及${sys:catalina.home}应用

${sys:catalina.home} 等价于 System.getProperty("catalina.home") 就是Tomcat的根目录：  C:\apache-tomcat-7.0.77 <PatternLayout pattern="%d{yyyy-MM-dd HH:mm:ss} [%t] %-5p %c{1}:%L - %msg%n" /> 2017-08-10
阅读更多...
DM8数据库安装后配置

DM8数据库安装后配置

1 前言 在上篇文章中，我们已经成功将库装好。在安装完成后，为了能够更好地满足应用需求和保障系统的安全稳定运行，通常需要进行一些基本的配置。下面是一些常见的配置项： 数据库服务注册：默认包含14个功能模块，将这些模块注册成服务后，可以更好的启动和管理这些功能；基本的实例参数配置：契合应用场景和发挥系统的最大性能；备份：有备无患；… 2 注册实例服务 注册了实例服务后，可以使用系统服务管理，
阅读更多...
配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络

配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络

配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络 服务器端配置 在服务器端，你需要确保安装了必要的驱动程序和软件包，并且正确配置了网络接口。 安装 OFED 首先，安装 Open Fabrics Enterprise Distribution (OFED)，它包含了 InfiniBand 所需的驱动程序和库。 sudo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2