常日，这类需求在客户端运用中不太会用到，但是在后真个各种统计剖析模块会常常碰到。比如：通过折线图、柱状图、雷达图等可视化形式，更直不雅观的展现和剖析经营状况或系统运行情形。这里我们将引入的数据可视化组件库 ECharts来帮助我们完成这样的任务。
ECharts简介ECharts是百度开源的一个前端组件。它是一个利用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，供应直不雅观，交互丰富，可高度个性化定制的数据可视化图表。
它供应了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的舆图、热力争、线图，用于关系数据可视化的关系图、treemap、朝阳图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还供应了自定义系列，只须要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合利用而不须要操心其它事情。
你可以不才载界面下载包含所有图表的构建文件，如果只是须要个中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择须要的图表类型后自定义构建。
官方网站：https://www.echartsjs.com/zh/index.html案例页面：https://www.echartsjs.com/examples/zh/index.html动手试一试第一步：创建一个根本Spring Boot运用，或者拿上一节的工程chapter4-1（仓库地址见文末）来进行加工。
第二步：在pom.xml中引入Web运用须要的web模块和模板引擎thymeleaf模块，比如用Thymeleaf的时候：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
第三步：编写一个Controller，将/路径的要求，映射到index.html页面
@Controllerpublic class HelloController { @GetMapping("/") public String index(ModelMap map) { return "index"; }}
第四步：在resources/templates目录下创建index.html页面，详细内容如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" /> <title>Spring Boot中利用ECharts</title> <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script></head><body><div id="main" style="width: 1000px;height:400px;"></div></body><script type="text/javascript"> // 初始化ECharts组件到id为main的元素上 let myChart = echarts.init(document.getElementById('main')); // 定义图标的配置项 let option = { title: { text: 'Spring Boot中利用ECharts' }, tooltip: {}, // x轴配置 xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // y轴配置 yAxis: {}, series: [{ // 数据集（也可以从后真个Controller中传入） data: [820, 932, 901, 934, 1290, 1330, 1320], // 图表类型，这里利用line，为折线图 type: 'line' }] }; myChart.setOption(option);</script></html>
在页面内容中紧张包含三部分：
<head>中通过<script>标签引入ECharts的组件JS，这里利用了bootcss的免费公共cdn。如果用于自己生产环境，不建议利用这类免费CDN的JS或者CSS等静态资源。可以从官网下载所需的静态内容，放到Spring Boot的静态资源位置（如果不知道在哪，可见上一篇），或是放到自己公司的静态资源管理的做事器上，实现动静分离。<body>中定义了一个id为main的<div>标签，这个标签后续将用来渲染EChart组件末了的一段<script>内容则是详细的EChart图标的展现初始化和配置。详细配置内容可见代码中的注释信息。第五步：启动运用，访问localhost:8080，如果上面操作均无差错，那我们就会得到类似下面的折线图：
关于ECharts图表的调试，官方还供应了一个在线工具，有兴趣的读者可以点击这里考试测验一下。
更多本系列免费教程连载「点击进入汇总目录」
代码示例本文的干系例子可以查看下面仓库中的chapter4-2目录：
Github：https://github.com/dyc87112/SpringBoot-Learning/Gitee：https://gitee.com/didispace/SpringBoot-Learning/如果您以为本文不错，欢迎Star支持，您的关注是我坚持的动力！
