官方网址:http://echarts.baidu.com/doc/example/line1.html

使用百度echarts官方实例:http://ask.csdn.net/questions/184480

我写的第一个实例:

 <div id="main" style="height:400px"></div>
<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/line' ,
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec)
{
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: ['基于ZIGBEE的噪声监测系统'],
x: 'center'
//subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataZoom : {
show : false,
start : 0,
end : 100 //有10列,每一列10厘米
},
xAxis : [ //横轴
{
type : 'category',
//boundaryGap : true,
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})()
},
],
yAxis : [ //纵抽
{
type : 'value',
scale: true,
name : '分贝值',
//boundaryGap: [0.2, 0.2]
},
],
series : [
{ //点住以后的标记
name:'分贝值',
type:'line',
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push((Math.random()*(110-30) + 30));
}
return res;
})()
}
]
};
myChart.setOption(option);
var lastData = 11;
var axisData;
var timeTicket;
clearInterval(timeTicket);
timeTicket = setInterval(function (){
lastData =Math.round((Math.random()*(110-30) + 30));
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
myChart.addData([
[
0, // 系列索引
lastData, // 新增数据
false, // 新增数据是否从队列头部插入
false, // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
axisData // 坐标轴标签
]
]);
}, 2100);
}
);
</script>

运行结果:file:///E:/dreamweaver/tijiao.html

【Echarts每天一例】-1的更多相关文章

  1. echarts 图表用例

    参考博客:http://blog.csdn.net/verne_feng/article/details/51731653 http://echarts.baidu.com/echarts2/doc/ ...

  2. Echarts 的样例

    jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  3. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  4. vue echart例——柱状图及高度自适应

    1.安装 npm install echarts -s 2.例——点击tab切换时柱状图重绘,高度根据返回数据设置. <template> <div> <ul id=&q ...

  5. 【小程序】---- 使用 Echarts 的方式

    1.下载 GitHub 上的 ecomfe/echarts-for-weixin 项目,Echarts微信版. 地址:https://github.com/ecomfe/echarts-for-wei ...

  6. 令人惊叹的百度Echarts,大数据分析的必备工具

    学习目录 1.可视化面板介绍     1.1技术要点     1.2案例适配方案     1.3页面主体布局2.Echarts(重点)     2.1echarts介绍     2.2echarts体 ...

  7. Echarts入门踩坑记录

    关于Echarts,官网上,是这样介绍的,"Echarts,一个使用JavaScript实现的开源可视化库",也就是说,在使用过程中,将其作为普通的JavaScript组件库使用即 ...

  8. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  9. Ionic 2 rc 添加第三方的插件(plugin) 以Echarts为例

    Ionic2 在升级RC版之后做了很多改变,本文就使用Echarts 图表插件为例.记录一下如何引用第三方插件备忘. 一.再集成终端中使用NPM安装Echarts npm install echart ...

随机推荐

  1. 使用 Jenkins 搭建 iOS/Android 持续集成打包平台【转】

    背景描述 根据项目需求,现要在团队内部搭建一个统一的打包平台,实现对iOS和Android项目的打包.而且为了方便团队内部的测试包分发,希望在打包完成后能生成一个二维码,体验用户(产品.运营.测试等人 ...

  2. Chapter 2 Open Book——37

    I couldn't concentrate on Mike's chatter as we walked to Gym, and RE. didn't do much to hold my atte ...

  3. urllib模块 | Python 2.7.11

    官方文档: https://docs.python.org/2/library/urllib.html 某博客对官方文档较全的翻译: http://h2byte.com/post/tech/relat ...

  4. [Q]如何将图纸打印为黑白的及设置打印样式

    若只是想打印黑白图形,则在“打印样式列表”选择“monchrome.ctb”打印样式即可. 设置其它打印样式:在CAD批量打图精灵主界面下点设置打印样式图标,如下图: 在打开的资源管理器中选择您想要更 ...

  5. Java Socket编程基础(1)

    参考资料: <Java网络编程精解> 孙卫琴 一.socket通信简介 什么是socket,简单来说,在linux系统上,进程与进程之间的通信称为IPC,在同一台计算机中,进程与进程之间通 ...

  6. 关于C语言知识调查

    因为上一篇随笔对这一部分写得不够清楚,因此在这篇做一些补充. 你是怎么学习C语言的? 起初,对于C语言的学习主要是通过老师课堂的教学,完成相关的课后作业.与我的技能相比的话,他们都有一个共同点需要去实 ...

  7. postman+jenkins+newman做接口测试的持续集成

    为何要做接口自动化测试的持续集成? 1. 接口相对稳定,改动少,比起GUI自动化测试来说性价比更加高些,不容易出现GUI自动化那种掉到维护脚本的坑里. 2. 接口测试比较简单,一个规范的接口,测试只需 ...

  8. Java Day03 面向对象程序设计

    1.面向对象 面向对象是指一种程序设计泛型,同时也是一种程序开发的方法. 2.类 类是一种抽象的概念,类中包含了数据与对数据的操纵. 具有相同特性(数据元素)和行为(功能)的对象的抽象就是类.类是对象 ...

  9. 安装mysql的遇到的问题

    源:安装用的是mysql官网的binary包. 之前装mysql都是直接放到/usr/local,就想试试放到其他地方,然后..就悲剧了. 安装步骤没啥说的,官网上有.因为放置的位置不一样所以有些执行 ...

  10. JVM内存模型,垃圾回收算法

    JVM内存模型总体架构图 程序计数器多线程时,当线程数超过CPU数量或CPU内核数量,线程之间就要根据时间片轮询抢夺CPU时间资源.因此每个线程有要有一个独立的程序计数器,记录下一条要运行的指令.线程 ...