可视化例子(12)——ECharts堆叠直方图

堆叠直方图主要是要 series.stack 属性一样。

全部代码如下

<!DOCTYPE html>
<html style="height: 100%">
<head><meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/echarts-gl.min.js"></script>
<script type="text/javascript" src="../js/theme/dark.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'dark');
var app = {};
option = null;//确诊人数
dataGD01 = [53,78,98,146,188,241,311,393,520,604,683,797,870,944,1018,1075,1120,1151,1177,1219,1241,1261,1294,1316,1322,1328,1331];
//累计出院
dataGD02 = [2,2,2,2,4,5,6,9,10,12,14,20,32,49,68,97,125,143,181,241,284,332,386,436,473,530,571];option = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},title: {text: '广东省每日确诊和累计出院人数变化趋势',top:20,left: 'center',textStyle:{fontSize: 25}},legend: {orient: 'vertical',itemWidth: 20,itemHeight:10,right: 50,top:15,data: [ '广东省每日确诊人数', '广东省每日累计出院人数']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',axisLabel:{'interval':0},data: ['1/23','1/24','1/25','1/26', '1/27','1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3','2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10','2/11','2/12','2/13','2/14','2/15','2/16','2/17','2/18']}],yAxis: [{type: 'value'}],series: [{name: '广东省每日确诊人数',type: 'bar',stack: '广告',barMinHeight: 2,data: dataGD01,label:{show: true},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#83bff6'},{offset: 0.5, color: '#188df0'},{offset: 1, color: '#188df0'}])}},{name: '广东省每日累计出院人数',type: 'bar',stack: '广告',barMinHeight: 2,data: dataGD02,label:{show: true},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#99D8C9'},{offset: 0.5, color: '#238B45'},{offset: 1, color: '#238B45'}])}}]
};
;
if (option && typeof option === "object") {myChart.setOption(option, true);
}
</script>
</body>
</html>

可视化例子(12)——ECharts堆叠直方图相关推荐

可视化例子(14)——ECharts波浪图(或者称为河流图)
主要是在 series.itemStyle 里面设置 areaStyle 属性 areaStyle:{ //有这个属性代表是波浪图color: new echarts.graphic.LinearGr ...
可视化例子(11)——ECharts line3D制作三维折线图
因工作需要,制作了三维折线图,可以看到三个变量的变化.其效果如下图所示: 其中遇到了一个很大的问题,line3D 无法出现标签(查看了所有配置项,均没有该配置,这应该是 ECharts 的一个 bug ...
R语言ggplot2可视化：可视化堆叠的直方图、添加每个分组的每个bin的计数标签、在堆叠直方图的bin中的每个分组部分添加数值标签
R语言ggplot2可视化:可视化堆叠的直方图.添加每个分组的每个bin的计数标签.在堆叠直方图的bin中的每个分组部分添加数值标签目录
12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
Echarts --- 可视化练习（line04 ---- 堆叠面积图）
文章目录 Echarts --- 可视化练习(line04 ---- 堆叠面积图) Flask HTML 效果展示知识点小归纳 Echarts - 可视化练习(line04 ---- 堆叠面积图) ...
R语言ggplot2可视化：可视化人口金字塔图、直方图（堆叠直方图、连续变量堆叠直方图、离散变量堆叠直方图）、密度图、箱图（添加抖动数据点、tufte箱图、多分类变量分组箱图）、小提琴图
R语言ggplot2可视化:可视化人口金字塔图.直方图(堆叠直方图.连续变量堆叠直方图.离散变量堆叠直方图).密度图.箱图(添加抖动数据点.tufte箱图.多分类变量分组箱图).小提琴图目录
【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据
目录精彩案例汇总效果展示一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1 ...
【1】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 互联网企业数据
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
在数据可视化大屏中,地图可视化是常用的高级图表之一. 很多小伙伴们以为地图太高大上了,那么实现起来估计也不容易,说实话,确实不那么容易,直接用echarts是要花些时间研究的,但是我们可以将其二次封装 ...

可视化例子(12)——ECharts堆叠直方图

可视化例子(12)——ECharts堆叠直方图相关推荐

最新文章

热门文章