什么是EChats？

一句话： 一个数据可视化(图表)Javascript框架，详细？移步这里，类似(推荐)的有 HighCharts，其他？ 嗯，先看看吧……

快速上手： 模块化单文件引入（推荐）、标签式单文件引入

github issues ： 问题列表&新建问题

起步推荐（模块化）

举个栗子：新建文件夹 ，结构

-- echats-demo

-- -- js

-- -- css

-- -- images

-- -- echarts

-- -- -- src

-- -- zrender

-- -- -- src

-- -- index.html

1、模块加载器： 这里以 ESL为例，why？百度自己家的；或者选择 seajs ……

引入 esl.js 下载(或 clone) esl-master 后找到 src 目录下的 esl.js 文件copy到js目录下

2、zrender （echats底层依赖）：

什么是 ZRender ，一句话：MVC封装的Canvas框架

下载(或clone) zrender-master 找到 src 目录 ，将整个目录放入 zrender

3、echarts

下载 echats ，找到 src 目录，同样将整个目录放入 echarts

4、配置参考

在 echats-demo 文件夹下新建 demo.html 在 script 中配置如下：

//配置例子

require.config({

    packages: [

        {

            name: 'echarts',

            location: 'echats/src',

            main: 'echarts'

        },

        {

            name: 'zrender',

            location: 'zrender/src', // zrender与echarts在同一级目录

            main: 'zrender'

        }

    ]

});

5、起步：

源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>echarts 5分钟上手 demo</title>

</head>

<body>

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

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

    <script src="js/esl.js"></script>

    <script type="text/javascript">

    //配置例子

    require.config({

        packages: [

            {

                name: 'echarts',

                location: 'echarts/src',

                main: 'echarts'

            },

            {

                name: 'zrender',

                location: 'zrender/src', // zrender与echarts在同一级目录

                main: 'zrender'

            }

        ]

    });

    option = {

        title:{

            text:"by highsea",

            subtext:"echarts 5分钟上手 demo",

            sublink:"http://www.cnblogs.com/highsea90/",

            link:"http://highsea90.com"

        },

        backgroundColor : "#eee",

        tooltip : {

            trigger: 'axis'

        },

        legend: {

            data:['蒸发量','降水量']

        },

        //工具箱，每个图表最多仅有一个工具箱。

        toolbox: {

            show : true,

            feature : {

                mark : {show: true},

                dataView : {show: true, readOnly: false},

                magicType : {show: true, type: ['line', 'bar']},

                restore : {show: true},

                saveAsImage : {show: true}

            }

        },

        calculable : true,

        xAxis : [

            {

                type : 'category',

                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

            }

        ],

        yAxis : [

            {

                type : 'value',

                splitArea : {show : true}

            }

        ],

        series : [

            {

                name:'蒸发量',

                type:'bar',

                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

            },

            {

                name:'降水量',

                type:'bar',

                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

            }

        ]

    };

    require(

        [

            'echarts',

            'echarts/chart/line',

            'echarts/chart/bar'

        ],

        function (ec) {

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

            myChart.setOption(option);

        }

    )

    </script>

</body>

</html>

案例源码下载：轻点这里

完

扩展阅读：百度商业体系前端团队 百度ECharts

ECharts模块化使用5分钟上手的更多相关文章

  1. echarts入门，5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

  2. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  3. 一分钟上手artTemplate

    一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...

  4. 普通Linux用户1分钟上手vi编辑器

    *导读:普通用户只要花1分钟看第二部分即可.高级用户请忽略本文* 目录 1. 编辑器之战 2. vi的使用 2.1 vi的3个模式 2.2 vi的3个模式切换 2.3 vi最基本的命令 2.4 vi的 ...

  5. Nodejs新手村指引——30分钟上手

    概要 #准备工作 #开启简单的服务 #路由 #获取参数的三种方式 #静态文件 #数据库集成 #async解决多重嵌套问题 本文适合没有nodejs项目开发经验而又想对nodejs有个大概了解的你阅读, ...

  6. 一分钟上手, 让 Golang 操作数据库成为一种享受

    gorose, 最风骚的 go orm, 拥有链式操作, 开箱即用, 一分钟上手等八大风骚, 让 golang 操作数据库成为一种享受, 妈妈再也看不到我处理数据的痛苦了, 下面就来为大家一一讲解 g ...

  7. 三分钟上手Highcharts简易甘特图

    根据业务需求,找到了这个很少使用的图形,话不多说,看看该如何使用.首先要引入支持文件:可根据链接下载. exporting.js:https://img.hcharts.cn/highcharts/m ...

  8. 【新手】【十分钟上手系列-一】快速开发vue插件

    2018.6.28 在这浮躁的前端娱乐圈,不会三两个新框架都觉得自己不是前端.哦,不是我说的.说到底.原生才是重中之重.加油. vue用了大半年多,一直在用ui库,插件等,没有自己的东西. 想想连个v ...

  9. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

随机推荐

  1. 关于osi的7层与tcp的4层网络协议的理解

    osi 七层模型 应用层 提供接口 表示层 机器语言的二进制转换 对话层 决定是否传输 传输层 确定可不可靠 排差错 控流 网络层 提供逻辑地址 选路 数据链路层 mac 错误检测 物理层 设备间的比 ...

  2. 小程序中 function (res)的理解

    刚看到小程序里面一段代码 success: function (res) { console.log('搜索结果:'); console.log(res); wx.hideToast(); if (r ...

  3. stm32串口通信实验，一点笔记

    第一次深入学习stm32,花了好长时间才看懂代码(主要是C语言学习不够深入),又花了段时间自己敲了一遍,然后比对教程,了解了利用中断来串口通信的设置方法. 板子是探索版f407,本实验工程把正点原子库 ...

  4. python学习之python入门

    一.第一句Python代码 1.在d:/test_py目录下新建一个test.py文件,并在其中写上如下内容: print("Hello World") 2.在cmd命令行下执行t ...

  5. 【待解决】关于CLASSPATH的显示问题

    CLASSPATH? 环境变量? 环境变量CLASSPATH是操作系统JVM的搜索路径,它可以让JVM依据这些路径找到可执行文件.class文件,就相当于环境变量PATH对操作系统windows的作用 ...

  6. c++静态变量

    静态变量 一.静态变量 static关键字 static int i; 二.静态变量的运用 .计算函数被调用次数 .返回指针 第45课中有这么一段 int* square3(int *x) { int ...

  7. Jumpserver跳板机入门

    1.jumpserver安装 1.1.环境介绍 系统: CentOS 7.4.1708IP: 192.168.56.110 [root@linux-node1 ~]# uname -r -.el7.x ...

  8. vue 与原生app的对接交互（混合开发）

    小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入 ...

  9. sqoop 数据迁移

    sqoop 数据迁移 1 概述 sqoop是apache旗下一款“Hadoop和关系数据库服务器之间传送数据”的工具. 导入数据:MySQL,Oracle导入数据到Hadoop的HDFS.HIVE.H ...

  10. log4net始终占用日志文件的问题

    在appender 下面加 <lockingModel type="log4net.Appender.FileAppender+MinimalLock" />