第四步:在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,如果上面操作均无差错,那我们就会得到类似下面的折线图:

java泛微oa系统开发_java泛微oa系统开发

关于ECharts图表的调试,官方还提供了一个在线工具,有兴趣的读者可以点击这里尝试一下。

java泛微oa系统开发_JAVA_02