之前，上篇发过树状图，饼状图，都是一层数据展示，今天，项目需求，多层数据树状展示，本篇为基础，简单封装，上手即用，共勉！

文章最后附下载地址。

如图展示：

ECharts 是一个基于 JavaScript 的开源可视化库，用于创建交互式和动态的图表和数据可视化。在 ECharts 中，`option` 是一个 JSON 对象，用于配置图表的各种属性和样式。

在 `option` 对象中，可以设置以下常用的属性：

大数据可视化html页面切图的时候，一般用echarts来实现，文档比较全面而且 使用的人多，所以当你遇到问题也比较好百度，基本别人都遇到过或给出解决方案，所以比较有优势，用highcharts的以前比较多，现在倒是不太多了，至少切图网现在比较少用了，一般用charts，下面附折线图的一些常规参数设置。

ECharts 怎么安装?

echarts 是js代码 , 本身是属于网页运行的代码 , 平时使用 , 我们只需要把它

最近，公司项目需要做本年统计数据展示，首先就想到了echarts，在实际项目使用中，对代码进行封装，利于快速开发，针对不同数据展示。上手即用，满足常规统计展示。高级炫酷展示，本文不做讲解。

饼状图：

饼状图，带有统计和针对不同模块选择，模拟数据，部分代码展示。文章底部附完整代码。

什么是ECharts

ECharts是由百度基于html5 Canvas打造的数据可视化图表，使用 JavaScript 实现的开源可视化库。提供了直观，生动，可交互，可高度个性化定制的数据可视化图表，赋予了用户对数据进行挖掘、整合的能力。ECharts支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题、详情、气泡、图例、值域、数据区域、时间轴、工具箱等可交互组件，丰富了图表的展现形式并增强了用户体验。

1.下载echarts.js（百度搜索echarts官网）

2.将echarts.js放入项目中

3.创建echarts.jsp(在jsp中引入<script src="echarts.js"></script>)

4.浏览器访问

如果对您有帮助，麻烦帮忙点个赞以示鼓励，谢谢！

PS：

红色字体解决：x轴标题装不下（主要通过标题旋转解决）