参考：echarts3 使用总结

　　   echarts3使用总结2

最近在leader的忽悠下开始接触echarts，的确被它丰富的图表样式吸引了，现写入门教程如下：

官方入门教程参考：

ECharts2入门教程，这是比较老的教程了。

最新的ECharts4的教程如下：Echarts4入门教程 ：5 分钟上手 ECharts

教程给的是保存为html，当然我们也可以将其保存为jsp，只需要将

<!DOCTYPE html>

标签替换为jsp标签即可，如下：

<%@ page pageEncoding="UTF-8" contentType="text/html;UTF-8" %>

或者

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html;UTF-8" %>

官方ECharts4教程代码，此处改为使用在线js

注意使用utf-8格式编码，否则会乱码。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <!-- <script src="echarts.min.js"></script> -->

    <!--  -->

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

</head>

<body>

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

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

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

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

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

保存为echarts1.html，使用本地浏览器打开即可。

下载http://echarts.baidu.com/dist/echarts.min.js至本地（打开此地址保存即可，引用js方法在此赘述）。

方式2，以jsp方式运行ECharts

将

<!DOCTYPE html>

替换为

<%@ page pageEncoding="UTF-8" contentType="text/html;UTF-8" %>

保存为echarts1.jsp到/apache-tomcat-7.0.67/webapps/ROOT，

启动tomcat,打开浏览器，

执行

http://127.0.0.1:8080/echarts1.jsp

http://127.0.0.1:8080/echarts1.html

得到如下所示：

至此，ECharts初步使用学习完毕，至于要学习更多的图表，只需将 ECharts4：官方示例 中的option替换echart1示例中的option即可。

如：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <!-- <script src="echarts.min.js"></script> -->

    <!--  -->

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

</head>

<body>

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

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

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

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

        // 指定图表的配置项和数据

        var option = {

            xAxis: {

                type: 'category',

                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

            },

            yAxis: {

                type: 'value'

            },

            series: [{

                data: [820, 932, 901, 934, 1290, 1330, 1320],

                type: 'line'

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

得到下图：

至此，遨游ECharts去吧。

ECharts4简单入门的更多相关文章

  1. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  4. emacs最简单入门，只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  5. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  6. Docker 简单入门

    Docker 简单入门 http://blog.csdn.net/samxx8/article/details/38946737

  7. Springmvc整合tiles框架简单入门示例（maven）

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  8. git简单入门

    git简单入门 标签(空格分隔): git git是作为程序员必备的技能.在这里就不去介绍版本控制和git产生的历史了. 首先看看常用的git命令: git init git add git comm ...

  9. 程序员，一起玩转GitHub版本控制，超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

随机推荐

  1. java之动态代理

    摘要 相比于静态代理,动态代理避免了开发人员编写各个繁锁的静态代理类,只需简单地指定一组接口及目标类对象就能动态的获得代理对象. 这里说的静态代理可以理解为之前使用的装饰者模式,从之前使用装饰者模式实 ...

  2. pandas处理时间序列（1）：pd.Timestamp()、pd.Timedelta()、pd.datetime( )、 pd.Period()、pd.to_timestamp()、datetime.strftime()、pd.to_datetime( )、pd.to_period()

      Pandas库是处理时间序列的利器,pandas有着强大的日期数据处理功能,可以按日期筛选数据.按日期显示数据.按日期统计数据.   pandas的实际类型主要分为: timestamp(时间戳) ...

  3. js 获取时区

    js的时区函数: 设datename为创建的一个Date对象 ====================datename.getTimezoneOffset()--取得当地时间和GMT时间(格林威治时间 ...

  4. pytorch预训练模型的下载地址以及解决下载速度慢的方法

    https://github.com/pytorch/vision/tree/master/torchvision/models 几乎所有的常用预训练模型都在这里面 总结下各种模型的下载地址: 1 R ...

  5. 灵雀云率先成为 Linux 基金会/CNCF官方认证培训合作伙伴

    近日,灵雀云Alauda成为Linux基金会/CNCF授权培训伙伴项目( Linux Foundation Authorized Training Partner Program,以下简称ATP)在国 ...

  6. Python 第五阶段 学习记录之----rabbmit

    消息服务器rabbmit RabbitMQ 消息队列 python里有两个Q, threading queue.不同线程间数据交互 进程Queue: 不同进程间交互这个说法是错误的. 这个是用于父进程 ...

  7. python 构造一个可以返回多个值的函数

    为了能返回多个值,函数直接return 一个元组就行了 看上去返回了多个值,实际上是先创建了一个元组然后返回的.这个语法看上去比较奇怪,实际上我们使用的是逗号来生成一个元组,而不是用括号 >&g ...

  8. 裸奔的bootloader单步调试

    2011-03-01 23:25:22 目地:更清晰的了解bootloader的结构及功能.为移植U-boot打基础. 以前只知道大概,今天利用IAR调试工具,看着汇编代码,看着寄存器,看着内存.来单 ...

  9. [转载]SMTP的几个端口的比较

    出处:https://blog.csdn.net/zhangyuan12805/article/details/78781330 1. SMTP Port 25: 25口是四个端口中最老的.这是在33 ...

  10. js 图片无缝滚动

    html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...