零基础2分钟掌握！AI一键生成ECharts折线/柱状图/饼图/雷达图等等图表实战指南

莫非技术栈

已于 2025-03-01 19:50:37 修改

阅读量2.4k

点赞数 27

分类专栏：人工智能文章标签：人工智能 echarts 前端

于 2025-03-01 19:43:51 首次发布

本文链接：https://blog.csdn.net/m0_37825219/article/details/145951960

版权

人工智能专栏收录该内容

8 篇文章

订阅专栏

零基础2分钟掌握！AI一键生成ECharts折线/柱状图/饼图/雷达图等等图表实战指南

📌 本文目标

无需编程基础！ 通过AI工具快速生成交互式数据图表，并直接在本站（ECharts图表）实现实时编辑、预览、导出。
适用场景：数据分析报告、业务趋势展示、运营数据可视化等场景。

🌟 为什么选择「AI + ECharts」？

专业级可视化：支持折线图/柱状图/饼图/雷达图/K线图等30+图表类型
智能数据处理：AI自动识别数据格式生成对应图表
无缝集成：本站独家支持ECharts实时渲染

🛠️ 前置准备

无需注册（访问）
准备数据或者需求描述（示例：2024年人口年龄分布图）
浏览器访问本站ECharts编辑器（点击进入）

🚀 快速入门：三步生成柱状图

步骤1：用自然语言描述需求

示例文案：
2024年人口年龄分布图

步骤2：AI生成ECharts代码

向AI输入提示词：
👉 提示词模板

你是一个ECharts图表专家，请严格按照以下格式生成标准的ECharts配置代码。
格式要求：
1. 必须返回一个标准的JavaScript对象，以'option = {'开头
2. 必须包含完整的配置项：title, tooltip, legend(如果需要), grid等
3. 所有的数据必须是静态的，不能包含函数调用或动态生成的数据
4. 所有的样式必须通过配置项设置，不能包含外部CSS或JavaScript代码
5. 图表大小和位置必须使用百分比，不能使用固定像素值
6. 文本大小应该适中，标题不超过16px，其他文本不超过14px
7. 确保所有的数据格式正确，数值型数据不要带引号
8. 请直接返回完整的ECharts配置代码，不要包含任何解释或其他内容。
9. 确保代码可以直接在ECharts中运行，遵循上述格式要求。
当前图表类型是：饼图
用户的需求是：
[粘贴需求描述]

AI生成结果示例：
（此处留图位置：AI生成代码截图）

// 示例生成代码
option = {
    title: {
        text: '2024年中国人口年龄分布',
        textStyle: {
            fontSize: 16
        },
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} 万人 ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        textStyle: {
            fontSize: 14
        }
    },
    series: [
        {
            name: '人口年龄分布',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [
                {value: 85798, name: '16-59岁'},
                {value: 31031, name: '60岁及以上'},
                {value: 24000, name: '0-15岁'}  // 这里0-15岁数据暂时取一个估算值
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

步骤3：在本站一键渲染

复制AI生成的代码
打开本站ECharts编辑器
粘贴到左侧代码区 → 右侧实时显示图表
左边可以手动微调，修改数据或者名称
可以下载或者保存结果

在这里插入图片描述

🔥 进阶技巧：动态折线图生成

动态数据提示词

你是一个ECharts图表专家，请严格按照以下格式生成标准的ECharts配置代码。
格式要求：
1. 必须返回一个标准的JavaScript对象，以'option = {'开头
2. 必须包含完整的配置项：title, tooltip, legend(如果需要), grid等
3. 所有的数据必须是静态的，不能包含函数调用或动态生成的数据
4. 所有的样式必须通过配置项设置，不能包含外部CSS或JavaScript代码
5. 图表大小和位置必须使用百分比，不能使用固定像素值
6. 文本大小应该适中，标题不超过16px，其他文本不超过14px
7. 确保所有的数据格式正确，数值型数据不要带引号
8. 请直接返回完整的ECharts配置代码，不要包含任何解释或其他内容。
9. 确保代码可以直接在ECharts中运行，遵循上述格式要求。
当前图表类型是：折线图
用户的需求是：
生成近7日网站访问量的折线图，要求：
- X轴显示日期（2024-03-01至03-07）
- Y轴显示UV（单位：次）
- 线条平滑且带数据点标记
- 添加tooltip提示框

生成结果：
（此处留图位置：折线图效果图）

option = {
    xAxis: {
        type: 'category',
        data: ['03-01','03-02','03-03','03-04','03-05','03-06','03-07']
    },
    yAxis: {
        type: 'value',
        name: 'UV/次'
    },
    series: [{
        data: [450, 620, 800, 750, 920, 870, 1100],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
            width: 3
        },
        tooltip: {
            show: true
        }
    }]
};