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

数据可视化这个技能，现在几乎是职场标配。过去想做出专业级图表，要么靠Excel硬撑，要么得花大把时间学复杂工具。但今天这个局面被彻底打破了——DeepSeek加上ECharts，哪怕你是完全零基础，也能在几分钟内生成可以直接运行的HTML图表。这篇文章就手把手带你走一遍完整流程。

一、 ECharts 官网

先说说ECharts这个库。它是Apache基金会旗下的开源可视化解决方案，基于Ja vaScript，能跑在浏览器里。进入官网（https://echarts.apache.org/zh/index.html），点开「所有示例」，你会看到一个巨大的图表示例库。从最基础的折线图、柱状图，到结构复杂的桑基图、关系图，应有尽有。这些示例都配有完整可运行的代码，对学习来说是非常好的蓝本。

建议把官网收藏起来，以后做图的时候直接上去找参考，比自己从零写代码省力太多。

接下来用两个实际案例，演示一下DeepSeek怎么配合ECharts帮我们快速产出图表。

二、 DeepSeek + ECharts 实战

1. 旭日图

先简单解释一下什么是旭日图。它本质上是一组饼图的嵌套组合，但饼图只能展示一层数据的比例关系，而旭日图可以同时呈现多层数据的层级结构，比如大类、子类、具体条目一目了然。

我们来做一个酒类分布的旭日图。打开ECharts官网的旭日图示例，复制完整的示例代码，粘到记事本里，保存为“旭日图代码.txt”。

提示词这样写：

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

然后在提示词后面附上自己的数据。下面是一个酒类数据的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代码。点击「运行」，就能看到旭日图的效果。

一张漂亮的酒类层级图就展现在眼前了。各个品类、子品类、具体酒款的关系清晰可见，视觉效果也很不错。

2. 南丁格尔玫瑰图

再来一个经典的南丁格尔玫瑰图。从官网首页找到这个图表的示例，同样复制代码保存为“南丁格尔玫瑰图.txt”。

提示词和上一步一样，然后附上自己准备的数据。这里用金庸小说里的武功值排名做一个有趣的小案例：

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的运行结果界面，点击右上角的「下载」按钮，文件会自动保存为＜文件名＞.html。这个文件是网页格式，用浏览器直接打开就能看到图表。

用Chrome打开的效果非常流畅，交互、动画都保留着。你也可以把HTML文件分享给同事，或者嵌入到自己的项目里。

总的来说，DeepSeek + ECharts这套组合拳，极大地降低了数据可视化的门槛。你不需要学会Ja vaScript，不需要理解canvas或SVG，只需要会写提示词、会准备JSON结构的数据，就能产出专业级别的图表。这个流程值得反复练习，遇到新的图表需求，直接套用即可。