让数据会说话！用DeepSeek+ECharts快速打造高颜值HTML图表（建议收藏）

一、 ECharts 官网

网址：

https://echarts.apache.org/zh/index.html

Echarts一个基于 JavaScript 的开源可视化图表库

进入官网，点击 所有示例 ，一个内容丰富的图表网页即刻呈现，其中收录了海量经典案例。无论是简洁直观的基础曲线图，还是视觉效果绚丽、结构复杂的高阶图表，均能在此找到详实范例，全方位满足不同用户的制图需求与学习参考。

里面示例很多，各位可以先收藏，以后按照自己的需求进行选择适合的图表。

接下来我们用两个示例来学习以下如何在deepseek 等AI 工具的协助下，小白也能制作精美的图表

二、 DeepSeek + ECharts 实战

一、旭日图

先做个简单解释:
旭日图相当于多个饼图的组合，但饼图只能体现一层数据的比例情况，而旭日图不仅可以体现数据比例，还能体现数据层级之间的关系。

复制完整示例代码到记事本，保存，如图所示，我这里保存为“旭日图代码.txt”

提示词:

根据所给文件代码，并理解代码，并根据我给的数据，生成可运行的HTML 文件

我在提示词后面添加了酒类的相关数据，可以根据自己需求进行相关的修改,wineData 如下做个参考，只展示了wineData的结构，数据太长，不好展示

const wineData = [
  {
    name: '葡萄酒',
    children: [
      {
        name: '红葡萄酒',
        children: [
          { name: '5☆', children: [{ name: '拉菲1982' }] },
          { name: '4☆', children: [{ name: '奔富葛兰许' }] }
        ]
      },
      {
        name: '白葡萄酒',
        children: [
          { name: '4☆', children: [{ name: '云雾之湾' }] }
        ]
      }
    ]
  },
  {
    name: '烈酒',
    children: [
      {
        name: '威士忌',
        children: [
          { name: '5☆', children: [{ name: '麦卡伦30年' }] }
        ]
      }
    ]
  },
  {
    name: '啤酒',
    children: [
      {
        name: '精酿',
        children: [
          { name: '4☆', children: [{ name: '罗斯福10号' }] }
        ]
      }
    ]
  }
];

打开deepseek ，操作如下图：

稍等一会儿，DeepSeek就把代码给我们生成出来了。

然后我们点击运行，结果就出来了，如下图：

细节图如下：

一张完整的酒类旭日图就展现在你的面前，效果不用说了吧。

二、生成南丁格尔玫瑰图

我们再来生成一个官网首页的图表吧，就是下面这个图，生成也是轻轻松松

打开示例代码

提示词:

根据所给文件代码，并理解代码，并根据我给的数据，生成可运行的HTML 文件

数据参考如下

  series: [
    {
      name: '武功值',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 100, name: '扫地僧' },
        { value: 98, name: '张三丰' },
        { value: 95, name: '独孤求败' },
        { value: 93, name: '东方不败' },
        { value: 90, name: '张无忌' },
        { value: 88, name: '乔峰' },
        { value: 85, name: '杨过' },
        { value: 83, name: '郭靖' },
        { value: 80, name: '令狐冲' },
        { value: 78, name: '段誉' },
        { value: 75, name: '虚竹' },
        { value: 70, name: '周伯通' }
      ]
    }
  ]

打开deepseek ，操作如下图：

稍等一会儿，DeepSeek就把代码给我们生成出来了。

细节图

新粉丝可能会问生成的代码如何保存呢？
如下图所示，点击右上角的下载即可

下载后的文件是网页文件（xxx.html），浏览器运行即可，如图我以chrome浏览器运行的如下