<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<input type="button" value="测试" onclick="test()" />
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

<!--Step:2 Import echarts-all.js-->
<!--Step:2 引入echarts-all.js-->
<script src="js/echarts-all.js"></script>

<script type="text/javascript">
// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
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}
}
},
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:'line',
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]
}
]
});
var now = +new Date(1997, 9, 3);
var oneMinutes = 60 * 1000*15;
var value = Math.random() * 1000;
function test() {
var dates = [];
var datas = [];
for (var i = 0; i < 24 * 4; i++) {
now = new Date(+now + oneMinutes);
dates.push(now.getHours() + ":" + now.getMinutes());
value = value + Math.random() * 21 - 10;
datas.push(value);
}

myChart.setOption({

xAxis: [
{
type: 'category',
data: dates
}
],
series: [
{
name: '蒸发量',
type: 'line',
data: datas
}
]
});
}

</script>
</body>
</html>

运行截图

echarts 折线图动态x轴及数据的更多相关文章

  1. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  2. echarts折线图，数据切换时（最近七天）绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  3. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  4. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  5. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  6. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  7. jQuery--jqChart折线图使用eval处理返回数据无效的解决方法

    jquery初学者 查了很多帖子,jqchart插件做折线图时,处理返回数据时全都是eval,但我怎么也弄不出来,后来发现: 1.根本不需要eval处理,直接截取字符串即可(返回值要拼接好): 2.处 ...

  8. Echarts使用及动态加载图表数据

    Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...

  9. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

随机推荐

  1. 将不确定变为确定~transactionscope何时提升为分布式事务？(sql2005数据库解决提升到ＭＳＤＴＣ的办法)

    回到目录 对于transactionscope不了解的同学,可以看我的相关文章 第二十六回   将不确定变为确定~transactionscope何时提升为分布式事务? 第二十七回   将不确定变为确 ...

  2. lua的io操作文档

    2014-09-16~15:26:35 I/O库提供两种不同的方式进行文件处理1.io表调用方式:使用io表,io.open将返回指定文件的描述,并且所有的操作将围绕这个文件描述 io表同样提供三种预 ...

  3. atitit..代码生成流程图 流程图绘制解决方案 java  c#.net  php v2

    atitit..代码生成流程图 流程图绘制解决方案 java  c#.net  php v2 1.1. Markdown 推荐,就是代码和flow都不能直接使用.1 1.2. Java code2fl ...

  4. C 中读取键盘码

    键盘码在底层开发中经常用到,有时候我们会忘记它们,就要急急忙忙的去找 键-码 对照表查看,其实程序可以自己打印出 键-码 对应值 #include <stdio.h> #include & ...

  5. C# 集合类 ：（Array、 Arraylist、List、Hashtable、Dictionary、Stack、Queue）

    我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...

  6. .NET面试题解析(05)-常量、字段、属性、特性与委托

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 弱小和无知不是生存的障碍,傲慢才是!——<三体> 常见面试题目: 1. const和reado ...

  7. jxl读取excel实现导入excel写入数据库

    @RequestMapping(params = "method=import", method = RequestMethod.POST) @ResponseBody publi ...

  8. javascript语句——条件语句、循环语句和跳转语句

    × 目录 [1]条件语句 [2]循环语句 [3]跳转语句 前面的话 默认情况下,javascript解释器依照语句的编写顺序依次执行.而javascript中的很多语句可以改变语句的默认执行顺序.本文 ...

  9. 10034 - Freckles 克鲁斯克尔最小生成树！～

    /* 10034 - Freckles 克鲁斯克尔最小生成树!- */ #include<iostream> #include<cstdio> #include<cmat ...

  10. ES6入门系列三（特性总览下）

    0.导言 最近从coffee切换到js,代码量一下子变大了不少,也多了些许陌生感.为了在JS代码中,更合理的使用ES6的新特性,特在此对ES6的特性做一个简单的总览. 1.模块(Module) --C ...