第四步:在resources/templates
目录下创建index.html
页面,具体内容如下:
Spring Boot中使用ECharts
在页面内容中主要包含三部分:
<head>
中通过<script>
标签引入ECharts的组件JS,这里使用了bootcss的免费公共cdn。如果用于自己生产环境,不建议使用这类免费CDN的JS或者CSS等静态资源。可以从官网下载所需的静态内容,放到Spring Boot的静态资源位置(如果不知道在哪,可见上一篇),或是放到自己公司的静态资源管理的服务器上,实现动静分离。<body>
中定义了一个id为main的<div>
标签,这个标签后续将用来渲染EChart组件- 最后的一段
<script>
内容则是具体的EChart图标的展现初始化和配置。具体配置内容可见代码中的注释信息。
第五步:启动应用,访问localhost:8080
,如果上面操作均无差错,那我们就会得到类似下面的折线图:
关于ECharts图表的调试,官方还提供了一个在线工具,有兴趣的读者可以点击这里尝试一下。