• 简介

相信很多小伙伴工作中都会遇到统计问题,需要将数据通过柱状图或折线图的方式展示出来。图表插件有很多种,比如说:Highcharts、Chart.js、jFreeChart等等,今天给大家介绍另外一款图表插件---ECharts。

ECharts是一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

ECharts支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

详情可以参考:http://echarts.baidu.com/echarts2/index.html

  • 基本使用(模块化单文件引入)

1、下载echarts

①使用版本为echarts-2.2.7,将下载下来的文件中的dist复制项目中

ECharts 基本使用

②创建jsp界面,为ECharts准备一个具备大小(宽高)的Dom。

ECharts 基本使用

③引入echarts.js。

ECharts 基本使用

④添加js动态生成图表

ECharts 基本使用

⑤生成图表如下

ECharts 基本使用

echarts还提供了图表转换的功能,如下图,可以对图表进行数据视图,折线图转换,保存等等功能,那么我们应该怎么通过代码实现呢?

ECharts 基本使用

很简单,只要添加toolbox即可。

ECharts 基本使用

这就是echarts基本的操作,此处介绍的比较简单,大家可以去官网上学习,很好很全面。希望对大家有所帮助。

相关文章:

  • 2021-08-15
  • 2022-12-23
  • 2020-01-17
  • 2022-12-23
  • 2022-01-30
  • 2022-12-23
  • 2021-11-20
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-07
  • 2021-08-02
  • 2022-12-23
  • 2022-12-23
  • 2021-12-24
相关资源
相似解决方案