关于ECharts入门系列

前阵子因为项目的需要接触了报表开发工具,经过一番了解之后发现百度的开源项目ECharts是一个很不错的报表开发工具。

项目完成一段时间后,我便进一步了解ECharts的使用,希望能够对ECharts的使用有进一步深入的了解。

一、为什么选择ECharts

在报表开发工具领域,也有很多成熟的开发工具可以用,比如:jFreeChart、FusionChart、HighChart等,他们都能够满足基本的使用需求。

但我选择ECharts的原因主要是因为:

1、ECharts是国内百度的开源项目,文档资料很容易获取,而且是中文,学习很方便。

2、ECharts项目是开源的,没有商用收费的烦恼。

3、ECharts的功能很丰富。ECharts提供了工具栏控件,可以画辅助线,可以进行展示图形的切换等。

4、ECharts提供了对地图的支持,可以用地图很好地进行展示。

虽然在某些方面,其他开发工具也具有,但是四点都具备的,就只有ECharts了。

或许你看一下这个页面,你会对ECharts有更深入的了解:Why ECharts ?

二、关于本入门系列的思考

花了一点时间把ECharts官网上的例子大概看了一遍,看完之后,觉得其实ECharts使用起来也挺简单的。

于是,自己觉得这么简单的东西就不用写了吧。

后来我想了想,其实对于一周前的我来说,ECharts的使用我还真不觉得简单,那一团团的HTML和JS,完全不知道怎么回事。

于是,我就坚定了写下本入门系列的信心了。一方面让自己对学完的东西有个总结,另一方面给想用ECharts的同学一个简单的入门路线分享。

三、如何学习ECharts

确定要写本系列之后,我在想我要用何种方式写。是把官网上的例子全部从头到尾注释一遍,然后一篇篇讲解么?

这样的话,那还不如直接直接上官网看呢!

经过一番思索,我确定了写作的思路:将自己学习的时候遇到的一个个难点/需求点作为写作点来写。

比如我在做一个展示中国辽宁省各地市的地图的时候,我就不知道如何改变鼠标移上去的提示。

这时候,关于提示(ToolTips)就是一个知识点,我会将其深入讲解。

四、建议的学习方式

其实ECharts就是一个写好的JS库,我们只需按一定模式去调用它就好了。学习ECharts完全没有必要去把ECharts官网上的例子完全看完,那样是没用的。

我建议的学习方式是了解ECharts使用的一个结构(先引入文件、声明一个div块……),然后到官网上去找你需要的报表类型,在官网给出的demo上进行修改,然后直接把demo拷贝下来使用即可。

在这个过程中,有什么不懂的属性,直接在官网的文档上查找,现用现查。

下一篇文章开始进入ECharts的学习啦~

关于ECharts入门系列

时间: 2024-11-08 23:13:11

关于ECharts入门系列的相关文章

Echarts入门教程精简实用系列

引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行决定按需打包下载. 2.从前端页面引入echarts.js,后即可使用 <script src="js/echarts.min.js"></script> 3.请查看完整使用案例 介绍:series里面的type值表示使用哪种类型的图表,'bar'表示柱状图,'pi

echarts入门教程

一.echarts介绍 ECharts是由百度团队开发的,可高度个性化定制的数据可视化图表库.它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图标库,兼容(IE8/9/10/11,Chrome,Firefox,Safari等)主流浏览器,可以运行在PC和移动设备上. 二.完成一个简单图标 废话不多说,一起来完成一个简单的图表,体验一下ECharts的神奇吧! 1.引入ECharts ECharts3开始不再强制使用AMD的方式按需引入,那么简单粗暴,直接在官网下

echarts入门小总结

一.echarts介绍 ECharts是由百度团队开发的,(开源免费的!!)可高度个性化定制的数据可视化图表库.它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图标库,兼容(IE8/9/10/11,Chrome,Firefox,Safari等)主流浏览器,可以运行在PC和移动设备上.官方网址: https://echarts.baidu.com/ 二.echarts使用 1. 使用echarts首先要导入官方的js包. 2. 准备一个具备宽高的DOM容器,用于显

Android视频录制从不入门到入门系列教程(三)————视频方向

运行Android视频录制从不入门到入门系列教程(二)————显示视频图像中的Demo后,我们应该能发现视频的方向是错误的. 由于Android中,Camera给我们的视频图片的原始方向是下图这个样子的: 就是说,即使你是竖着拿手机的,Camera提供给你的视频图像的方向还是上图那样横着的图片. 我们可以通过下述方向改变Camera提供的视频图像的方法: camera.setDisplayOrientation(90); 让图像顺时针旋转90度,视频图像的方向就正常的. 本篇文章DEMO下载.

《鸡啄米C++编程入门系列》系列技术文章整理收藏

<鸡啄米C++编程入门系列>系列技术文章整理收藏 收藏整理鸡啄米C++编程入门系列文章,供个人和网友学习C++时参考 1鸡啄米:C++编程入门系列之前言 2鸡啄米:C++编程入门系列之一(进制数) 3鸡啄米:C++编程入门系列之二(原码.反码与补码) 4鸡啄米:C++编程入门系列之三(VS2010的使用介绍) 5鸡啄米:C++编程入门系列之四(数据类型) 6鸡啄米:C++编程入门系列之五(运算符和表达式) 7鸡啄米:C++编程入门系列之六(算法的基本控制结构之选择结构) 8鸡啄米:C++编程入

[渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序读取相关数据

这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第六篇:为ASP.NET MVC应用程序读取相关数据 原文:Reading Related Data with the Entity Framework in an ASP.NET MVC Application 译文版权所有,谢绝全文转载--但您可以在您的网站上添加到该教程的链接. 在之前的教程中您已经完成了学校数据模型.在本教程中你将

【 D3.js 入门系列 — 11 】 入门总结

D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少

Hadoop MapReduce编程 API入门系列之压缩和计数器(三十)

不多说,直接上代码. Hadoop MapReduce编程 API入门系列之小文件合并(二十九) 生成的结果,作为输入源. 代码 package zhouls.bigdata.myMapReduce.ParseTVDataCompressAndCounter; import java.net.URI; import java.util.List;import org.apache.hadoop.conf.Configuration;import org.apache.hadoop.conf.Co

saltstack之基础入门系列文章简介

使用saltstack已有一段时间,最近由于各种原因,特来整理了saltstack基础入门系列文章,已备后续不断查阅(俗话说好记性不如烂笔头),也算是使用此工具的一个总结.saltstack的前六篇文章主要讲述了saltstack的安装.远程执行.配置管理.数据系统以及jinjia模板等知识点,从第七篇往后的文章是一些使用saltstack的案例,包括系统初始化,rpm包以及源码安装等. 博客中saltstack系列的文章,适合初学者从零开始学习直到逐渐熟练使用.文章具有一定的连贯性,如果没有任