<!DOCTYPE html>

<html>

<head>

    <title></title>

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

</head>

<body>

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

    <script type="text/javascript">

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

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

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

    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  ,然后引入相关的echarts.js.

设置存放图像的容器

设置echarts  参数，这个可以设置多种多样的形式，参照官网

然后 ，最后绑定options

结果

echarts Hello world 入门的更多相关文章

  1. 可能是史上最强大的js图表库——ECharts带你入门

    PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...

  2. 史上最强大的js图表库——ECharts带你入门(转)

    出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 Sta ...

  3. Echarts的简单入门

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

  4. ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法

    来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...

  5. 转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？

    一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...

  6. 【Echarts】百度Echarts的使用入门+两个简单的小例子+心得

    Echarts对于展示结果,有一个很好的表达方式. 1.首先,在官网将js下载到本地,引用到页面上 这里是在开发环境,所以下载最后源代码这个 managerResult.jsp <%@ page ...

  7. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  8. ECharts的使用相关参考---转

    ECharts图表组件初级入门之(一):如何将ECharts引入至项目中的几种方式 http://www.stepday.com/topic/?801 ECharts图表初级入门篇:如何配置EChar ...

  9. 若依项目整合eCharts实现图表统计功能

    eCharts是一款强大的图表统计工具,具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts. ...

随机推荐

  1. Spring笔记03（Spring创建对象的三种方式）

    1.创建对象的三种方式和bean的生命周期的验证: Animal接口代码: package cn.pb.dao; /** * 动物接口 */ public interface Animal { //吃 ...

  2. 高级Java工程师必备 ----- 深入分析 Java IO （一）BIO

    BIO编程 最原始BIO 网络编程的基本模型是C/S模型,即两个进程间的通信. 服务端提供IP和监听端口,客户端通过连接操作想服务端监听的地址发起连接请求,通过三次握手连接,如果连接成功建立,双方就可 ...

  3. 开源LTE代码分析

    跟踪了一个在将开源组织-OpenLTE(将4G通信网络LTE开源),现将自己梳理整理的一些文档Post出来,请有相同兴趣的朋友指点: 一,系统介绍 OpenLTE是一位Mot的工程师在12年发起的一个 ...

  4. SendMail发送回执及读取收件箱

    一.SendMail发送有回执提示 1.邮件发送配置 Properties props = new Properties(); String smtp = "smtp.qq.com" ...

  5. 86标准SQL与92标准SQL用法区别

    86标准SQL与92标准SQL用法区别 在开发Oracle 9i时, 数据库还时间了ANSL SQL/92标准的链接语法, 在书中建议在使用Oracle 9i及更高版本时,应该使用SQL/92标准的语 ...

  6. .NET&nbsp;下的&nbsp;POP3&nbsp;编程代码共享

    前一段时间在论坛上看见有人问如何使用.net进行POP3编程,其实POP3的使用很简单,所以.net没有向SMTP那样给出相应的类来控制. 废话少说,程序员最需要的使代码. 1.打开VS.NET 20 ...

  7. Linux&nbsp;JDK1.4卸载与1.6的安装

    Linux JDK卸载与安装 一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1.首先查看系统自带JDK的版本: [ ...

  8. Spring3注解零配置

    我们在以前学习 Spring 的时候,其所有的配置信息都写在 applicationContext.xml 里,大致示例如下: java代码: 查看复制到剪贴板打印     OracleDriver& ...

  9. VMWare虚拟机Bridged类型网卡ping不通的原因和解决办法

    要使VM与局域网内的其他机器一个子网,VM的网卡设置使用桥接.本来一直正常好好的, 突然有一天,遇到VMWare虚拟机Bridged类型网卡ping不通,设置,重启,查看VM网络设置,重装VMWare ...

  10. HDU - 6113 2017百度之星初赛A 度度熊的01世界

    度度熊的01世界  Accepts: 967  Submissions: 3064  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 327 ...