AutoSkill Thymeleaf集成ECharts绘制K线图

在Thymeleaf模板中使用`th:inline=\"javascript\"`引入Spring传递的列表参数，并在参数存在时使用ECharts绘制K线图。

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/chinese_gpt4_8/thymeleaf集成echarts绘制k线图" ~/.claude/skills/ecnu-icalk-autoskill-thymeleaf-echarts-k && rm -rf "$T"

manifest: SkillBank/ConvSkill/chinese_gpt4_8/thymeleaf集成echarts绘制k线图/SKILL.md

source content

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

Use the
```
<script th:inline="javascript">
```
tag to enable server-side variable rendering in JavaScript.
Retrieve the list variable (e.g.,
```
kLines
```
) passed from the Spring controller model using the Thymeleaf syntax
```
/*[[${variableName}]]*/
```
.
Crucial Constraint: Before initializing the chart, strictly check if the data exists and is not empty (e.g.,
```
if (data && data.length > 0)
```
).
Initialize the ECharts instance on a specific DOM element (e.g.,
```
document.getElementById('klineChart')
```
).
Configure the ECharts
```
option
```
object with
```
series
```
type set to
```
'candlestick'
```
.
Assign the retrieved list to the
```
data
```
property of the series.
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