ECharts.js学习(一) 简单入门

EChart.js 简单入门

最近有一个统计的项目要做,在前端的数据需要用图表的形式展示。网上搜索了一下,发现有几种统计图库。

MSChart  

这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定。

ichartjs

是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 支持饼图、环形图、折线图、面积图、柱形图、条形图等。

Chart.js

也是一款基于HTML5的图形库和ichartjs整体类似。不过Chart.js的教程文档没有ichartjs的详细。不过感觉在对于移动的适配上感觉比ichartjs要好一点。

ECharts.js

这是我准备在这个项目中使用的图形库,这也是一款基于HTML5的图形库。图形的创建也比较简单,直接引用Javascript即可。使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 3;第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易;第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便。

官网:ECharts.js

下面来简单说明一下EChart.js的使用。

第一步,引用Js文件

<script type="text/javascript" src="js/echarts.js"></script>

js文件有几个版本,可以根据实际需要引用需要的版本。下载链接

第二步,准备一个放图表的容器

<div id="chartmain" style="width:600px; height: 400px;"></div>

第三步,设置参数,初始化图表

复制代码
<script type="text/javascript">//指定图标的配置和数据var option = {title:{text:'ECharts 数据统计'},tooltip:{},legend:{data:['用户来源']},xAxis:{data:["Android","IOS","PC","Ohter"]},yAxis:{},series:[{name:'访问量',type:'line',data:[500,200,360,100]}]};//初始化echarts实例var myChart = echarts.init(document.getElementById('chartmain'));//使用制定的配置项和数据显示图表myChart.setOption(option);</script>
复制代码

这样简单的一个统计图表就出来了,官网使用的柱状图,我这边改用了折线图。

 

 柱状图其实也很简单,只要修改一个参数就可以了。把series里的type 值修改为"bar"

 饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标,数据绑定上也是采用value 和name对应的形式。

复制代码
        var option = {title:{text:'ECharts 数据统计'},            series:[{name:'访问量',type:'pie',    radius:'60%', data:[{value:500,name:'Android'},{value:200,name:'IOS'},{value:360,name:'PC'},{value:100,name:'Ohter'}]}]};
复制代码

 

教程:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

转载于:https://www.cnblogs.com/ourLifes/p/echarts.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

金蝶云系统显示服务器离线,金蝶云服务器已离线是什么情况

金蝶云服务器已离线是什么情况 内容精选换一换根据是否支持挂载至多台云服务器可以将磁盘分为非共享磁盘和共享磁盘。一个非共享磁盘只能挂载至一台云服务器&#xff0c;而一个共享磁盘可以同时挂载至多台云服务器。共享磁盘是一种支持多个云服务器并发读写访问的数据块级存储设…

Spring Data Solr教程:Solr简介

大多数应用程序必须具有某种搜索功能。 问题在于搜索功能通常是巨大的资源消耗&#xff0c;它们可能通过给数据库造成沉重的负担而破坏我们应用程序的性能。 因此&#xff0c;将负载转移到外部搜索服务器是个好主意。 这是我的Spring Data Solr教程的第一部分。 在本教程中&am…

Liunx常用的100条命令汇存

1、关机 shutdown -h now 立刻关机 poweroff shutdown -r now 立刻重启 reboot logout 注销2、进入图形界面 startx3、vi编辑器 [vi] [path]/[file]&#xff1b; [i]进入编辑模式&#xff1b; [esc]进入命令模式&#xff1b; [:wq]保存并退出&#xff1b;[:q!]退出…

分布式是什么意思_机架式ups是什么意思?与分布式DPS有何不同之处?

ups电源很多人听过了&#xff0c;主要是让设备在突然断电的情况下遭遇停电的损坏&#xff0c;保障数据及重要程序运行。那么&#xff0c;机架式ups电源可能就是很多人不太了解的了&#xff0c;在说到与分布式DPS有何不同之处那是很少有人清楚了解了&#xff0c;不管怎么说&…

【原】老生常谈-从输入url到页面展示到底发生了什么

刚开始写这篇文章还是挺纠结的&#xff0c;因为网上搜索“从输入url到页面展示到底发生了什么”&#xff0c;你可以搜到一大堆的资料。而且面试这道题基本是必考题&#xff0c;二月份面试的时候&#xff0c;虽然知道这个过程发生了什么&#xff0c;不过当面试官一步步追问下去的…

WebApi在MVC 4中一个Controll多个post方法报错处理

http://blog.csdn.net/lqh4188/article/details/53542400&#xff08;原创&#xff09; 转载于:https://www.cnblogs.com/william-CuiCui0705/p/8023832.html

光耀卡服务器维修,3月28日服务器更新维护公告

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼亲爱的战友&#xff1a;我们将于03月28日08:00-13:00对所有服务器进行更新维护。在此期间无法登录游戏&#xff0c;给大家带来的不便我们深表歉意。- 商城兑换1)无限紫晶幸运箱 限时兑换※使用后必定获得一款限定永久武器※可重复获…

JPA – Hibernate –包级别的类型映射

当我们最终成熟到可以在JPA中使用某些自定义类型映射时&#xff0c;我们通常会停留在某些提供程序特定的解决方案上&#xff0c;因为JPA本身并未定义任何实现此功能的机制。 让我为您展示一个JPA提供程序Hibernate的自定义类型映射定义的示例。 假设我们在项目中使用Joda Money…

关于文件关联的图标不能正常显示

不知道有没有人遇到过这种情况&#xff1a; 这两种情况都是关联的图标不能正常显示&#xff0c;但是可以正常打开。总觉得看着挺碍眼的&#xff0c;就看了下注册表&#xff0c;发现可以用以下方法解决&#xff1a; 打开注册表&#xff0c;[HKEY_CLASSES_ROOT]找到需要修改的文件…

web前端常用知识点

1、常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 fieldset - 表单字段集 colgroup-col - 表单列分组元素 table-tr-td 表格及行-单元格 pre - 格…

Android 7.0 fiddler代理抓不到https请求的解决办法

Android 7.0 fiddler代理抓不到https请求的解决办法 解决方法&#xff1a; 1.在源码res目录下新建xml目录&#xff0c;增加network_security_config.xml文件 &#xff08;工程名/app/src/main/res/xml/network_security_config.xml&#xff09;network_security_config.xml文件…

华为畅享8plus停产了吗_牢记华为手机“三不买”原则,不花冤枉钱,选错要吃亏!...

如今华为手机已经占据国内手机市场份额的半壁江山&#xff0c;华为自然也就成为了买手机的首选。那么华为手机真的好吗&#xff1f;我认为应该理性看待&#xff0c;因为每个手机品牌都有好手机也有差手机&#xff0c;其实买华为你只需要牢记“三不买”原则&#xff0c;就可以不…

Spring MVC:MySQL和Hibernate的安全性

Spring有很多不同的模块。 所有这些对于具体目的都是有用的。 今天&#xff0c;我将讨论Spring Security。 该模块提供了灵活的方法来管理访问Web应用程序不同部分的许可。 在这篇文章中&#xff0c;我将研究Spring MVC &#xff0c; Hibernate &#xff0c; MySQL与Spring Sec…

Python 离线 安装requests第三方库

一、介绍 requests是Python的一个HTTP客户端库&#xff0c;跟urllib&#xff0c;urllib2类似&#xff0c;不过requests的优势在于使用简单&#xff0c;相同一个功能&#xff0c;用requests实现起来代码量要少很多。毕竟官方文档都很直白的说&#xff1a; python的标准库urllib2…

JS分页条插件

目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照点,根据需要显示的页码按钮个数,计算参照点前后的页码数量. 当起止点小于1或者…

头同尾合十的算法_乘法速算之首同尾合十

两位数乘两位数中&#xff0c;有一种特殊情况不需要列竖式&#xff0c;可以直接说出答案&#xff0c;那就是“首同尾合十”——十位相同&#xff0c;个位数字之和是10。一、巧算方法前两位&#xff1a;十位数字(十位数字1)&#xff0c;后两位&#xff1a;个位相乘例如&#xff…

Bootstrap定制开发

Bootstrap作为目前很受欢迎的前端框架&#xff0c;越来越多的网站开始使用基于Bootstrap框架进行开发。 1、定制开发方法 &#xff08;1&#xff09;Bootstrap定制开发可以使用LESS和Grunt实现定制化 &#xff08;2&#xff09;在线实现定制化开发&#xff0c;地址为&#x…

JavaFX逆运动学库2.0

这是第一篇讲解javafx-ik的基础教程&#xff0c; javafx-ik是JavaFX的逆运动学库。 该库的源代码可以从GitHub下载。 什么是 图1&#xff1a;单骨 骨骼是使用javafx-ik库进行逆运动学的基本基础。 骨骼具有一定长度和关节&#xff0c;骨骼可以围绕该关节旋转。 具有关节的一端…

html权重值_史上最全的web前端面试题汇总及答案HtmlCss(二)

作者&#xff1a;樱桃小丸子儿链接&#xff1a;https://www.jianshu.com/p/abadcc84e2a4HTML&CSSimg的alt和title的异同&#xff1f;**alt **是图片加载失败时&#xff0c;显示在网页上的替代文字&#xff1b;**title **是鼠标放上面时显示的文字,title是对图片的描述与进一…

解决问题SyntaxError: Unexpected token import

ES6语法的模块导入导出(import/export)功能,我们在使用它的时候&#xff0c;可能会报错&#xff1a; SyntaxError: Unexpected token import 语法错误&#xff1a;此处不应该出现import 我遇到的情况是import语法不识别导致的。在这里&#xff0c;有两种方法可以解决。 1: 使用…