让数据会说话！用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浏览器运行的如下