Echarts实现堆叠柱状图+折线图

Echarts实现堆叠柱状图+折线图，以便后续使用时复制

//堆疊Bar圖+折線圖
option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#283b56'}}},legend: {data:['不良率','队列','队列2']},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: '不良率',min: 0,boundaryGap: [0.2, 0.2],axisLabel: {formatter: function (value) {return value.toFixed(2)+'%';}}},{type: 'value',scale: true,name: '预购量',min: 0,boundaryGap: [0.2, 0.2],splitLine:{show:false}}],series: [{name:'队列',type:'bar',yAxisIndex: 1,stack:'one',data:(function (){var res = [];var len = 10;while (len--) {res.push(Math.round(Math.random() * 1000));}return res;})()},{name:'队列2',type:'bar',yAxisIndex: 1,stack:'one',data:(function (){var res = [];var len = 10;while (len--) {res.push(Math.round(Math.random() * 1000));}return res;})()},{name:'不良率',type:'line',data:(function (){var res = [];var len = 0;while (len < 10) {res.push((Math.random()*10 + 5).toFixed(1) - 0);len++;}return res;})(),label:{show:true,formatter: '{c}%'  }}]
};app.count = 11;
setInterval(function (){axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');var data0 = option.series[0].data;var data1 = option.series[1].data;var data2 = option.series[2].data;data0.shift();data0.push(Math.round(Math.random() * 1000));data1.shift();data1.push(Math.round(Math.random() * 1000));data2.shift();data2.push((Math.random() * 10 + 5).toFixed(1) - 0);option.xAxis[0].data.shift();option.xAxis[0].data.push(axisData);myChart.setOption(option);
}, 2000);

Echarts实现堆叠柱状图+折线图相关推荐

Echarts 教学渐变柱状图折线图嵌套饼图标签
哈哈最近在用Echarts 做东西顺便研究了一下Echarts 总结了一些比较常用的代码话不多说直接放代码这是取json的方式生成图表 myChart.showLoading(); // e ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
柱状图折线图混合使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>柱状图 ...
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
说一个小bug,解决echarts的叠堆折线图数据出现坐标和值对不上的问题. 在echarts的叠堆折线图中,有这样的一个问题,从后端请求过来的数据是正确的,但是请求的y轴的值和y轴坐标对不上. 这个 ...
echarts：多组折线-图
Echarts是一个基于JavaScript的开源可视化库,它可以用来绘制各种类型的图表,包括折线图.柱状图.饼图等等.在本文中,我们将使用Echarts绘制一个多组折线-图的完整示例. echart ...
php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...
Origin: 双Y轴 | 柱状图 | 折线图 | 垂线散点图的结合绘制
origin | 双Y轴 | 添加图层 | 柱状图 | 折线图 | 散点图一.前言二.数据准备三.绘图 3.1 图层1-绘制柱状图 3.2 图层2-折线图的绘制 3.2.1 添加新图层-折线图 ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...

Echarts实现堆叠柱状图+折线图

Echarts实现堆叠柱状图+折线图相关推荐

最新文章

热门文章