<!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. 集训Day2

    雅礼集训2017Day2 T1 给你一个水箱,水箱里有n-1个挡板,水遵循物理定律 给你m个条件,表示第i个格子上面y+1高度的地方有或没有水 现在给你无限的水从任意地方往下倒,问最多满足多少条件 n ...

  2. 作业3rd

    第三周作业 课本学习 使用nmap扫描特定靶机 使用nessus扫描特定靶机 靶机网络情况如下 在攻击机使用Nessus,步骤如下 新建一个扫描 填入目的主机ip,点击开始进行扫描 等待 扫描结果如下 ...

  3. poj2392磊石头——排序后背包

    题目: 首先按限制高度从小到大排序,不会影响可行解,而不排序可能卡掉正确的情况: 用%2滚动数组时一定注意每次复制上一种情况,因为这个WA了好几次. 代码如下: #include<iostrea ...

  4. DSP编程

    File:isctype.c Line 68 DSP/BIOS程序启动顺序 CCS V5 使用教程一: 安装激活与创建工程 CCS V5 使用教程二:创建工程和配置软件仿真 CCS V5 使用教程三: ...

  5. 【转】Pro Android学习笔记（五）：了解Content Provider（上）

    Content Provider是抽象数据封装和数据访问机制,例如SQLite是Android设备带有的数据源,可以封装到一个content provider中.要通过content provider ...

  6. Windows下caffe安装详解(仅CPU)

    本文大多转载自 http://blog.csdn.net/guoyk1990/article/details/52909864,加入部分自己实战心得. 1.环境:windows 7\VS2013 2. ...

  7. 《Java多线程编程核心技术》读后感（十五）

    线程的状态 线程对象在不同的运行时期有不同的状态,状态信息就存在与State枚举类中. 验证New,Runnable,Terminated new:线程实例化后还从未执行start()方法时的状态 r ...

  8. 常用的Elasticseaerch检索技巧汇总

    本篇博客是对前期工作中遇到ES坑的一些小结,顺手记录下,方便日后查阅. 0.前言 为了讲解不同类型ES检索,我们将要对包含以下类型的文档集合进行检索: . title 标题: . authors 作者 ...

  9. PKI标准、CA采取的规范、X509、PKCS

    PKI:Public Key Infrastructure 公钥基础设施 PKI标准可以分为第一代和第二代标准. 第一代PKI标准主要包括美国RSA公司的公钥加密标准(Public Key Crypt ...

  10. SVN needs-lock 设置强制只读属性【转】

    https://www.jianshu.com/p/5942ab19620b 设置后向svn服务器添加文件时,会自动带上svn:needs-lock属性,默认是只读的要签出才能修改,以避免不必要的编辑 ...