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

6-1-1 利用AI完成一个可视化看板

news 2025/7/3 14:42:16

第一步：毫无头绪，跟AI要个初步的页面

想做一个看板，但是毫无头绪，直接问AI：想做一个数据看板，主题不限，用echarts完成静态HTML页面。

以下是AI反馈的代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>销售数据看板</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 20px;
            background-color: #f0f2f5;
        }
        .dashboard {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        #mainTitle {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            grid-column: 1 / -1;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <h1 id="mainTitle">2023年销售数据看板</h1>
        
        <!-- 图表容器 -->
        <div class="chart-container" style="height:400px" id="monthlySales"></div>
        <div class="chart-container" style="height:400px" id="categoryPie"></div>
        <div class="chart-container" style="height:400px" id="salesTrend"></div>
        <div class="chart-container" style="height:400px" id="regionMap"></div>
    </div>

    <script>
        // 模拟数据
        const monthlyData = {
            months: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            sales: Array.from({length:12}, () => Math.floor(Math.random()*500 + 300))
        };

        const categoryData = [
            { value: 1560, name: '电子产品' },
            { value: 1048, name: '服装服饰' },
            { value: 735, name: '家居用品' },
            { value: 580, name: '食品饮料' }
        ];

        // 初始化图表
        function initCharts() {
            // 月度柱状图
            const barChart = echarts.init(document.getElementById('monthlySales'));
            barChart.setOption({
                title: { text: '月度销售额', left: 'center' },
                tooltip: { trigger: 'axis' },
                xAxis: {
                    type: 'category',
                    data: monthlyData.months
                },
                yAxis: { type: 'value' },
                series: [{
                    data: monthlyData.sales,
                    type: 'bar',
                    itemStyle: { color: '#5470c6' },
                    barWidth: '60%'
                }]
            });

            // 分类饼图
            const pieChart = echarts.init(document.getElementById('categoryPie'));
            pieChart.setOption({
                title: { text: '品类占比', left: 'center' },
                tooltip: { trigger: 'item' },
                series: [{
                    type: 'pie',
                    radius: '60%',
                    data: categoryData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });

            // 趋势折线图
            const lineChart = echarts.init(document.getElementById('salesTrend'));
            lineChart.setOption({
                title: { text: '销售趋势分析', left: 'center' },
                tooltip: { trigger: 'axis' },
                xAxis: {
                    type: 'category',
                    data: monthlyData.months
                },
                yAxis: { type: 'value' },
                series: [{
                    data: monthlyData.sales,
                    type: 'line',
                    smooth: true,
                    lineStyle: { width: 3 },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 1, color: '#ffffff' }
                        ])
                    }
                }]
            });

            // 地图（需要额外地图数据）
            const mapChart = echarts.init(document.getElementById('regionMap'));
            mapChart.setOption({
                title: { text: '区域销售分布', left: 'center' },
                tooltip: { trigger: 'item' },
                visualMap: {
                    min: 0,
                    max: 2000,
                    text: ['高', '低'],
                    realtime: false,
                    calculable: true,
                    inRange: { color: ['#e0f3f8', '#43a2ca'] }
                },
                series: [{
                    type: 'map',
                    map: 'China',
                    data: [
                        { name: '广东', value: 1892 },
                        { name: '浙江', value: 1567 },
                        { name: '上海', value: 1420 },
                        // 其他省份数据...
                    ],
                    emphasis: { label: { show: true } }
                }]
            });
        }

        // 窗口大小变化时自适应
        window.onresize = () => {
            echarts.init(document.getElementById('monthlySales')).resize();
            echarts.init(document.getElementById('categoryPie')).resize();
            echarts.init(document.getElementById('salesTrend')).resize();
            echarts.init(document.getElementById('regionMap')).resize();
        };

        // 初始化
        window.onload = initCharts;
    </script>
</body>
</html>

第二步：检查引用的链接是否可用

确认以下CDN地址是否可用，很简单，把js文件地址贴进浏览器看看是否有内容：

贴进浏览器中，显示如下，有内容，可用。

第三步：保存成HTML文件

把代码贴进脚本编辑器中，保存成html文档。

第四步：看看效果

右键，打开于，浏览器，选择一个浏览器。

显示成这样：

第五步：修改修改样式，添加一些内容

美化看板，加标题，加导航条，改整体配色。把代码扔给AI，让AI改完整体反馈给你~

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>销售数据看板</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style>
    :root {
        --primary-bg: #fff9f3;
        --card-bg: #ffffff;
        --text-color: #5a4e42;
    }

    /* 暗色主题 */
    .dark-theme {
        --primary-bg: #2d2d2d;
        --card-bg: #3d3d3d;
        --text-color: #e0e0e0;
    }

    body {
        margin: 0;
        background-color: var(--primary-bg);
        color: var(--text-color);
        font-family: "Microsoft YaHei", sans-serif;
        transition: background 0.3s ease;
    }

    .navbar {
        background: var(--card-bg);
        padding: 1rem 2rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1400px;
        margin: 0 auto;
    }

    .nav-links {
        display: flex;
        gap: 2rem;
    }

    .nav-links a {
        color: var(--text-color);
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .nav-links a:hover {
        background: rgba(0,0,0,0.1);
    }

    .dashboard {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 1400px;
        margin: 2rem auto;
        padding: 0 2rem;
    }

    .chart-container {
        background: var(--card-bg);
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }

    #mainTitle {
        text-align: center;
        margin: 2rem 0;
        grid-column: 1 / -1;
        color: var(--text-color);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .dashboard {
            grid-template-columns: 1fr;
            padding: 0 1rem;
        }

        .nav-links {
            display: none;
        }
    }
</style>
</head>
<body>
<nav class="navbar">
    <div class="nav-container">
        <h2>销售数据平台</h2>
        <div class="nav-links">
            <a href="#dashboard">数据看板</a>
            <a href="#analysis">数据分析</a>
            <a href="#report">报表导出</a>
            <a href="#" onclick="toggleTheme()">主题切换</a>
        </div>
    </div>
</nav>

<div class="dashboard">
    <h1 id="mainTitle">2023年销售数据看板</h1>

    <div class="chart-container" style="height:400px" id="monthlySales"></div>
    <div class="chart-container" style="height:400px" id="categoryPie"></div>
    <div class="chart-container" style="height:400px" id="salesTrend"></div>
    <div class="chart-container" style="height:400px" id="regionBar"></div>
</div>

<script>
// 配色方案
const lightColors = {
    bar: '#ffb3c6',
    pie: ['#ffd8a8', '#c8e7ff', '#d0f0c0', '#ffe6e6'],
    lineArea: ['#ffb3c6', '#ffffff'],
    regionBar: ['#ffd8a8', '#c8e7ff']
};

const darkColors = {
    bar: '#d64161',
    pie: ['#4b8bbe', '#6b5b95', '#d64161', '#feb236'],
    lineArea: ['#40407a', '#2d2d2d'],
    regionBar: ['#40407a', '#34ace0']
};

let currentTheme = 'light';

// 模拟数据
const monthlyData = {
    months: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    sales: Array.from({length:12}, () => Math.floor(Math.random()*500 + 300))
};

const categoryData = [
    { value: 1560, name: '电子产品' },
    { value: 1048, name: '服装服饰' },
    { value: 735, name: '家居用品' },
    { value: 580, name: '食品饮料' }
];

const regionData = [
    { name: '华东地区', value: 2890 },
    { name: '华南地区', value: 2450 },
    { name: '华北地区', value: 1980 },
    { name: '西南地区', value: 1670 },
    { name: '东北地区', value: 1320 }
];

function initCharts() {
    // 初始化所有图表...
    initBarChart();
    initPieChart();
    initLineChart();
    initRegionChart();
}

function initBarChart() {
    const chart = echarts.init(document.getElementById('monthlySales'));
    chart.setOption({
        title: { text: '月度销售额', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: monthlyData.months,
            axisLabel: { color: 'var(--text-color)' }
        },
        yAxis: {
            type: 'value',
            axisLabel: { color: 'var(--text-color)' }
        },
        series: [{
            data: monthlyData.sales,
            type: 'bar',
            itemStyle: { color: currentTheme === 'light' ? lightColors.bar : darkColors.bar },
            barWidth: '60%'
        }]
    });
}

function initPieChart() {
    const chart = echarts.init(document.getElementById('categoryPie'));
    chart.setOption({
        title: { text: '品类占比', left: 'center' },
        tooltip: { trigger: 'item' },
        color: currentTheme === 'light' ? lightColors.pie : darkColors.pie,
        series: [{
            type: 'pie',
            radius: '60%',
            data: categoryData,
            label: { color: 'var(--text-color)' },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            }
        }]
    });
}

function initLineChart() {
    const chart = echarts.init(document.getElementById('salesTrend'));
    chart.setOption({
        title: { text: '销售趋势分析', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: monthlyData.months,
            axisLabel: { color: 'var(--text-color)' }
        },
        yAxis: {
            type: 'value',
            axisLabel: { color: 'var(--text-color)' }
        },
        series: [{
            data: monthlyData.sales,
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 3,
                color: currentTheme === 'light' ? lightColors.bar : darkColors.bar
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: currentTheme === 'light' ? lightColors.lineArea : darkColors.lineArea },
                    { offset: 1, color: currentTheme === 'light' ? lightColors.lineArea : darkColors.lineArea }
                ])
            }
        }]
    });
}

function initRegionChart() {
    const chart = echarts.init(document.getElementById('regionBar'));
    chart.setOption({
        title: { text: '区域销售额对比', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: regionData.map(item => item.name),
            axisLabel: {
                color: 'var(--text-color)',
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: { color: 'var(--text-color)' }
        },
        series: [{
            data: regionData.map(item => item.value),
            type: 'bar',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: currentTheme === 'light' ? lightColors.regionBar : darkColors.regionBar },
                    { offset: 1, color: currentTheme === 'light' ? lightColors.regionBar : darkColors.regionBar }
                ])
            },
            barWidth: '40%',
            label: {
                show: true,
                position: 'top',
                color: 'var(--text-color)'
            }
        }]
    });
}

// 主题切换
function toggleTheme() {
    document.body.classList.toggle('dark-theme');
    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
    refreshCharts();
}

// 图表刷新
function refreshCharts() {
    echarts.dispose(document.getElementById('monthlySales'));
    echarts.dispose(document.getElementById('categoryPie'));
    echarts.dispose(document.getElementById('salesTrend'));
    echarts.dispose(document.getElementById('regionBar'));
    initCharts();
}

// 响应式调整
window.addEventListener('resize', () => {
    [document.getElementById('monthlySales'),
     document.getElementById('categoryPie'),
     document.getElementById('salesTrend'),
     document.getElementById('regionBar')].forEach(dom => {
        echarts.getInstanceByDom(dom)?.resize();
    });
});

window.onload = initCharts;
</script>
</body>
</html>

作业list：

lizx   图表6-1-CSDN博客

jiyy  数据可视化看板-CSDN博客

yuanh  数据可视化看板-CSDN博客

tianyx  6-1看板-CSDN博客

liuzj  制作小组项目看板框架-CSDN博客

gaojy  3.21 框架-CSDN博客

liuhn  图表6-1-1-CSDN博客

lirj  6-1-1-CSDN博客

sul  6-1-1-CSDN博客

xuecy   6-1-1-CSDN博客

liyx  6-1-1AI实现看板-CSDN博客

wangxy  6-1制作静态看板-CSDN博客

pengc  6-1超级无敌酷炫美丽帅气高端高雅的霸王茶几运营分析看板-CSDN博客

xiepzh  霸王茶姬运营智慧看板6-1-CSDN博客

wangh 6-2实现看板-CSDN博客

http://www.dtcms.com/a/99809.html

相关文章：

  • 如何监控和优化服务器的 CPU 性能
  • 视频联网平台智慧运维系统：智能时代的城市视觉中枢
  • 记录一次Dell服务器更换内存条报错解决过程No memory found
  • 基于微波光子信道的图像传输系统matlab仿真,调制方式采用OFDM+QPSK,LDPC编译码以及LS信道估计
  • 机器学习——集成学习框架(GBDT、XGBoost、LightGBM、CatBoost)、调参方法
  • 计算机基础
  • 睡眠健康领域的智能硬件设备未来的发展趋势
  • C语言术语
  • 算法刷题记录——LeetCode篇(1.3) [第21~30题](持续更新)
  • 分库分表详解
  • 关于c++的FLOYD算法 P2910 [USACO08OPEN] Clear And Present Danger S 题解
  • Spring Boot 整合 RabbitMQ：注解声明队列与交换机详解
  • 高级SQL技巧
  • Linux（8.6）rsync
  • 33. Java 流程控制语句 If-Then-Else 语句
  • [原创](现代C++ Builder 12指南): 如何使用System.JSON？
  • Gitee批量删除仓库
  • 美食菜谱数据集 | 智能体知识库 | AI大模型
  • 力扣HOT100之普通数组：41. 缺失的第一个正数
  • Cannot find a valid baseurl for repo: centos-sclo-sclo/x86_64
  • Vue实现的表格多选方案支持跨页选择和回显功能
  • DNS网络攻击：原理剖析、危害解读与全面防御指南
  • 【Python LeetCode 专题】每日一题
  • 【20期获取股票数据API接口】如何用Python、Java等五种主流语言实例演示获取股票行情api接口之沪深A股实时最新分时MACD数据及接口API说明文档
  • 本地缓存之Guava Cache
  • Linux CentOS 7 搭建我的世界服务器详细教程 （丐版 使用虚拟机搭建）
  • CTFshow命令执行(55-71)
  • 24_原型和原型链_this
  • GitHub上免费学习工具的精选汇总
  • 数字电路基础