👍今天成功激活了GPT PLUS版本，幸喜之余还是想快点尝试以下4.0升级之后写代码的能力！
1️⃣GPT4.0
🎇我给了GPT4.0这样的一个请求。想让他写出数据分析相应的页面设计。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>广告数据分析</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><style>#chart {width: 100%;height: 500px;}</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary"><div class="container-fluid"><a class="navbar-brand" href="#">广告数据分析</a></div>
</nav><div class="container my-4"><div id="chart"></div>
</div><script>// Sample dataconst adData = [{name: '广告1', value: 120},{name: '广告2', value: 180},{name: '广告3', value: 150},{name: '广告4', value: 80},{name: '广告5', value: 70},{name: '广告6', value: 110},{name: '广告7', value: 130},{name: '广告8', value: 50},{name: '广告9', value: 60},{name: '广告10', value: 40}];// Initialize the chart containerconst chartContainer = document.getElementById('chart');const chart = echarts.init(chartContainer);// Configure chart optionsconst chartOptions = {title: {text: '广告点击量分析',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: adData.map(item => item.name)},series: [{name: '点击量',type: 'pie',radius: '50%',center: ['50%', '60%'],data: adData,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// Render the chartchart.setOption(chartOptions);
</script>
</body>
</html>
🎇GPT4.0代码分析：代码赋值到html页面上可直接运行，逻辑清晰，代码风格明了，十分适合拓展。
2️⃣GPT3.0
🎇我给了GPT3.0同样的请求。生成的代码以及页面如下。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>广告数据分析</title><!-- 引入Bootstrap和Echarts的CSS和JavaScript文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"><script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body><!-- 导航栏 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">广告数据分析</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">数据分析</a></li></ul></div></nav><!-- 内容区域 --><div class="container mt-4"><h2>广告数据分析</h2><div class="row"><div class="col-md-6"><div id="chart1" style="height: 400px;"></div></div><div class="col-md-6"><div id="chart2" style="height: 400px;"></div></div></div></div><!-- JavaScript代码 --><script type="text/javascript">var data = {dates: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05', '2022-01-06'],clicks: [120, 150, 180, 200, 170, 160],impressions: [1000, 1200, 1300, 1400, 1200, 1100]};// 初始化图表1，点击量趋势图var chart1 = echarts.init(document.getElementById('chart1'));var option1 = {title: {text: '点击量趋势图'},xAxis: {type: 'category',data: data.dates},yAxis: {type: 'value'},series: [{data: data.clicks,type: 'line'}]};chart1.setOption(option1);// 初始化图表2，曝光量趋势图var chart2 = echarts.init(document.getElementById('chart2'));var option2 = {title: {text: '曝光量趋势图'},xAxis: {type: 'category',
🎇GPT3.5代码分析：不可以直接运行，有语法错误，script没有封上，但是估计是太长了没发完，我让他继续发的时候还是重复发送上述代码。经过修改，gpt3.5自动生成的页面如下。
![[论文总结] 科技论文英语写作笔记1](https://img-blog.csdnimg.cn/img_convert/56514c745ac15c5fadf3bfff4597b725.png)
