文章目录

  • 一、什么是 Echarts
  • 1.1 简介
  • 1.2 主要实现
  • 二、Echarts 的特色
  • 三、如何制作一个简单 Echarts 图表
  • 3.1 准备放置图表的容器
  • 3.2 对容器进行初始化和实例化
  • 3.3 添加选项配置并加载生成图表
  • 四、Echarts 常用操作
  • 4.1 增加新的数据或配置
  • 4.2 显示/隐藏加载效果
  • 4.3 清空图表和释放图表
  • 4.4 图表自适应方法
  • 4.5 图表点击事件(事件交互)
  • 五、前后端数据交互
  • 5.1 前端代码
  • 5.2 后端代码
  • 六、数据处理问题
  • 6.1 JS中将JSON字符串转JSON对象
  • 6.2 中文乱码问题
  • 6.3 数据格式的问题


一、什么是 Echarts

1.1 简介

Echarts 是由百度前端数据可视化团队开发的一款开源免费且功能强大的具有互动图形用户界面的数据可视化产品，是纯 JavaScript 实现的图表库，它提供了非常多直观生动的，可以动态变化的图表（折线图，柱状图，散点图，饼图；地图，雷达图,仪表盘等）; 同时可以流畅的运行在PC和移动设备上，而且兼容当前绝大部分主流浏览器，像谷歌，火狐，Safari等等。不过在IE6上的动画效果可能没有前面几个浏览器那么好。

1.2 主要实现

底层依赖轻量级的 Canvas 类库 ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出各种各样的图表。

echarts服务器 java生成图片 java图表echarts_js

二、Echarts 的特色

和 Excel，Matlab 等绘图工具相比，Echarts也有自己的独特之处。在平常项目中比较常见的一些特性有：

  • 拖拽重计算：这个特性带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。
  • 数据视图：用户可以直接查看图表的源数据，并且可以对它们进行编辑，用最独特的方式去呈现数据。
  • 图表类型切换：Echarts 提供了动态类型切换，让用户随心所欲的切换到他所需要的图表类型和堆叠状态。
  • 图例开关：Echarts 提供了方便快捷的多维度图例开关，可以随时切换到你所关心的数据系列。
  • 事件交互：可以捕获的用户交互和数据变化事件实现图表间或者与外界的联动。

其他还有个性定制，多维度堆积，子区域地图模式，标注/标线等特性，这里不再赘述，具体解释可以参考官方手册中的说明。

三、如何制作一个简单 Echarts 图表

3.1 准备放置图表的容器

新建一个 HTML 或者是 JSP 文件，同时要准备具有宽高的 DOM 来存放图表，接着引入 Echarts 文件；引入时有两种方式，分别是模块化单文件引入和标签式单文件引入。

echarts服务器 java生成图片 java图表echarts_可视化_02

3.2 对容器进行初始化和实例化

主要是调用 Echarts 自身的 init() 来完成，它需要将容器作为参数传入 init() 方法中，最后将这个容器赋值给变量方便调用。但是不能多次调用初始化方法，不然会重复生成多个图表，所以如果你是将生成图表的方法写在一个函数里的话，最好将 echarts.init() 方法放在函数的外面，避免重复调用函数的同时也调用了这个方法。

echarts服务器 java生成图片 java图表echarts_java_03

3.3 添加选项配置并加载生成图表

配置好图表的选项并赋值给一个变量(如这里的 option)，里面可以包含图表实例所需要的任何配置（有些配置没写也会有默认的格式，如 color 默认有20种颜色），最后使用 setOption() 的方法加载图表选项生成图表。

echarts服务器 java生成图片 java图表echarts_java_04


完整代码：

echarts服务器 java生成图片 java图表echarts_javascript_05

四、Echarts 常用操作

4.1 增加新的数据或配置

如果需要对图表增加新的数据或配置，可以继续对图表使用 setOption() 方法，或者是先将配置存入到option 变量中再调用 setOption()。

echarts服务器 java生成图片 java图表echarts_java_06

4.2 显示/隐藏加载效果

Echarts 的 showLoading() 和 hideLoading() 方法可以起到过渡的作用，提高视觉效果。

echarts服务器 java生成图片 java图表echarts_js_07

4.3 清空图表和释放图表

如果需要再同一个容器中轮流存放不同的图表时，可以使用 clear() 来清空容器中的内容，清空后实例可用。如果要直接释放容器，可以使用 dispose()，释放后实例不再可用。

有时候重新加载图表 option 的时候, 没有动画效果, 可以先调用 clear() 方法, 然后再重画就可以了

4.4 图表自适应方法

由于图表外部区域大小发生改变图表并不知道，所以需要我们主动调用 Echarts 提供的重置图表区域大小 resize 方法，常见如 window.onresize = myChart.resize。

4.5 图表点击事件(事件交互)

在图表加载完后使用实例方法 on(eventName, eventListener)，可以实现点击事件；它有两个参数，第一个是事件类型名字，是字符串的形式，可选的值有：CLICK（点击）， MOUSEOUT（鼠标离开数据图形）等等；第二个是事件函数名，在事件触发时执行需要执行的函数。同时事件函数可以传回来一个参数，里面包含了与图表相关的各种信息。

echarts服务器 java生成图片 java图表echarts_java_08


注意：param参数几个常用属性

param.name: 对应横坐标的名字
param.type: 触发事件的类型
param.data: 被点击系列的数值
param.dataIndex: 被点击项所在的位置，从0开始
param.seriesIndex: 被点击项所在系列的位置，从0开始

五、前后端数据交互

最常用的就是使用Ajax方法向后端发送异步请求。结合图表的点击事件，可以获得相应的参数，并将参数返回给后台，这个在点击图表查询明细的时候很有用。

5.1 前端代码

这里需要注意的是使用实例方法 setOption() 来新增或替换原来的图表配置；还有就是要注意后台传回来的数据的格式，一定是要符合 Echarts 要求的。

echarts服务器 java生成图片 java图表echarts_可视化_09

5.2 后端代码

在传递数据之前，可以使用 json-lib 或者 jackson 等工具将数据转换成具有 json 格式的字符串。

echarts服务器 java生成图片 java图表echarts_java_10

六、数据处理问题

6.1 JS中将JSON字符串转JSON对象

var jsonObj = eval（'('+str+')')
var jsonObj = str.parseJSON();
var jsonObj = JSON.parse(str);

6.2 中文乱码问题

如果部署项目使用的是 Tomcat 则不会有这种中文乱码问题，但如果是使用 Weblogic 服务器部署，则在传递包含中文的字符串时会出现数据打包异常以及中文乱码。在编写代码时我们也不知道最后的代码会被部署到哪种服务器，而且我们也应该保证代码的通用性和复用性，所以在任何需要传递中文的情况下都应该考虑到这个问题。

之前想到的一个解决方案是在后端使用 URLEncoder.encode(str, "UTF-8") 进行编码，在前端接收时使用 decodeURI(str) 方法进行解码。当然这种方法并不能保证所有情况都能适用，还有其它的方法可以自行 Google。

6.3 数据格式的问题

在数据交互时尽量选择 List, Map, 数组等数据格式进行传递，这样在图表配置参数的时候较为方便。后端可以使用 json-lib 或者是 jackson 工具将数据转换成 json 格式的字符串，然后再传回给前端页面。