Echarts-丝带图

Echarts-丝带图

demo地址

打开CodePen

什么是丝带图？

丝带图是Power BI中独有额可视化视觉对象，它的工具提示能展示指标当期与下期的数据以及排名。需求：使用丝带图展示"2022年点播订单表"不同月份不同点播套餐对应订单数据。

效果

在这里插入图片描述

思路

由于丝带图是Power BI中独有额可视化视觉对象，所以目前没得任何示例参考，所以只能自己构思使用echarts还原了。当然还有完善的余地，中间的连线不够平滑，可根据产品需求采用某种曲线函数去生成一组点位。

1. 以散点图画出柱状堆叠效果（柱状图的堆叠图无法满足hover小块效果）- y轴分成100个刻度，每个刻度代表1%，以控制大数据视图效果
2. 在柱状图两根柱之间构建6个点，使用面积图，连接2块柱- 柱中间点位取的是y轴的平均值- （若想构建的曲线细腻，可以使用曲线函数来构建这部分的点）
3. 再使用上面6个点中的下面点绘制透明区域

核心代码

  • 以散点图构建柱状图
function createOption(initData) {const initDataResult = createData(initData);const { list, legendData, xAxisData, seriesDataMap, max } = initDataResult;const seriesData = [];for (const seriesIndex in Object.keys(seriesDataMap)) {const name = Object.keys(seriesDataMap)[seriesIndex];const data = seriesDataMap[name];seriesData.push({name,type: 'scatter',symbol: 'rect',z: 3,itemStyle: {opacity: 1},label: {show: true,color: '#fff',formatter: (params) => formatMoney(params.data.realValue, 0)},tooltip: {trigger: 'item',formatter: (params) => {return `<div><div>年度月份：${params.name}</div><div>${params.seriesName}：${formatMoney(params.data.realValue, 0)}</div></div>`;}},data: getChartData({ data, name })});}function getChartData({ data = [], name }) {const dataResult = [];data?.forEach((value, dateIndex) => {const y = maxY * (value / max);const ySize = maxHeight * (y / maxY);const offset = getOffset({ list, dateIndex, name, max });const radioValue = y + offset > 100 ? 100 : y + offset;dataResult.push({name,value: radioValue,radioValue,realValue: value,symbolOffset: [0, '50%'],symbolSize: [50, ySize]});if (dateIndex < data?.length - 1) {new Array(3).fill(0).forEach((_, lineIndex) => {dataResult.push({value: '',radioValue,realValue: value,isLine: true,lineIndex});});}});return dataResult;}const lineSeries = createLineChart({ seriesData, initDataResult });return {option: {legend: {data: legendData},xAxis: {data: xAxisData,axisTick: {show: false}},series: [...seriesData, ...lineSeries]}};
}
  • 生成折线图数据
function getLineData(data, name, isSpace = false) {const result = data?.map((_, index) => {const dateIndex = Math.floor(index / 4);const lineIndex = index % 4;const item = data?.[index] || {};const lastItem = data?.[index - (4 - lineIndex)] || {};const nextItem = data?.[index + (4 - lineIndex)] || {};const offset = getOffset({ list, dateIndex, name, max });const nextOffset = getOffset({ list, dateIndex: dateIndex + 1, name, max });let spaceValue;let value = item.radioValue - offset;switch (lineIndex) {case 0:spaceValue = offset;break;case 1:spaceValue = offset;if (!nextItem?.radioValue) {value = undefined;}break;case 2:spaceValue = (nextOffset + offset) / 2;value = (nextItem.radioValue + item.radioValue) / 2 - spaceValue;break;case 3:spaceValue = nextOffset;value = nextItem.radioValue - nextOffset;if (!lastItem?.radioValue) {value = undefined;}break;}if (!lastItem?.radioValue && !nextItem?.radioValue) {value = undefined;}// console.log(lineIndex, item, offset, nextOffset, spaceValue, value);const newItem = {...item,value: isSpace ? spaceValue : value};return newItem;});// console.log('result', result);return result;
}
  • 生成折线图配置
function createLineChart({ seriesData = [], initDataResult }) {const { list, max } = initDataResult;const spaceLineSeries = [];const lineSeries = [];// console.log('seriesData', seriesData);for (const seriesIndex in seriesData) {const seriesItem = seriesData[seriesIndex];const defaultLineSeries = {type: 'line',name: seriesItem.name,stack: `Line-${seriesIndex}`,smooth: 0.3,lineStyle: {width: 0,opacity: 0},symbol: 'none',showSymbol: false,triggerLineEvent: true,silent: true,areaStyle: {},emphasis: {focus: 'series'}};spaceLineSeries.push({...defaultLineSeries,areaStyle: {opacity: 0},data: getLineData(seriesItem?.data, seriesItem.name, true)});lineSeries.push({...defaultLineSeries,data: getLineData(seriesItem?.data, seriesItem.name)});}function getLineData(data, name, isSpace = false) {const result = data?.map((_, index) => {const dateIndex = Math.floor(index / 4);const lineIndex = index % 4;const item = data?.[index] || {};const lastItem = data?.[index - (4 - lineIndex)] || {};const nextItem = data?.[index + (4 - lineIndex)] || {};const offset = getOffset({ list, dateIndex, name, max });const nextOffset = getOffset({ list, dateIndex: dateIndex + 1, name, max });let spaceValue;let value = item.radioValue - offset;switch (lineIndex) {case 0:spaceValue = offset;break;case 1:spaceValue = offset;if (!nextItem?.radioValue) {value = undefined;}break;case 2:spaceValue = (nextOffset + offset) / 2;value = (nextItem.radioValue + item.radioValue) / 2 - spaceValue;break;case 3:spaceValue = nextOffset;value = nextItem.radioValue - nextOffset;if (!lastItem?.radioValue) {value = undefined;}break;}if (!lastItem?.radioValue && !nextItem?.radioValue) {value = undefined;}// console.log(lineIndex, item, offset, nextOffset, spaceValue, value);const newItem = {...item,value: isSpace ? spaceValue : value};return newItem;});// console.log('result', result);return result;}return [...spaceLineSeries, ...lineSeries];
}

完整代码

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false
});
var app = {};var option;const defaultData = [{date: '2022年02月',list: [{name: '安列克-常州四药',value: 48196},{name: '贝克宁-成都贝特',value: 85944},{name: '瀚宝-深圳瀚宇',value: 43122},{name: '卡贝缩宫素-杭州澳亚',value: 46082},{name: '卡贝缩宫素-天吉生物',value: 28473},{name: '卡贝缩宫素-星银药业',value: 20584}]},{date: '2022年03月',list: [{name: '安列克-常州四药',value: 97775},{name: '贝克宁-成都贝特',value: 134262},{name: '瀚宝-深圳瀚宇',value: 102538},{name: '卡贝缩宫素-杭州澳亚',value: 77479},{name: '卡贝缩宫素-天吉生物',value: 59422},{name: '卡贝缩宫素-星银药业',value: 32413}]},{date: '2022年04月',list: [{name: '安列克-常州四药',value: 91399},{name: '贝克宁-成都贝特',value: 151064},{name: '瀚宝-深圳瀚宇',value: 74733},{name: '卡贝缩宫素-杭州澳亚',value: 75197},{name: '卡贝缩宫素-天吉生物',value: 46853},{name: '卡贝缩宫素-星银药业',value: 24845}]},{date: '2022年05月',list: [{name: '安列克-常州四药',value: 83667},{name: '贝克宁-成都贝特',value: 114716},{name: '瀚宝-深圳瀚宇',value: 57327},{name: '卡贝缩宫素-杭州澳亚',value: 62267},{name: '卡贝缩宫素-天吉生物',value: 38604},{name: '卡贝缩宫素-星银药业',value: 19766}]},{date: '2022年06月',list: [{name: '安列克-常州四药',value: 80524},{name: '贝克宁-成都贝特',value: 155227},{name: '瀚宝-深圳瀚宇',value: 67098},{name: '卡贝缩宫素-杭州澳亚',value: 61857},{name: '卡贝缩宫素-天吉生物',value: 44098},{name: '卡贝缩宫素-星银药业',value: 26956}]},{date: '2022年07月',list: [{name: '安列克-常州四药',value: 92172},{name: '贝克宁-成都贝特',value: 118129},{name: '瀚宝-深圳瀚宇',value: 61548},{name: '卡贝缩宫素-杭州澳亚',value: 64490},{name: '卡贝缩宫素-天吉生物',value: 38073},{name: '卡贝缩宫素-星银药业',value: 21705}]},{date: '2022年08月',list: [{name: '安列克-常州四药',value: 94615},{name: '贝克宁-成都贝特',value: 119397},{name: '瀚宝-深圳瀚宇',value: 60547},{name: '卡贝缩宫素-杭州澳亚',value: 73835},{name: '卡贝缩宫素-天吉生物',value: 37406},{name: '卡贝缩宫素-星银药业',value: 26228}]}
]function formatMoney(money) {return money
}function run({ data = defaultData, height = 500 }) {const chartHeight = height;const maxY = 100;const maxHeight = chartHeight - maxY;function createData(initData = []) {const list = initData?.map((item) => ({...item,total: item.list.reduce((pre, cur) => pre + cur.value, 0),list: item.list?.sort((a, b) => a.value - b.value)}));const legendData = [];const xAxisData = [];const seriesDataMap = {};let max = 0;// 生成x轴、图例数据for (const dateIndex in list) {const item = list[dateIndex];xAxisData.push(item.date);if (dateIndex < list?.length - 1) {new Array(3).fill(0).forEach((_, lineIndex) => {xAxisData.push(`line-${lineIndex}`);});}max = Math.max(max, item.total);for (const index in item.list) {const dataItem = item.list[index];if (!legendData?.includes(dataItem.name)) {legendData.push(dataItem.name);}}}// 根据图例生成数据for (const index in list) {const item = list[index];for (const name of legendData) {const dataItem = item?.list?.find((dataItem) => dataItem.name === name);_.set(seriesDataMap, `${name}.${index}`, dataItem?.value);}}const result = { list, legendData, xAxisData, seriesDataMap, max };// console.log('result', result);return result;}function createLineChart({ seriesData = [], initDataResult }) {const { list, max } = initDataResult;const spaceLineSeries = [];const lineSeries = [];// console.log('seriesData', seriesData);for (const seriesIndex in seriesData) {const seriesItem = seriesData[seriesIndex];const defaultLineSeries = {type: 'line',name: seriesItem.name,stack: `Line-${seriesIndex}`,smooth: 0.3,lineStyle: {width: 0,opacity: 0},symbol: 'none',showSymbol: false,triggerLineEvent: true,silent: true,areaStyle: {},emphasis: {focus: 'series'}};spaceLineSeries.push({...defaultLineSeries,areaStyle: {opacity: 0},data: getLineData(seriesItem?.data, seriesItem.name, true)});lineSeries.push({...defaultLineSeries,data: getLineData(seriesItem?.data, seriesItem.name)});}function getLineData(data, name, isSpace = false) {const result = data?.map((_, index) => {const dateIndex = Math.floor(index / 4);const lineIndex = index % 4;const item = data?.[index] || {};const lastItem = data?.[index - (4 - lineIndex)] || {};const nextItem = data?.[index + (4 - lineIndex)] || {};const offset = getOffset({ list, dateIndex, name, max });const nextOffset = getOffset({ list, dateIndex: dateIndex + 1, name, max });let spaceValue;let value = item.radioValue - offset;switch (lineIndex) {case 0:spaceValue = offset;break;case 1:spaceValue = offset;if (!nextItem?.radioValue) {value = undefined;}break;case 2:spaceValue = (nextOffset + offset) / 2;value = (nextItem.radioValue + item.radioValue) / 2 - spaceValue;break;case 3:spaceValue = nextOffset;value = nextItem.radioValue - nextOffset;if (!lastItem?.radioValue) {value = undefined;}break;}if (!lastItem?.radioValue && !nextItem?.radioValue) {value = undefined;}// console.log(lineIndex, item, offset, nextOffset, spaceValue, value);const newItem = {...item,value: isSpace ? spaceValue : value};return newItem;});// console.log('result', result);return result;}return [...spaceLineSeries, ...lineSeries];}function createOption(initData) {const initDataResult = createData(initData);const { list, legendData, xAxisData, seriesDataMap, max } = initDataResult;const seriesData = [];for (const seriesIndex in Object.keys(seriesDataMap)) {const name = Object.keys(seriesDataMap)[seriesIndex];const data = seriesDataMap[name];seriesData.push({name,type: 'scatter',symbol: 'rect',z: 3,itemStyle: {opacity: 1},label: {show: true,color: '#fff',formatter: (params) => formatMoney(params.data.realValue, 0)},tooltip: {trigger: 'item',formatter: (params) => {return `<div><div>年度月份：${params.name}</div><div>${params.seriesName}：${formatMoney(params.data.realValue, 0)}</div></div>`;}},data: getChartData({ data, name })});}function getChartData({ data = [], name }) {const dataResult = [];data?.forEach((value, dateIndex) => {const y = maxY * (value / max);const ySize = maxHeight * (y / maxY);const offset = getOffset({ list, dateIndex, name, max });const radioValue = y + offset > 100 ? 100 : y + offset;dataResult.push({name,value: radioValue,radioValue,realValue: value,symbolOffset: [0, '50%'],symbolSize: [50, ySize]});if (dateIndex < data?.length - 1) {new Array(3).fill(0).forEach((_, lineIndex) => {dataResult.push({value: '',radioValue,realValue: value,isLine: true,lineIndex});});}});return dataResult;}const lineSeries = createLineChart({ seriesData, initDataResult });return {option: {legend: {data: legendData},xAxis: {data: xAxisData,axisTick: {show: false}},series: [...seriesData, ...lineSeries]}};}function getOffset({ list, dateIndex, name, max }) {const dateData = list[dateIndex]?.list || [];const itemIndex = dateData?.findIndex((item) => item.name === name);let offset = 0;for (let i = 0; i < itemIndex; i++) {const itemValue = dateData[i].value;offset += maxY * (itemValue / max);}return offset;}const { option: newOption } = createOption(data);return _.merge({grid: {top: 40,left: 20,right: 20,bottom: 40,containLabel: true},yAxis: {show: false,max: maxY},tooltip: {// show: true,// trigger: 'axis',// axisPointer: {//   type: 'none'// },// formatter: (params, ticket) => {//   // console.log('params', params, ticket);//   return '';// }},dataZoom: [{type: 'slider',filterMode: 'weakFilter',showDataShadow: false,showDetail: false,brushSelect: false,height: 20,bottom: 10,startValue: 1,endValue: 5,xAxisIndex: 0,start: 0,end: 100}],xAxis: {type: 'category',data: newOption.xAxis.data,axisLabel: {formatter: function (value) {return value?.includes('line') ? '' : value;}}}},newOption);
}function getOption(data, height) {return run({ data, height });
}option = getOption(defaultData);if (option && typeof option === 'object') {myChart.setOption(option);
}window.addEventListener('resize', myChart.resize);

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

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

相关文章

搭建HBase2.x完全分布式集群（CentOS 9 + Hadoop3.x）

搭建HBase2.x完全分布式集群（CentOS 9 + Hadoop3.x）

Apache HBase™是一个分布式、可扩展、大数据存储的Hadoop数据库。 当我们需要对大数据进行随机、实时的读/写访问时&#xff0c;可以使用HBase。这个项目的目标是在通用硬件集群上托管非常大的表——数十亿行X数百万列。Apache HBase是一个开源、分布式、版本化的非关系数据库…
阅读更多...
Ceph学习 -11.块存储RBD接口

Ceph学习 -11.块存储RBD接口

文章目录 RBD接口1.基础知识1.1 基础知识1.2 简单实践1.3 小结 2.镜像管理2.1 基础知识2.2 简单实践2.3 小结 3.镜像实践3.1 基础知识3.2 简单实践3.3 小结 4.容量管理4.1 基础知识4.2 简单实践4.3 小结 5.快照管理5.1 基础知识5.2 简单实践5.3 小结 6.快照分层6.1 基础知识6.2…
阅读更多...
微信小程序使用 Vant Weapp 中 Collapse 折叠面板 的问题！

微信小程序使用 Vant Weapp 中 Collapse 折叠面板 的问题！

需求&#xff1a;结合Tab 标签页 和 Collapse 折叠面板 组合成显示课本和章节内容&#xff0c;并且用户体验要好点&#xff01; 如下图展示&#xff1a; 问题&#xff1a;如何使用Collapse 折叠面板 将内容循环展示出来&#xff1f; js中的数据是这样的 代码实现&#xff1…
阅读更多...
Python | Leetcode Python题解之第39题组合总和

Python | Leetcode Python题解之第39题组合总和

题目&#xff1a; 题解&#xff1a; from typing import Listclass Solution:def combinationSum(self, candidates: List[int], target: int) -> List[List[int]]:def dfs(candidates, begin, size, path, res, target):if target < 0:returnif target 0:res.append(p…
阅读更多...
Stability AI 发布 SD3 API：开启人工智能新篇章

Stability AI 发布 SD3 API：开启人工智能新篇章

文章目录 1.Stable Diffusion 3 API开放了! 2.Stability AI Document地址3.获取API Key4.API方式调用SD3出图接口地址接口请求规范接口请求响应结果 5.Stable Diffusion 3.0、Stable Image Core、Fooocus 2.3.1、MidJounery效果查看 1.Stable Diffusion 3 API开放了! Stabilit…
阅读更多...
react 响应式栅格布局

react 响应式栅格布局

遇到一个小问题 , 有很多的下拉框放在了一行的盒子里 用到了栅格思路 , 但响应式处理屏幕时候右侧的按钮会覆盖掉样式 之前我的思路是子绝父相 , 将按钮定在最右侧 , 按钮和下拉框都在同一盒子中 , 且做了栅格处理没想到还是会覆盖解决 : 后来我用到了 margin-left: auto 来让…
阅读更多...
蓝桥杯2024年第十五届省赛真题-宝石组合

蓝桥杯2024年第十五届省赛真题-宝石组合

思路&#xff1a;参考博客&#xff0c;对Ha,Hb,Hc分别进行质因数分解会发现&#xff0c;S其实就等于Ha&#xff0c;Hb&#xff0c;Hc的最大公约数&#xff0c;不严谨推导过程如下&#xff08;字丑勿喷&#xff09;&#xff1a; 找到此规律后&#xff0c;也不能枚举Ha&#xff…
阅读更多...
OpenCV——Niblack局部阈值二值化方法

OpenCV——Niblack局部阈值二值化方法

目录 一、Niblack算法1、算法概述2、参考文献二、代码实现三、结果展示OpenCV——Niblack局部阈值二值化方法由CSDN点云侠原创，爬虫自重。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫。 一、Niblack算法 1、算法概述 Niblack 算法是一种典型的局部阈值…
阅读更多...
JavaWeb开发05-事务管理-AOP概述-AOP通知类型-通知顺序-切入点表达式-连接点-案例

JavaWeb开发05-事务管理-AOP概述-AOP通知类型-通知顺序-切入点表达式-连接点-案例

一、事务管理 1.事务回顾 2.Spring事务管理 删除部门和删除部门下的员工应该绑定在一起&#xff0c;但是如果这两个操作之间出现错误&#xff0c;就会执行删除部门不删除员工&#xff0c;所以需要使用事务将两个任务绑定在一起&#xff0c;要么一起成功要么一起失败 Spring中如…
阅读更多...
基础知识集合

基础知识集合

https://blog.csdn.net/sheng_q/category_10901984.html?spm1001.2014.3001.5482 epoll 事件驱动的I/O模型&#xff0c;同时处理大量的文件描述符 内核与用户空间共享一个事件表&#xff1a;监控的文件描述符以它们的状态&#xff0c;当状态变化&#xff0c;内核将事件通知给…
阅读更多...
Mac上Maven的安装和环境变量配置保姆级教程（最新版实时更新）

Mac上Maven的安装和环境变量配置保姆级教程（最新版实时更新）

目录 一、Maven的安装 1.进入官网&#xff08;Maven官网&#xff09;下载安装包并解压 2.这里我使用了Homebrew安装Maven 安装Homebrew&#xff1a; 安装Maven&#xff1a; 二、Maven配置环境变量 1.打开环境变量文档&#xff1a; 2.在弹出文档结尾加入配置&#xff1a…
阅读更多...
【Node.js】 fs模块全解析

【Node.js】 fs模块全解析

&#x1f525;【Node.js】 fs模块全解析 &#x1f4e2; 引言 在Node.js开发中&#xff0c;fs模块犹如一把万能钥匙&#xff0c;解锁着整个文件系统的操作。从读取文件、写入文件、检查状态到目录管理&#xff0c;无所不能。接下来&#xff0c;我们将逐一揭开fs模块中最常用的那…
阅读更多...
【HC32L110】华大低功耗单片机启动文件详解

【HC32L110】华大低功耗单片机启动文件详解

本文主要记录华大低功耗单片机 HC32L110 的 汇编启动过程&#xff0c;包括startup_hc32l110启动文件详细注释 目录 1.启动文件的作用2.堆栈定义2.1 栈2.2堆 3.向量表4.复位程序5.中断服务程序6.堆栈初始化启动过程详解7.1从0地址开始7.2在Reset_Handler中干了啥&#xff1f; 8.…
阅读更多...
PyTorch|保存及加载模型、nn.Sequential、ModuleList和ModuleDict

PyTorch|保存及加载模型、nn.Sequential、ModuleList和ModuleDict

系列文章目录 PyTorch|Dataset与DataLoader使用、构建自定义数据集 PyTorch|搭建分类网络实例、nn.Module源码学习 pytorch|autograd使用、训练模型 文章目录 系列文章目录一、保存及加载模型&#xff08;一&#xff09;保存及加载模型的权重&#xff08;二&#xff09;保存及…
阅读更多...
探究欧拉恒等式的美学与数学威力

探究欧拉恒等式的美学与数学威力

正如老子所述&#xff0c;“道生一&#xff0c;一生二&#xff0c;二生三&#xff0c;三生万物”&#xff0c;数学作为人类认知自然法则的语言&#xff0c;其数系的不断发展象征着对世界理解的深化。从自然数经由分数、无理数至复数&#xff0c;复数虽看似反直觉&#xff0c;却…
阅读更多...
MATLAB实现蚁群算法优化柔性车间调度(ACO-fjsp)

MATLAB实现蚁群算法优化柔性车间调度(ACO-fjsp)

蚁群算法优化车间调度的步骤可以分为以下几个主要阶段&#xff1a; 1.初始化阶段&#xff1a; 设置算法参数&#xff0c;如信息素浓度、启发式因子等。这些参数将影响蚂蚁在选择路径时的决策过程。 确定车间调度的具体问题规模&#xff0c;包括工件数量、机器数量以及每个工件…
阅读更多...
AI：162-如何使用Python进行图像识别与处理深度学习与卷积神经网络的应用

AI：162-如何使用Python进行图像识别与处理深度学习与卷积神经网络的应用

本文收录于专栏&#xff1a;精通AI实战千例专栏合集 从基础到实践&#xff0c;深入学习。无论你是初学者还是经验丰富的老手&#xff0c;对于本专栏案例和项目实践都有参考学习意义。 每一个案例都附带关键代码&#xff0c;详细讲解供大家学习&#xff0c;希望可以帮到大家。正…
阅读更多...
OpenHarmony GIF图像渲染库—ohos-gif-drawable

OpenHarmony GIF图像渲染库—ohos-gif-drawable

简介 本项目是OpenHarmony系统的一款GIF图像渲染库&#xff0c;基于Canvas进行绘制&#xff0c;主要能力如下: 支持播放GIF图片。支持控制GIF播放/暂停。支持重置GIF播放动画。支持调节GIF播放速率。支持监听GIF所有帧显示完成后的回调。支持设置显示大小。支持7种不同的展示…
阅读更多...
面试题：Redis如何防止缓存穿透 + 布隆过滤器原理

面试题：Redis如何防止缓存穿透 + 布隆过滤器原理

题目来源 招银网络-技术-1面 题目描述 缓存穿透是什么&#xff1f;如何防止缓存穿透布隆过滤器的原理是什么&#xff1f; 我的回答 缓存穿透是什么&#xff1f; 攻击者大量请求缓存和数据库中都不存在的key。如何防止缓存穿透 可以使用布隆过滤器布隆过滤器的原理是什么&a…
阅读更多...
AI容器化部署开发尝试 （一）（Pycharm连接docker，并部署django测试）

AI容器化部署开发尝试 （一）（Pycharm连接docker，并部署django测试）

注意&#xff1a;从 Docker 19.03 开始&#xff0c;Docker 引入了对 NVIDIA GPU 的原生支持&#xff0c;因此若AI要调用GPU算力的话docker版本也是有要求的&#xff0c;后面博客测试。 当然本篇博客还没设计到GPU的调用&#xff0c;主要Pycharm加Anaconda的方案用习惯了&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023