1、UI设计原型效果

请添加图片描述

2、通过Tare对话生成的效果图(5分钟左右)

在这里插入图片描述

3、查资料做的效果图(30分钟左右))

在这里插入图片描述
通过以上对比,显然差别不多能满足要求,只需要在继续优化就能搞定;

4、Trae生成的源码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>许可证容量趋势</title><script src="echarts.min.js"></script><style>body {margin: 0;padding: 20px;background-color: #0f172a;color: white;font-family: Arial, sans-serif;}.chart-container {position: relative;width: 100%;height: 80vh;max-width: 1200px;margin: 0 auto;}.chart-title {text-align: center;font-size: 24px;margin-bottom: 20px;color: #e2e8f0;}.unit-label {position: absolute;top: 10px;left: 10px;background: rgba(15, 23, 42, 0.7);padding: 5px 10px;border-radius: 4px;font-size: 14px;}</style>
</head><body><h1 class="chart-title">许可证容量趋势</h1><div class="chart-container"><!-- <div class="unit-label">单位: L</div> --><div id="capacityChart" style="width: 100%; height: 100%;"></div></div><script>// 许可证容量数据 - 修正为二维数组格式 [索引, 值]const years = ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年', '2024年', '2025年'];const licenseCapacity = [2500, 3200, 2500, 2800, 3300, 2800, 2500, 3200, 3300, 3500].map((val, idx) => [idx, val]);const standardCapacity = [2200, 2800, 2200, 2500, 3000, 2500, 2200, 2800, 2900, 3200].map((val, idx) => [idx, val]);// 创建图表const chartDom = document.getElementById('capacityChart');const myChart = echarts.init(chartDom);const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},backgroundColor: 'rgba(15, 23, 42, 0.9)',borderColor: 'rgba(0, 123, 255, 0.5)',borderWidth: 1,textStyle: {color: 'rgba(255, 255, 255, 0.9)'}},legend: {data: ['许可证容量', '标准容量'],textStyle: {color: 'rgba(255, 255, 255, 0.9)',fontSize: 14},top: 0},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true,backgroundColor: 'transparent',borderColor: 'rgba(255, 255, 255, 0.1)'},xAxis: [{type: 'category',data: years,axisLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'}},axisLabel: {color: 'rgba(255, 255, 255, 0.7)'},splitLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.1)'}}}],yAxis: [{type: 'value',min: 0,max: 4000,interval: 1000,axisLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'}},axisLabel: {color: 'rgba(255, 255, 255, 0.7)',formatter: '{value}'},splitLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.1)'}}}],series: [{name: '许可证容量',type: 'custom',renderItem: function (params, api) {// 获取数据值和坐标 - 使用正确的维度索引const value = api.value(1); // Y轴值const barWidth = 40;const x = api.coord([api.value(0), 0])[0] - barWidth / 2; // X轴位置(减去宽度一半)const y = api.coord([0, value])[1];const yAxisHeight = api.coord([0, 0])[1];const cubeDepth = 15; // 立方体深度// 计算三个面的坐标// 正面const frontPoints = [[x, y],[x + barWidth, y],[x + barWidth, yAxisHeight],[x, yAxisHeight]];// 顶面const topPoints = [[x, y],[x + barWidth, y],[x + barWidth + cubeDepth, y - cubeDepth],[x + cubeDepth, y - cubeDepth]];// 右侧面const rightPoints = [[x + barWidth, y],[x + barWidth + cubeDepth, y - cubeDepth],[x + barWidth + cubeDepth, yAxisHeight - cubeDepth],[x + barWidth, yAxisHeight]];return {type: 'group',children: [// 右侧面{type: 'polygon',shape: { points: rightPoints },style: {fill: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: 'rgba(0, 64, 128, 0.7)' },{ offset: 1, color: 'rgba(0, 40, 80, 0.5)' }]),stroke: 'rgba(0, 64, 128, 0.8)',lineWidth: 1}},// 正面{type: 'polygon',shape: { points: frontPoints },style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 191, 255, 1)' },{ offset: 1, color: 'rgba(0, 123, 255, 0.8)' }]),stroke: 'rgba(0, 123, 255, 1)',lineWidth: 1}},// 顶面{type: 'polygon',shape: { points: topPoints },style: {fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgba(173, 216, 230, 0.9)' },{ offset: 1, color: 'rgba(0, 191, 255, 0.7)' }]),stroke: 'rgba(173, 216, 230, 0.8)',lineWidth: 1}}]};},data: licenseCapacity,encode: {x: 0,  // 使用数据的第0维度作为X轴索引y: 1   // 使用数据的第1维度作为Y轴值}},{name: '标准容量',type: 'custom',renderItem: function (params, api) {// 获取数据值和坐标 - 使用正确的维度索引const value = api.value(1); // Y轴值const barWidth = 40;const x = api.coord([api.value(0), 0])[0] + barWidth / 2; // X轴位置(加上宽度一半)const y = api.coord([0, value])[1];const yAxisHeight = api.coord([0, 0])[1];const cubeDepth = 15; // 立方体深度// 计算三个面的坐标// 正面const frontPoints = [[x, y],[x + barWidth, y],[x + barWidth, yAxisHeight],[x, yAxisHeight]];// 顶面const topPoints = [[x, y],[x + barWidth, y],[x + barWidth + cubeDepth, y - cubeDepth],[x + cubeDepth, y - cubeDepth]];// 右侧面const rightPoints = [[x + barWidth, y],[x + barWidth + cubeDepth, y - cubeDepth],[x + barWidth + cubeDepth, yAxisHeight - cubeDepth],[x + barWidth, yAxisHeight]];return {type: 'group',children: [// 右侧面{type: 'polygon',shape: { points: rightPoints },style: {fill: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: 'rgba(139, 0, 0, 0.7)' },{ offset: 1, color: 'rgba(101, 31, 31, 0.5)' }]),stroke: 'rgba(139, 0, 0, 0.8)',lineWidth: 1}},// 正面{type: 'polygon',shape: { points: frontPoints },style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(255, 105, 180, 1)' },{ offset: 1, color: 'rgba(255, 0, 0, 0.8)' }]),stroke: 'rgba(255, 0, 0, 1)',lineWidth: 1}},// 顶面{type: 'polygon',shape: { points: topPoints },style: {fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgba(255, 182, 193, 0.9)' },{ offset: 1, color: 'rgba(255, 105, 180, 0.7)' }]),stroke: 'rgba(255, 182, 193, 0.8)',lineWidth: 1}}]};},data: standardCapacity,encode: {x: 0,  // 使用数据的第0维度作为X轴索引y: 1   // 使用数据的第1维度作为Y轴值}}]};myChart.setOption(option);// 响应窗口大小变化window.addEventListener('resize', function () {myChart.resize();});</script>
</body></html>

5、最终的效果图源码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>许可证容量趋势</title><script src="echarts.min.js"></script><style>body {margin: 0;padding: 20px;background-color: #0f172a;color: white;font-family: Arial, sans-serif;}.chart-container {position: relative;width: 100%;height: 80vh;max-width: 1200px;margin: 0 auto;}.chart-title {text-align: center;font-size: 24px;margin-bottom: 20px;color: #e2e8f0;}.unit-label {position: absolute;top: 10px;left: 10px;background: rgba(15, 23, 42, 0.7);padding: 5px 10px;border-radius: 4px;font-size: 14px;}</style>
</head><body><h1 class="chart-title">许可证容量趋势</h1><div class="chart-container"><!-- <div class="unit-label">单位: L</div> --><div id="capacityChart" style="width: 100%; height: 100%;"></div></div><script>// 许可证容量数据 - 修正为二维数组格式 [索引, 值]const years = ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年', '2024年', '2025年'];const licenseCapacity = [2500, 3200, 2500, 2800, 3300, 2800, 2500, 3200, 3300, 3500].map((val, idx) => [idx, val]);const standardCapacity = [2200, 2800, 2200, 2500, 3000, 2500, 2200, 2800, 2900, 3200].map((val, idx) => [idx, val]);// 创建图表const chartDom = document.getElementById('capacityChart');const myChart = echarts.init(chartDom);const option = {grid: {bottom: "20px",left: "50px", // 左边距为容器宽度的 50pxright: "0px" // 右边距为容器宽度的 0px},// 左上角显示单位title: {text: "单位: 个",left: "left",top: "top",textStyle: {color: "#8CBAEE",fontSize: 14}},// 右上角显示图例legend: {width: "200px",orient: "horizontal", // 设置图例水平排列data: ["许可证容量", "标准容量"],right: "right",top: "top",textStyle: {color: "#8CBAEE"},itemType: "rect", // 指定图例图标为矩形itemWidth: 10, // 设置矩形宽度itemHeight: 10 // 设置矩形高度},xAxis: {data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],axisLabel: {color: "#8CBAEE"// rotate: -60},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false}},yAxis: {axisLabel: {color: "#8CBAEE"},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false},splitLine: {lineStyle: {color: "#FFFFFF3C", // 设置颜色为白色type: "dashed" // 设置为虚线}}},// 立方体柱状series: [{type: "custom",name: "许可证容量",// 手动指定图例颜色color: "#387BFE",data: [0.04, 0.02, 0.03, 0.034, 0.03, 0.024, 0.044, 0.044, 0.036, 0.044],renderItem: (params, api) => {const basicsCoord = api.coord([api.value(0), api.value(1)])const topBasicsYAxis = basicsCoord[1]const basicsXAxis = basicsCoord[0] - 15 // 向左偏移 15pxconst bottomYAxis = api.coord([api.value(0), 0])[1]return {type: "group",children: [// 左侧{type: "polygon",shape: {points: [[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis - 10, bottomYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis, topBasicsYAxis]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#387BFE" },{ offset: 1, color: "#7CB1FD" }]),opacity: 0.8 // 设置半透明}},// 右侧{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis + 10, bottomYAxis],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#387BFE" },{ offset: 1, color: "#7CB1FD" }]),opacity: 0.8 // 设置半透明}},// 顶部{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis, topBasicsYAxis - 8],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#387BFE" },{ offset: 1, color: "#7CB1FD" }]),opacity: 0.8 // 设置半透明}}]}}},{type: "custom",name: "标准容量",// 手动指定图例颜色color: "#1362AC",data: [0.042, 0.042, 0.042, 0.042, 0.042, 0.042, 0.042, 0.042, 0.042, 0.042],renderItem: (params, api) => {const basicsCoord = api.coord([api.value(0), api.value(1)])const topBasicsYAxis = basicsCoord[1]const basicsXAxis = basicsCoord[0] + 15 // 向右偏移 15pxconst bottomYAxis = api.coord([api.value(0), 0])[1]return {type: "group",children: [// 左侧{type: "polygon",shape: {points: [[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis - 10, bottomYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis, topBasicsYAxis]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#1362AC" },{ offset: 1, color: "#1362AC8A" }]),opacity: 0.8 // 设置半透明}},// 右侧{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis + 10, bottomYAxis],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#1362AC" },{ offset: 1, color: "#1362AC8A" }]),opacity: 0.8 // 设置半透明}},// 顶部{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis - 10, topBasicsYAxis - 4],[basicsXAxis, topBasicsYAxis - 8],[basicsXAxis + 10, topBasicsYAxis - 4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#1362AC" },{ offset: 1, color: "#1362AC8A" }]),opacity: 0.8 // 设置半透明}}]}}}]}myChart.setOption(option);// 响应窗口大小变化window.addEventListener('resize', function () {myChart.resize();});</script>
</body></html>

6、对话全过程

  1. 有意思的是第一次识别的时候因为背景有地图,是给提供了mapbox绘制的解决方案
    在这里插入图片描述
  2. 去掉地图
    在这里插入图片描述
  3. 修改无效的echart在线地址,本文使用的echart地址
    在这里插入图片描述
    在这里插入图片描述
  4. 第一次生成的是普通的柱状图,不是我想要的立体效果,这个过程我反复了3个来回没有给到关键字,所以效果不明显。
    在这里插入图片描述
  5. 再次提交我让他试试renderItem的方式绘制
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

最终就是目录2的效果,当然想实现目录3的效果就是咫尺之间了。使用过程中发现还是需要给一定的关键字才能快速的实现想要的效果,所以目前阶段只能打打辅助还是相当不错的。

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

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chessboard and Queens

题目描述Your task is to place eight queens on a chessboard so that no two queens are attacking each other. As an additional challenge, each square is either free or reserved, and you can only place queens on the free squares. However, the reserved squares …

菜鸟教程R语言一二章阅读笔记

菜鸟教程R语言一二章阅读笔记 一.R语言基础教程 R 语言是为数学研究工作者设计的一种数学编程语言&#xff0c;主要用于统计分析、绘图、数据挖掘。侧重于数学工作者 R语言特点如下&#xff1a; R 语言环境软件属于 GNU 开源软件&#xff0c;兼容性好、使用免费 语法十分有利于…

Tactile-VLA:解锁视觉-语言-动作模型的物理知识,实现触觉泛化

25年7月来自清华、中科大和上海交大的论文“Tactile-VLA: Unlocking Vision-Language- Action Model’s Physical Knowledge For Tactile Generalization ”。 视觉-语言-动作 (VLA) 模型已展现出卓越的成就&#xff0c;这得益于其视觉-语言组件丰富的隐性知识。然而&#xff0…

HTML初学者第五天

<1>表格标签1.1基本语法<table><tr><td>单元格内的文字</td>...</tr>... </table>1.<table></table>是用于定义表格的标签。2.<tr></tr>标签用于定义表格中的行&#xff0c;必须嵌套在<table></ta…

FastAPI入门:demo、路径参数、查询参数

demo from fastapi import FastAPIapp FastAPI()app.get("/") async def root():return {"message": "Hello World"}在终端运行 fastapi dev main.py结果如下&#xff1a;打开http://127.0.0.1:8000&#xff1a;交互式API文档&#xff1a;位于h…

pytest中的rerunfailures的插件(失败重试)

目录 1-- 安装rerunfailures插件 2-- rerunfailures的使用 3-- 重试案例 安装rerunfailures插件 pip install pytest-rerunfailures点击左下角的控制台面板 输入 pip install pytest-rerunfailures 出现上图的情况就算安装完成了 rerunfailures的使用 可以添加一下参数使用&…

SpringMVC——建立连接

建立连接 将用户&#xff08;浏览器&#xff09;和java程序连接起来&#xff0c;也就是访问一个地址能够调用到我们的Spring程序。在 Spring MVC 中使用 RequestMapping来实现URL 路由映射&#xff0c;也就是浏览器连接程序的作用。 1.RequestMapping注解介绍 RequestMapping…

蘑菇云路由器使用教程

1: 手机连接路由器的Wi-Fi&#xff0c;在浏览器输入背面IP地址&#xff1a;192.168.132.1进入路由管理界面1.1: 电脑连接路由器网线在浏览器输入背面IP地址&#xff1a;192.168.132.1进入路由管理界面账号&#xff1a;admin密码&#xff1a;123456782:选择上网模式2.1&#xff…

ubuntu的tar解压指令相关

1. 指令说明参数作用-xextract&#xff0c;解包-z通过 gzip 解压&#xff08;.tar.gz、.tgz&#xff09;-vverbose&#xff0c;显示过程-ffile&#xff0c;后面紧跟压缩包文件名2. 什么时候用z参数场景是否加 -z结果.tar.gz / .tgz✅ 必须加 -z正常解压.tar.gz / .tgz❌ 没加 -…

车载诊断刷写 --- Flash关于擦除和写入大小

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…

【Verilog HDL 入门教程】 —— 学长带你学Verilog(基础篇)

文章目录一、Verilog HDL 概述1、Verilog HDL 是什么2、Verilog HDL产生的背景3、Verilog HDL 和 VHDL的区别二、Verilog HDL 基础知识1、Verilog HDL 语言要素1.1、命名规则1.2、注释符1.3、关键字1.4、数值1.4.1、整数及其表示1.4.2、实数及其表示1.4.3、字符串及其表示2、数…

SQL Developer Data Modeler:一款免费跨平台的数据库建模工具

SQL Developer Data Modeler 是由 Oracle 公司开发的一款免费的图形化数据建模和数据库设计工具&#xff0c;用于创建、浏览和编辑逻辑模型、关系模型、物理模型、多维模型和数据类型模型。 SQL Developer Data Modeler 既是一个独立的应用程序&#xff0c;同时也被集成到了 Or…

CSS面试题及详细答案140道之(21-40)

《前后端面试题》专栏集合了前后端各个知识模块的面试题&#xff0c;包括html&#xff0c;javascript&#xff0c;css&#xff0c;vue&#xff0c;react&#xff0c;java&#xff0c;Openlayers&#xff0c;leaflet&#xff0c;cesium&#xff0c;mapboxGL&#xff0c;threejs&…

篇四 tcp,udp客户端服务器编程模型

一 前言 本篇内容主要介绍tcp&#xff0c;udp客户端服务器编程的基础API和示例代码。 二 APIAPI用途使用方socket创建套接字&#xff0c;这是网络通信的桥梁Tcp,udp客户端&#xff0c;服务器bind绑定本地IP地址和端口Tcp,udp客户端&#xff0c;服务器listen监听端口&#xff0c…

ESP32学习笔记_Components(1)——使用LED Strip组件点亮LED灯带

LED strip ESP32-S3 的 RMT&#xff08;Remote Control Transceiver&#xff0c;远程控制收发器&#xff09;外设最初设计用于红外收发&#xff0c;但由于其数据格式的灵活性&#xff0c;RMT 可以扩展为通用的信号收发器&#xff0c;能够发送或接收多种类型的信号&#xff1b;…

无人机抛投模块分析

一、设计核心要点1. 结构轻量化与强度平衡 材料选择&#xff1a;主体采用航空铝、碳纤维复合材料&#xff0c;降低自重并保证承重强度。 机械传动优化&#xff1a;齿轮-齿条传动替代传统丝杆结构&#xff0c;简化机构并提升可靠性。 模块化设计&#xff1a;支持多仓位独立控…

【硬件-笔试面试题】硬件/电子工程师,笔试面试题-33,(知识点:二极管结温,热阻,二极管功耗计算)

目录 1、题目 2、解答 步骤一&#xff1a;明确热阻的相关公式 步骤二&#xff1a;计算二极管的功耗 步骤三&#xff1a;计算二极管的结温 3、相关知识点 一、热阻的定义 二、二极管功耗的计算 三、结温的计算 题目汇总版--链接&#xff1a; 【硬件-笔试面试题】硬件…

【LeetCode 热题 100】79. 单词搜索——回溯

Problem: 79. 单词搜索 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格…

ARM SMMUv3控制器注册过程分析(八)

1.概述 ARM SMMUv3控制器初始化及设备树分析&#xff08;七&#xff09;中描述了IOMMU控制器初始化过程。SMMU驱动最后调用iommu_device_register将其注册到内核中&#xff0c;下面分析一下SMMU控制器注册过程中都做了那些工作。 如下图所示&#xff0c;SMMU控制器注册过程中…

Idefics3:构建和更好地理解视觉-语言模型:洞察与未来方向

温馨提示&#xff1a; 本篇文章已同步至"AI专题精讲" Idefics3&#xff1a;构建和更好地理解视觉-语言模型&#xff1a;洞察与未来方向 摘要 视觉-语言模型&#xff08;VLMs&#xff09;领域&#xff0c;接收图像和文本作为输入并输出文本的模型&#xff0c;正在快…