先看下效果，自己用ps做了张gif图，发现很好玩啊。。不喜勿喷

自己下载个echarts.min.js

直接上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.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'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'Topic'
// 副标题 ,subtext: '随机数'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['内存使用情况', '当前数量']
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
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: '内存使用情况',
max: 20,
min: 0,
boundaryGap: [0.2, 0.2]
}, {
type: 'value',
scale: true,
name: '当前数量',
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
}],
series: [{
name: '当前数量',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 1,
itemStyle: {normal: {
color:'#CCCCCC',
lineStyle:{color:'#CCCCCC'}
}},
data: (function() {
var res = [];
var len = 10;
while (len--) {
res.push(null);
}
return res;
})()
}, {
name: '内存使用情况',
type: 'line',
smooth:true,
// itemStyle成为面积图的关键。
itemStyle: {normal: {
color:'#0099ff',
areaStyle: {type: 'default'},
lineStyle:{color:'#0099ff'}
}},
areaStyle: {// 实现蓝白渐变色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(0, 153, 255)'
}, {
offset: 1,
color: 'rgb(255,255,255)'
}])
}
},
data: (function() {
var res = [];
var len = 0;
while (len < 10) {
res.push(null);
len++;
}
return res;
})()
}]
};
setInterval(function() {
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

var data0 = option.series[0].data;
var data1 = option.series[1].data;
data0.shift();
data0.push(Math.round(Math.random() * 1000));
data1.shift();
data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);

myChart.setOption(option);
}, 2100);
</script>
</body>
</html>

echarts双y轴折线图柱状图混合实时更新图的更多相关文章

  1. echarts 双Y轴图表

    直接代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. echarts使用笔记四:双Y轴

    1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...

  3. HighCharts实现双Y轴

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

  4. Python教程：matplotlib 绘制双Y轴曲线图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:数据皮皮侠 双X轴的可以理解为共享y轴 ax1=ax.twiny() ...

  5. Jqplot使用总结之二(双Y轴)

    最近需要用Jqplot做双Y轴的Chart图,首先我找到了文档上的例子并对数据做了一些调整: 1.例子展示: var s1 = [["2002-01-01", 112000], [ ...

  6. MSChart使用之双Y轴使用

    protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...

  7. matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色

    1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...

  8. Python实现双X轴双Y轴绘图

    诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章, ...

  9. highchart 设置双Y轴坐标 双x轴坐标方法

    我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...

随机推荐

  1. Linux 查看内存状态

    # 查看系统内存 命令:free 注:默认k单位显示 注:-m 以MB 注:-g以GB 单位显示 total used free shared buffers cached Mem: -/+ buff ...

  2. 【Luogu P2664】树上游戏

    Problem Description \(lrb\) 有一棵树,树的每个节点有个颜色.给一个长度为 \(n\) 的颜色序列,定义 \(s(i,j)\) 为 \(i\) 到 \(j\) 的颜色数量.以 ...

  3. U3D外包公司—北京动点（公司性质）承接U3D、Kinect、VR虚拟现实，增强现实，体感互动，大屏互动等各类外包

    unity3d外包就找动点软件承接虚拟现实项目外包 承接U3D.Kinect.VR虚拟现实,增强现实,体感互动,大屏互动等各类外包 联系请加QQ:372900288 联系电话:13911652504 ...

  4. 改写element-ui中的日期组件

    如果你想实现一个自定义的日期组件规则如下:日期组件未点开前左右两边有前一天后一天控制箭头,且前一天后一天有数据时才显示箭头,没有数据时,快速切换箭头隐藏.当日期组件点开后,有数据的天为可点击状态,无数 ...

  5. jmeter+influxdb+grafana性能测试监控

    背景: 话说Jmeter原生的监控确实太丑了,听大佬们在讨论Jmeter+InfluxDb+Grafana的监控,于是,为了有一个漂亮的测试报告,就手动开始进行部署. 安装步骤: 1.influxdb ...

  6. Listview自定义了子View导致listview的onitemclick事件无效

    原因是子View的点击事件抢占了listview的点击事件 解决办法: 1. 子View根布局 设置 android:descendantFocusability="blocksDescen ...

  7. Mysql按周，按月，按日，按小时分组统计数据

    按周   select DATE_FORMAT(create_time,'%Y%u') weeks,count(caseid) count from tc_case group by weeks;   ...

  8. Oracle数据库联机重定义讲解及错误处理

    1.1. 关键字:联机重定义/SYNC_INTERIM_TABLE/GATHER_TABLE_STATS 1.2. 需求:数据表的清理机制需要优化 离线消息表采用delete的方式定期对过期的数据进行 ...

  9. GoEasy的使用

    GoEasy介绍 http请求短连接,一次请求响应后关闭,而GoEasy建立了客户端与服务器之间的长连接. goeasy支持服务器到客户端的消息发布,客户端到客户端的消息发布 GoEasy用来做什么 ...

  10. FTP:500 OOPS: failed to open vsftpd log file:/var/log/vsftpd.log

    如下:从10.12.8.165 FTP 到 10.1.3.34,报failed to open vsftpd log[a4_csbdc@localhost ~]$ ftp  10.1.3.34Conn ...