AIGC ChatGPT 完成多仪表盘完成率分析

阿里数据专家

已于 2024-02-19 16:56:20 修改

阅读量195

点赞数

文章标签： AIGC chatgpt 人工智能 echarts javascript python 前端

于 2023-08-19 13:44:10 首次发布

本文链接：https://blog.csdn.net/sunzhuan158/article/details/132379088

版权

各组完成率的统计与分析的这样一个综合案例

可以使用HTML ，JS，Echarts 来完成制作

我们可以借助于AIGC，ChatGPT 人工智能来帮我们完成代码的输出。

在ChatGPT中我们只需要发送指令就可以了。

例如：请使用HTMl与JS，Echarts完成一个动态仪表盘的实例，可以随机生成不同的数据，在一个页面中生成8个不同的仪表盘，第1个图表的标题为第1组完成率，第2个图表的标题为第2组完成率，后面的图表标题以此类推。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dynamic Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <style>
    .chart {
      width: 300px;
      height: 300px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div id="dashboard"></div>
  
  <script>
    // 随机生成仪表盘数据
    function generateData() {
      return Math.floor(Math.random() * 101); // 生成0到100之间的随机数
    }
    
    // 创建仪表盘图表
    function createGaugeChart(containerId, title) {
      var container = document.getElementById(containerId);
      var chart = echarts.init(container);
      
      var option = {
        title: {
          text: title,
          left: 'center'
        },
        series: [
          {
            name: '完成率',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: generateData(), name: '完成率'}]
          }
        ]
      };
      
      chart.setOption(option);
      
      // 更新仪表盘数据
      setInterval(function () {
        option.series[0].data[0].value = generateData();
        chart.setOption(option);
      }, 300);
    }
    
    // 创建8个仪表盘
    function createDashboard() {
      var dashboard = document.getElementById('dashboard');
      
      for (var i = 1; i <= 8; i++) {
        var containerId = 'chart' + i;
        var title = '第' + i + '组完成率';
        
        var container = document.createElement('div');
        container.id = containerId;
        container.className = 'chart';
        
        dashboard.appendChild(container);
        
        createGaugeChart(containerId, title);
      }
    }
    
    createDashboard();
  </script>
</body>
</html>

将上述代码保存为HTML文件，打开即可得到多个仪表盘显示各组完成率的情况。

以上内容在：https://edu.csdn.net/lecturer/840?spm=1002.2001.3001.4144

阿里数据专家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AIGC ChatGPT 完成多仪表盘完成率分析

各组完成率的统计与分析的这样一个综合案例可以使用HTML ，JS，Echarts 来完成制作我们可以借助于AIGC，ChatGPT 人工智能来帮我们完成代码的输出。在ChatGPT中我们只需要发送指令就可以了。完整代码如下：将上述代码保存为HTML文件，打开即可得到多个仪表盘显示各组完成率的情况。
复制链接

扫一扫