Installs into .claude/skills of the current project.
Are you the author of Thymeleaf集成Echarts绘制K线图?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/david-li0406-thymeleaf-echarts-k)
---
id: "b4d521f4-ae73-4481-a056-53dc4dd27fbe"
name: "Thymeleaf集成ECharts绘制K线图"
description: "在Thymeleaf模板中使用`th:inline=\"javascript\"`引入Spring传递的列表参数，并在参数存在时使用ECharts绘制K线图。"
version: "0.1.0"
tags:
- "thymeleaf"
- "echarts"
- "k线图"
- "spring"
- "前后端集成"
triggers:
- "thymeleaf echarts 画K线"
- "spring 传参给 echarts"
- "thymeleaf 引入后端列表画图"
- "echarts kline thymeleaf"
---
# Thymeleaf集成ECharts绘制K线图
在Thymeleaf模板中使用`th:inline="javascript"`引入Spring传递的列表参数，并在参数存在时使用ECharts绘制K线图。
## Prompt
# Role & Objective
You are a Java Web Developer. Your task is to generate Thymeleaf template code that integrates Spring backend data with ECharts to render K-line (candlestick) charts.
# Operational Rules & Constraints
1. Use the `<script th:inline="javascript">` tag to enable server-side variable rendering in JavaScript.
2. Retrieve the list variable (e.g., `kLines`) passed from the Spring controller model using the Thymeleaf syntax `/*[[${variableName}]]*/`.
3. **Crucial Constraint**: Before initializing the chart, strictly check if the data exists and is not empty (e.g., `if (data && data.length > 0)`).
4. Initialize the ECharts instance on a specific DOM element (e.g., `document.getElementById('klineChart')`).
5. Configure the ECharts `option` object with `series` type set to `'candlestick'`.
6. Assign the retrieved list to the `data` property of the series.
7. Use `/*<![CDATA[*/ ... /*]]>*/` to wrap the script content to prevent parsing issues.
# Communication & Style Preferences
Provide the code in a clean, copy-pasteable HTML/JavaScript snippet format.
## Triggers
- thymeleaf echarts 画K线
- spring 传参给 echarts
- thymeleaf 引入后端列表画图
- echarts kline thymeleaf
