当前位置： 首页 > news >正文

利用Trae将原型图转换为可执行的html文件，感受AI编程的魅力

news 2025/7/26 13:05:56

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.dtcms.com/a/298587.html

相关文章：

  • 企业微信H5应用OAuth2登录,企业微信授权登录
  • RocketMQ 做成服务启动
  • FastGPT：重新定义企业专属知识库的灵活部署
  • Linux进程信号——信号产生
  • 【LeetCode 热题 100】22. 括号生成——（解法一）选左括号还是选有括号
  • Linux嵌入式工程师学习路线
  • Linux系统基本配置以及认识文件作用
  • 执行测试时测试数据准备困难如何处理？
  • 汪小菲食通达公司成立新零售公司，布局餐饮零售新赛道
  • 【算法】动态规划 · 上篇
  • Python day24
  • CRM 系统：实现商机全流程管理的关键
  • Qt XML 与 JSON 数据处理方法
  • 文搜图/图搜图
  • OSPF 协议（多区域）
  • Inception网络架构：深度学习视觉模型的里程碑
  • 去甲基化药物联合DLI治疗AML1-ETO阳性
  • 图书推荐-由浅入深的大模型构建《从零构建大模型》
  • 【C++避坑指南】vector迭代器失效的八大场景与解决方案
  • 管理系统模板
  • 应用程序无法正常启动(0xc000007b)怎么办 解决方法详解
  • Matlab学习笔记：结构基础
  • 数仓规范体系的构建
  • SVM多分类实战：从理论到应用的完整指南
  • Linux的磁盘存储管理实操——（下二）——逻辑卷管理LVM的扩容、缩容
  • 5.2.1 javascript 事件对象.内容补充.
  • 从零本地部署使用Qwen3-coder进行编程
  • 1.1.4 建筑隔震减震设计结构要求
  • SpringBoot创建项目的方式
  • Spring AOP `MethodInvocation` 工作原理