ECharts.js学习（一）

在项目开发的时候，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。具体有哪几种可以看：

前端开发者常用的9个JavaScript图表库

一、ECharts.js的特点

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

先用个小案例

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'http://echarts.baidu.com/build/dist'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main')); 

                var option = {

                    tooltip: {

                        show: true

                    },

                    legend: {

                        data:['销量']

                    },

                    xAxis : [

                        {

                            type : 'category',

                            data : ["苹果","三星","小米","华为","oppo","酷派"]

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value'

                        }

                    ],

                    series : [

                        {

                            "name":"销量",

                            "type":"bar",

                            "data":[100, 120, 150, 160, 220, 80]

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

显示效果：

这个是我在CEharts官方文档的小案例：

链接：5分钟上手写ECharts的第一个图表

官方文档：ECharts官方文档

二、CEharts进行步骤讲解

第一步，引用Js文件

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

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

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

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

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

<script type="text/javascript">

        //指定图标的配置和数据

        var option = {

            title:{

                text:'数据统计'

            },

            tooltip:{},

            legend:{

                data:['手机销量']

            },

            xAxis:{

                data:["苹果","小米","华为","三星"]

            },

            yAxis:{

            },

            series:[{

                name:'销量',

                type:'line',

                data:[800,1000,1300,400]

            }]

        };

        //初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        //使用制定的配置项和数据显示图表

        myChart.setOption(option);

    </script>

效果图：不清楚是因为我缩小网页了

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

 var option = {

            title:{

                text:'ECharts 数据统计'

            },

            series:[{

                name:'访问量',

                type:'pie',

                radius:'60%',

                data:[

                    {value:1000,name:'苹果'},

                    {value:1200,name:'小米'},

                    {value:1800,name:'华为'},

                    {value:400,name:'三星'}

                ]

            }]

        };

效果截图

有关最基础的就讲到这里，下篇，我将如何通过后台数据完成图表。

想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 少尉【20】

图表工具--- ECharts.js学习（一） 简单入门的更多相关文章

  1. ECharts.js学习（一） 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  2. 使用第三方图表工具——Chart.js

    效果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  3. ECharts.js学习（二）动态数据绑定

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

  4. ECharts.js学习（三）交互组件

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

  5. 编译器工具 Flex Bison for Windows 简单入门例子

    最近从事一个系统仿真软件的开发,里面定义了自己的描述性语言MSL, MSL语言经FlexBison转换成C语言,然后用C编译器来编译并计算仿真. 现在领域驱动开发比较热门,有机会定义自己的语言对程序员 ...

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

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

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

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

  8. Quartz学习——Quartz简单入门Demo（二）

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

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

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

随机推荐

  1. gitlab markdown支持页面内跳转

    markdown语法: [to_be_link](#id_name) 标题: ## 2.aaa <a name="id_name"></a> 参考: htt ...

  2. Struts2学习笔记（1）---相关配置

    Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架. 1创建action对象(三种) 1 创建普通的类,不继承任何类, ...

  3. MapReduce工作原理流程简介

    在MapReduce整个过程可以概括为以下过程: 输入 --> map --> shuffle --> reduce -->输出 输入文件会被切分成多个块,每一块都有一个map ...

  4. IBM的websphere MQ的c#使用(一)

    接上篇的MQ配置.利用C#实现MQ消息的收发.源码 1.需要引入的dll是amqmdnet.dll 2.app.config配置 <?xml version="1.0" en ...

  5. PE文件详解（四）

    本文转自小甲鱼的PE文件详解系列原文传送门 到此为止,小甲鱼和大家已经学了许多关于 DOS header 和 PE header 的知识.接下来就该轮到SectionTable (区块表,也成节表). ...

  6. Java--比较方便的特性归纳，持续更新...

    1.import 关键字不仅可以导入包,还可以静态变量和方法. 2.内部类对象会依赖于外部类对象,除非已经存在一个外部类对象,否则类中不会出现内部类对象.也就是说实例化内部类对象时,必须使用外部类对象 ...

  7. [转载]使用awk进行数字计算，保留指定位小数

    对于在Shell中进行数字的计算,其实方法有很多,但是常用的方法都有其弱点: 1.bc bc应该是最常用的Linux中计算器了,简单方便,支持浮点. [wangdong@centos715-node1 ...

  8. python 单下划线/双下划线使用总结

    文章转自:http://blog.csdn.net/pfm685757/article/details/45918575

  9. DAY6-小变化（java提示框）-2018-1-16

    终于有一点点小变化了,今天学习了java里的对话框,有四种类型:1.确认对话框(showConfirmDialog) 2.可选择输入的对话框(showInputDialog) 3.信息对话框(show ...

  10. 前端请求参数MD5加密校验,参数串解密

    首先引入MD5加密库:=>https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js; 步骤:=>1.请求前对参数进行字典升序排序,排 ...