Thymeleaf集成echarts绘制k线图
Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/chinese_gpt4_8/thymeleaf集成echarts绘制k线图
在Thymeleaf模板中使用`th:inline="javascript"`引入Spring传递的列表参数，并在参数存在时使用ECharts绘制K线图。From its SKILL.md
npx -y skills add ECNU-ICALK/AutoSkill --skill thymeleaf集成echarts绘制k线图Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
SKILL.md
1.9 KB, 367 tokens by cl100k_base, as published. Nobody here has run it
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
optionobject withseriestype set to'candlestick'. - Assign the retrieved list to the
dataproperty 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
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.