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

时间: 2024-11-09 06:04:08

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

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

Echarts 数据绑定 简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的.EChart.js对于数据异步读取这块提供了异步加载的方法. 绑定多组数据 很多时候需要展示的数据不单单是一组数据,很多时候会进行一个数据对比.这个时候只需要在series中增加一组数据,legend中添加一下这个数据组的name <!DOCTYPE html> <html> <head> <title>ECharts.js

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

ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol),颜色和名字.可以通过点击图例控制哪些系列不显示. xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放左右两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. yAxis:直角坐标系 grid 中的 y 轴,一般情况下

JS学习笔记之入门篇一

本笔记总结精简,只做查找只用,如有不当之处,欢迎指正! 1.JS代码插入 2.JS代码引入 3.JS在页面中的位置 注意: javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行.比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等):而如果是通过事件调用执行的function那么对位置没什么要求的. 4.JS 函数 function 函数名() {     

LESS 学习记录(简单入门)

什么是 LESS LESS是一种动态样式语言,属于 CSS 预处理语言的一种.它使用类似 CSS 的语法,但是 赋予了动态语言的特性,比如变量.继承.运算.函数等,方便 CSS 的编写和维护. 使用 LESS 在开发环境下的时候,推荐直接使用浏览器使用 LESS. 下载 LESS.js 文件. 页面中引入 styles.less 文件所有 .less 必须在 LESS.js 前引入.(服务器必须设置 .less 文件的 MIME 为 text/css) 引入 JS 文件 开发完毕后,推荐使用 n

Asp.Net MVC学习总结(一)——Asp.Net MVC简单入门

出处:http://www.cnblogs.com/SeeYouBug/p/6401737.html 一.MVC简单入门 1.1.MVC概念 视图(View) 代表用户交互界面,对于Web应用来说,可以概括为HTML界面,但有可能为XHTML.XML和Applet. 模型(Model) 表示用户对其数据的操作的一个封转.可以分为视图模型(view model)和领域模型(domain models),视图模型就是在视图与控制器之间传输数据的一个封转,而领域模型就是业务逻辑,后台数据模型等的一个集

RPC学习----Thrift快速入门和Java简单示例

一.什么是RPC? RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. RPC协议假定某些传输协议的存在,如TCP或UDP,为通信程序之间携带信息数据.在OSI网络通信模型中,RPC跨越了传输层和应用层.RPC使得开发包括网络分布式多程序在内的应用程序更加容易. 二.什么是Thrift? thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和

Node.js学习笔记【1】入门(服务器JS、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块)

笔记来自<Node入门>@2011 Manuel Kiessling JavaScript与Node.js Node.js事实上既是一个运行时环境,同时又是一个库. 使用Node.js时,我们不仅仅在实现一个应用,同时还实现了整个HTTP服务器. 一个基础的HTTP服务器 server.js:一个可以工作的HTTP服务器 var http = require("http"); http.createServer(function(request, response) { r

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e

android的简单入门学习

话说光配环境就整死我了, 不是说多么难, 是最近google被屏了, 很多sdk里面需要下载的东西都下不下来, 坑爹啊.  最后跟扫拉稀要了一个他配置好的,才运行了. android目录分析: assets 资产目录,存放文件,这些文件会被打包到应用程序的apk(安装包) bin 编译后的文件目录 gen 目录自动生成的目录 project.properties 代表编译的版本 target = "" 来修改编译版本 libs 支持jar包 会被添加到android depend 目录