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'}
]
}]
};

ECharts.js学习(一) 简单入门的更多相关文章

  1. 图表工具--- ECharts.js学习(一) 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  2. ECharts.js学习(二)动态数据绑定

    Echarts 数据绑定 简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的.EChart.js对于数据异步读取这块提供了异步加载的方法. 绑 ...

  3. ECharts.js学习(三)交互组件

    ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol ...

  4. Vue.js学习 Item1 --快速入门

    我们以 Vue 数据绑定的快速导览开始.如果你对高级概述更感兴趣,可查看这篇博文. 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.在浏览器新标签页中打开它,跟 ...

  5. Quartz学习——Quartz简单入门Demo(二)

    要学习Quartz框架,首先大概了解了Quartz的基本知识后,在通过简单的例子入门,一步一个脚印的走下去. 下面介绍Quartz入门的示例,由于Quartz的存储方式分为RAM和JDBC,分别对这两 ...

  6. LESS 学习记录(简单入门)

    什么是 LESS LESS是一种动态样式语言,属于 CSS 预处理语言的一种.它使用类似 CSS 的语法,但是 赋予了动态语言的特性,比如变量.继承.运算.函数等,方便 CSS 的编写和维护. 使用 ...

  7. gulp学习笔记--简单入门

    一.准备工作 1.gulp是基于nodeJS的前端构建工具,所以全局安装nodeJS 2.利用npm全局安装gulp. npm install -g gulp 3.在项目根目录下新建文件package ...

  8. Three.js学习1_快速入门

    快速上手, 搭建第一个3D场景 最重要的一步, 先下载three.js, 引入网页中 <script src="./three.js"></script> ...

  9. 安卓学习-- RecyclerView简单入门

    一.加入JAR包 第一感觉这个东东,好复杂,没ListView来的快,方便 在项目中加入android-support-v7-recyclerview.jar包 这个包在extras\android\ ...

随机推荐

  1. (矩阵快速幂)HDU1575 Tr A

    Tr A Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. vue实现购物车和地址选配(二)

    参考文献: vue官网: vue.js 效果展示:全选和取消全选,计算总金额 项目源代码:https://github.com/4561231/hello_world 项目核心代码实现及踩坑 1.全选 ...

  3. IAR STM32 ------ CSTACK HEAP 设置一次可用栈的大小,HardFault_Hander

    CSTACK:限制函数中定义数组的最大值,否则进入HardFault_Hander HEAP:限制动态分配内存(C函数库中的malloc)的大小,不用可以设置为0

  4. python之三元表达式、列表推导、生成器表达式、递归、匿名函数、内置函数

    目录 一 三元表达式 二 列表推到 三 生成器表达式 四 递归 五 匿名函数 六 内置函数 一.三元表达式 def max(x,y): return x if x>y else y print( ...

  5. pt-kill 用法记录

    pt-kill 用法记录 # 参考资料Percona-Toolkit系列之pt-kill杀会话利器http://www.fordba.com/percona-toolkit-pt-kill.html ...

  6. oracle数据泵导入导出命令

    1.在PL/SQL的界面,找到Directories文件夹,找到目录文件的路径 2.通过SSH进入服务器 找到相应的路径 cd /u01/oracle/dpdir 输入指令 df -h   查看资源使 ...

  7. MyBatis-Helloworld

    一.依赖配置 1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  8. 写入MySQL报错超出 max_allowed_packet 的问题

    写入MySQL报错超出 max_allowed_packet 的问题. MySQL会根据配置文件会限制server接受的数据包的大小.如果写入大数据时,因为默认的配置太小,插入和更新操作会因为 max ...

  9. HDU 1284(钱币兑换 背包/母函数)

    与 HDU 1028 相似的题目. 方法一:完全背包. 限制条件:硬币总值不超过 n. 目标:求出组合种数. 令 dp[ i ][ j ] == x 表示用前 i 种硬币组合价值为 j 的钱共 x 种 ...

  10. HDU 1028(数字拆分 分治)

    题意是求所给的数能够被拆分成的不同组合数目. 方法有三种: 一.完全背包. 限制条件:所用数字不大于 n. 目标:求分解种数(组合出 n 的方法数). 令 dp[ i ][ j ] = x 表示 用前 ...