ChatGPT PLUS与ChatGPT 的区别

GarsonW

已于 2023-06-13 17:59:58 修改

阅读量1.5k

点赞数 3

分类专栏：人工智能文章标签： javascript echarts 开发语言

于 2023-03-30 13:06:08 首次发布

本文链接：https://blog.csdn.net/m0_56190554/article/details/129855315

版权

人工智能专栏收录该内容

12 篇文章 2 订阅

订阅专栏

👍今天成功激活了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 data
    const 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 container
    const chartContainer = document.getElementById('chart');
    const chart = echarts.init(chartContainer);

    // Configure chart options
    const 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 chart
    chart.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',