Echarts图形化报表工具

一、什么是Echarts？
ECharts 是一个由百度团队开发的开源项目，它是一个纯JavaScript的商业级数据图表库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，可以提供直观生动，可交互，可高度个性化定制的数据可视化图表。

官网：https://www.echartsjs.com

二、入门案例
1.下载Echarts
在官网下载ECharts，选择比较稳定的4.2.1版本，下载后解压打开
下载地址：http://echarts.baidu.com/download.html

dist文件夹：编译好的主要的ECharts框架的js文件
test文件夹：包含各种图表的示例页面
theme文件夹：图表使用的样式js文件

2.引入ECharts
在Eclipse中创建好web项目，在webapp下创建一个叫js的文件夹，在ECharts的dist文件夹及theme文件夹找到以下js文件并导入

3.绘制图表
3.1：首先在页面head标签内引用刚才的js文件

<!-- 引用 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<script src="js/dark.js"></script>
<script src="js/infographic.js"></script>

3.2：定义一个用于展示的DIV容器，初始化echarts实例，并定义图表配置项和数据，然后展示出来

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="myChart" style="width: 600px; height: 400px;"></div><script type="text/javascript"><!--基于准备好的dom，初始化echarts实例-->var myChart = echarts.init(document.getElementById('myChart'));<!--指定图表的配置项和数据-->var option = {//标题组件 title : {text : 'ECharts 入门示例'},tooltip : {},//图例组件，可点击图例控制哪些系列不显示legend : {data : [ '成绩' ]},//直角坐标系 grid 中的 x 轴xAxis : {data : [ "语文", "数学", "英语", "物理", "生物" ]},//直角坐标系 grid 中的 y 轴yAxis : {},series : [ {name : '成绩',type : 'bar',data : [ 67, 44, 99, 55, 78 ]} ]};<!--使用指定的配置项和数据显示图表-->myChart.setOption(option);</script>

到此简单的Echarts入门案例就完成了

三．进阶案例
尝试过简单的入门案例后，下一步我们在入门案例的基础上来尝试较复杂的案例

1.首先在页面head标签内引用刚才的js文件

<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<script src="js/dark.js"></script>
<script src="js/infographic.js"></script>

2.指定图表样式，更改鼠标悬停时展示形式，自定义图表颜色，定义工具栏，并进行多数据项展示

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="myChart" style="width: 600px; height: 400px;"></div><script type="text/javascript">// 基于准备好的dom，指定样式infographic,初始化echarts实例var myChart = echarts.init(document.getElementById('myChart'),'infographic');<!--指定图表的配置项和数据-->var option = {//标题组件 title : {text : '第一次模拟考试'},//提示信息tooltip : {trigger : "item",formatter : '{a}<br/>科目：[{b}]<br/>分数：[{c}]'},//定义工具栏toolbox : {show : true,feature : {//数据区域缩放dataZoom : {yAxisIndex : 'none'},//数据视图，展示数据详情dataView : {readOnly : false},//可以转换折线或柱状图模式magicType : {type : [ 'line', 'bar' ]},//还原按钮restore : {},//可保存为图片saveAsImage : {}}},//图例组件，可点击图例控制哪些系列不显示legend : {data : [ '小明成绩', '小红成绩' ]},//直角坐标系 grid 中的 x 轴xAxis : {data : [ "语文", "数学", "英语", "物理", "生物" ]},//直角坐标系 grid 中的 y 轴yAxis : {},series : [ {name : '小明成绩',type : 'bar',itemStyle : {normal : {//颜色color : "gray"}},//数据data : [ 67, 52, 66, 55, 88 ]}, {name : '小红成绩',type : 'bar',itemStyle : {normal : {//颜色color : "pink"}},//数据data : [ 61, 44, 99, 55, 78 ]} ]};<!--使用指定的配置项和数据显示图表-->myChart.setOption(option);
</script>

PS:以上我们都是只是使用静态数据来展示图表，实际项目中都需要后台生成图表数据，前端进行图表的展示，我们一般需要使用ajax动态从后台请求data数据展示，Echarts更多用法请参考Echarts官网开发文档

不足之处请谅解也可在下方评论，谢谢

Echarts图形化报表工具相关推荐

【报表技术】IReport图形化报表开发工具生成PDF文档
[报表技术]IReport图形化报表开发工具生成PDF文档新建一个文件. 由于IReport的默认设置是不支持中文的,IReport没有内置中文的包. 了解报表模板结构. ①title:报表标题. ...
【报表技术】IReport 图形化报表开发工具安装教程
[报表技术]IReport 图形化报表开发工具安装教程 JasperReport简单介绍 JasperReport是一个强大.灵活的报表生成工具,能够展示丰富的页面内容,并将之转换成PDF,HTML, ...
linux sqlite图形工具,SQLite 图形化管理工具
哈哈,朋友编写了一款服务器web界面管理工具,使用到了SQLite数据库. SQLite介绍 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它的设计目标是嵌入式的,而且目前已 ...
网络协议图形化分析工具EtherApe
网络协议图形化分析工具EtherApe 在对网络数据分析的时候,渗透测试人员往往只关心数据流向以及协议类型,而不关心具体数据包的内容.因为这样可以快速找到网络的关键节点或者重要的协议类型. Kali ...
MySQL学习笔记03【数据库表的CRUD操作、数据库表中记录的基本操作、客户端图形化界面工具SQLyog】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
Docker图形化管理工具之Portainer
What is Portainer? Portainer是一款轻量级的图形化管理工具,通过它我们可以轻松管理不同的docker环境.Portainer部署和使用都非常的简单,它由一个可以运行在任何do ...
Git图形化管理工具
Git图形化管理工具注意:必须在创建的仓库中进行右键打开复制这段内容后打开百度网盘App,操作更方便哦. 链接:https://pan.baidu.com/s/1eXIk01LXSmzmXvYfw ...
win10下最新MySQL8.0安装与环境配置，Navicat图形化管理工具连接，完整详细可收藏
文章目录一.MySQL的卸载二.MySQL的下载安装和配置三.MySQL的开启和登录四.MySQL图形化管理工具一.MySQL的卸载步骤1:停止MySQL服务在卸载之前,先停止MySQL ...
MySQL运算符，函数，索引，图形化管理工具
文章目录运算符算术运算符比较运算符逻辑运算符 MySQL运算符数字函数字符串函数日期时间函数条件函数系统信息函数加密函数其他常用函数 MySQL索引索引的概念索引的分类创建 ...

Echarts图形化报表工具

Echarts图形化报表工具相关推荐

最新文章

热门文章