ChatGPT 随机动态可视化图表分析

动态可视化图表分析实例如下图:

 这样的动态可视化图表可以使用ChatGPT OpenAI 来实现。

 给ChatGPT发送指令:

你现在是一个数据分析师,请使用HTML,JS,Echarts,来完成一个动态条形图,条形图方向横向,数据可以随机生成,并且随机生成10个不同的商品名称,每个类别分别用不同的颜色表示,数据从小到大进行排序,自动在图表中进行滚动,按年份进行滚动,在图表中显示数据标签字体大小20号字体,加粗,请写出一个完整的Demo,可以运行的

完整的HTML代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态条形图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var dataAxis = ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'];
        var data = [];
        for (var i = 0; i < 10; i++) {
            data.push(Math.round(Math.random() * 100));
        }
        data.sort(function(a, b) {
            return a - b;
        });
        var yMax = 500;
        var dataShadow = [];

        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }

        var option = {
            title: {
                text: '动态条形图',
                subtext: '数据可视化'
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        color: function(params) {
                            var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'];
                            return colorList[params.dataIndex]
                        },
                        barBorderRadius: [30, 30, 30, 30],
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 4
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}',
                        fontSize: 20,
                        fontWeight: 'bold'
                    },
                    data: data
                }
            ]
        };

        myChart.setOption(option);

        setInterval(function () {
            for (var i = 0; i < 10; i++) {
                data[i] = Math.round(Math.random() * 100);
            }
            data.sort(function(a, b) {
                return a - b;
            });
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 2000);
    </script>
</body>
</html>

AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战  http://t.csdn.cn/zBytu

 

 

 

 

 

 

 

 

 AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战  http://t.csdn.cn/zBytu

AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战  http://t.csdn.cn/zBytu

AIGC ChatGPT ,BI商业智能,可视化Tableau PowerBI,
数据库Mysql Oracle,Office, Python 案例实战  http://t.csdn.cn/zBytu

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

汽车电子笔记之:AUTOSA架构下的OS概述

目录 1、实时操作系统&#xff08;RTOS&#xff09; 2、OSEK操作系统 2.1、OSEK概述 2.2、OSEK处理等级 2.3、OSEK任务符合类 2.4、OSEK优先级天花板模式 3、AUTOSAR OS 3.1、 AUTOSAR OS对OSEK OS的继承和扩展 3.2、AUTOSAR OS的调度表 3.3、AUTOSAR OS的时间保护 3…

OS 内核级线程

用户级线程是两个栈&#xff0c;核心级线程是两套栈&#xff0c;用户栈和内核栈 用户级是并发&#xff08;同时触发、交替执行&#xff09;&#xff0c;这个是并行&#xff08;同时触发可以同时执行&#xff09; 进入内核的唯一方式是中断 根据TCB的切换&#xff0c;实现内核…

C++11特性详解

一、简介 在C11标准出来之前&#xff0c;一直是C98/03标准占引领地位&#xff0c;而C98/03标准是C98标准在2003年将存在的一些漏洞进行了修复&#xff0c;但并没有核心语法的改动。相比于C98/03&#xff0c;C11则带来了数量可观的变化&#xff0c;其中包含了约140个新特性&…

深度学习处理文本(NLP)

文章目录 引言1. 反向传播1.1 实例流程实现1.2 前向传播1.3 计算损失1.4 反向传播误差1.5 更新权重1.6 迭代1.7 BackPropagation & Adam 代码实例 2. 优化器 -- Adam2.1 Adam解析2.2 代码实例 3. NLP任务4. 神经网络处理文本4.1 step1 字符数值化4.2 step 2 矩阵转化为向量…

HTML基础知识点

目录 ​编辑一、使用 vscode 二、研究代码的特点 三、HTML 常见标签 注释标签 标题标签 段落标签 换行标签 格式化标签 图片标签 超链接标签 表格标签 列表标签 表单标签&#xff1a; form 标签 input标签&#xff1a; select textarea标签&#xff1a; 无语…

【stable-diffusion使用扩展+插件和模型资源(下)】

插件模型魔法图片等资源&#xff1a;https://tianfeng.space/1240.html 书接上文&#xff1a;&#xff08;上&#xff09; 插件推荐 1.lobe theme lobe theme是一款主题插件&#xff0c;直接可以在扩展安装 界面进行了重新布局&#xff0c;做了一些优化&#xff0c;有兴趣的…

HDLBits-Verilog学习记录 | Verilog Language-Vectors

文章目录 11.vectors | vector012.vectors in more detail | vector113.Vector part select | Vector214.Bitwise operators | Vectorgates15.Four-input gates | Gates416.Vector concatenation operator | Vector317.Vector reversal 1 | Vectorr18. Replication operator | …

平衡二叉树的插入和删除(从现在开始摆脱旋转)

平衡二叉树是指任意节点的左子树和右子树高度之差的绝对值不超过1 一.插入操作 1.找到合适位置插入 2.从下到上&#xff0c;沿着插入节点与根节点的连线&#xff0c;找到不平衡的二叉树 以68为根节点的二叉树平衡&#xff0c;左右子树高度差为1 以60为根节点的二叉树不平衡&a…

【Adobe After Effects】关于ae点击空格不会播放反而回退一帧的解决方案

最近玩ae的时候遇见了一个小问题&#xff0c;就是有时候敲空格&#xff0c;视频没办法播放&#xff0c;反而会回退一帧&#xff0c;经过摸索发现了一个解决办法&#xff1a; 点击编辑---首选项 然后选择“音频硬件” 然后选择正确的默认输出&#xff0c;点击确定即可

Android 13 - Media框架(6)- NuPlayer::Source

Source 在播放器中起着拉流&#xff08;Streaming&#xff09;和解复用&#xff08;demux&#xff09;的作用&#xff0c;Source 设计的好坏直接影响到播放器的基础功能&#xff0c;我们这一节将会了解 NuPlayer 中的通用 Source&#xff08;GenericSource&#xff09;关注本地…

【LeetCode】224. 基本计算器

224. 基本计算器&#xff08;困难&#xff09; 方法&#xff1a;双栈解法 思路 我们可以使用两个栈 nums 和 ops 。 nums &#xff1a; 存放所有的数字ops &#xff1a;存放所有的数字以外的操作&#xff0c;/- 也看做是一种操作 然后从前往后做&#xff0c;对遍历到的字符做…

万字精讲——数据结构栈与队列必会OJ练习

W...Y的主页 &#x1f495; 代码库分享 &#x1f60a; 在之前的博客中&#xff0c;我们学习了栈与队列的基本内容&#xff0c;并且实现了栈与队列。今天我们进行刷题训练&#xff0c;走进栈与队列的世界中去感受一番&#xff01;&#xff01;&#xff01; 目录 括号匹配问题…

redis 7高级篇1 redis的单线程与多线程

一 redis单线程与多线程 1.1 redis单线程&多线程 1.redis的单线程 redis单线程主要是指Redis的网络IO和键值对读写是由一个线程来完成的&#xff0c;Redis在处理客户端的请求时包括获取 (socket 读)、解析、执行、内容返回 (socket 写) 等都由一个顺序串行的主线程处理…

【VsCode】SSH远程连接Linux服务器开发,搭配cpolar内网穿透实现公网访问(1)

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…

synchronized锁升级

在 Java SE 1.6中&#xff0c; 锁 一共有 4 种状 态 &#xff0c; 级别 从低到高依次是&#xff1a;无 锁 状 态 、偏向 锁 状 态 、 轻 量 级锁 状 态和重量 级锁 状 态 &#xff0c; 这 几个状 态 会随着 竞 争情况逐 渐 升 级 。 锁 可以升 级 但不能降 级 &#xff0c;意味…

mysql的登录与退出

mysql是c/s架构&#xff0c;意味着同时要有客户端和服务端 1 找到客户端。mysql.exe的安装目录 打开命令行 2 输入对应的服务器的ip&#xff0c;如果是本地&#xff0c;就是Localhost&#xff0c;如果是远程服务器&#xff0c;那就输入对应ip/域名。并且指定mysql监听的端口 …

workbench连接MySQL8.0错误 bad conversion 外部组件 异常

阿里云搭建MySQL实用的版本是8.0 本地安装的版本是: workbench 6.3 需要升级到&#xff1a; workbench 8.0 https://dev.mysql.com/downloads/workbench/

elment-ui中使用el-steps案例

el-steps案例 样式 代码 <div class"active-box"><div class"active-title">请完善</div><el-steps :active"active" finish-status"success" align-center><el-step title"第一步" /><…

SpringCloud入门实战(十四)Sentinel微服务流量防卫兵简介

&#x1f4dd; 学技术、更要掌握学习的方法&#xff0c;一起学习&#xff0c;让进步发生 &#x1f469;&#x1f3fb; 作者&#xff1a;一只IT攻城狮 &#xff0c;关注我&#xff0c;不迷路 。 &#x1f490;学习建议&#xff1a;1、养成习惯&#xff0c;学习java的任何一个技术…

2023年高教社杯数学建模思路 - 复盘:光照强度计算的优化模型

文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米&#xff0c;宽为12米&…