Echarts图表之堆积柱形图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
backgroundColor: '#000',
legend: {
top: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.7)'
},
data: ['涉恐人员', '涉稳人员', '涉毒人员', '在逃人员', '重点上访人员', '肇事肇祸精神病人', '刑事犯罪前科人员']
},
grid: {
left: 10,
right: 10,
top: 40,
bottom: 10,
containLabel: true
},
xAxis: [{
//类目轴
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
data: ['康定市', '泸定县', '丹巴县', '九龙县', '新龙县', '巴塘县', '得荣县', '理塘县', '甘孜县', '道孚县', '德格县', '色达县']
}],
yAxis: [{
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} ml'
},
type: 'value'
}
],
series: [
{
name: '涉恐人员',
// 类型:堆积柱形图
type: 'bar',
// 柱形宽度
barWidth: 30,
// 统一的名,代表一类图,实现堆积效果
stack: '搜索引擎',
data: [620, 732, 701, 734, 1090, 1130, 1120, 620, 732, 701, 734, 1090, ]
},
{
name: '涉稳人员',
type: 'bar',
stack: '搜索引擎',
data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
},
{
name: '涉毒人员',
type: 'bar',
stack: '搜索引擎',
data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
}, ,
{
name: '在逃人员',
type: 'bar',
stack: '搜索引擎',
data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
},
{
name: '重点上访人员',
type: 'bar',
stack: '搜索引擎',
data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
},
{
name: '肇事肇祸精神病人',
type: 'bar',
stack: '搜索引擎',
data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
},
{
name: '重大刑事犯罪前科人员',
type: 'bar',
stack: '搜索引擎',
data: [62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
Echarts图表之堆积柱形图相关推荐
- excel行列互换_EXCEL图表中的堆积柱形图如何行列互换
堆积柱形图根据原始数据表格做出后,使用者可以根据用户需求对原始表格行列互换,从而改变柱形图所要传达的内容信息,从而满足用户的不同工作需求. 工具/原料 EXCEL 方法/步骤 如下图,图表的横坐标为[ ...
- Echarts图表之线性图、柱形图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- 物种丰度排序堆积柱形图及处理间各物种差异分析
物种丰度排序堆积柱形图及处理间各物种丰度非参数检验多组比较的R图形可视化 再美的可视化图形若缺少了统计检验就失去了灵魂而变得华而不实 测试数据及代码链接:https://pan.baidu.com/s ...
- excel柱状图堆叠图显示总和_Excel 的堆积柱形图上,怎样才能显示堆积图的总和?...
我发现很多同学在学习 Excel 的过程中,还不习惯用专业术语来描述问题,这就会导致提的问题,专业人士听不懂:专业人士的问答,他又听不懂. 比如,今天的标题,什么是"堆积柱形图"? ...
- excel柱状图堆叠图显示总和_如何在Excel堆积柱形图中显示合计值
在Excel中,用堆积柱形图可以比较相交于类别轴上的每一数值占总数值的大小.对于普通的簇状柱形图,我们可以在每个柱形系列的顶端放置一个数据标志,如数值,来反映各系列数据的大小.对于堆积柱形图,Exce ...
- excel柱状图堆叠图显示总和_Excel堆积柱形图同时显示合计值和构成值的方法介绍...
Excel堆积柱形图如何同时显示合计值和构成值?我们制作堆积柱形图时,往往只能看到各个组成部分的值或占比,但无法形象地体现出整体部分.作者这里介绍的就是通过设置柱形图的格式,将合计值.构成值同时显示的 ...
- 堆积柱形图显示总数_送你一份堆积柱形图小点心,请收下~
今日份小技巧 小悦今天要给大家分享一个很简单,又常常用到还特别实用的小功能,那就是我们如何快速在堆积柱形图中将总值显示到堆积图上面?接下来我们在这篇文章中,跟你分享一种使用组合图表的快速简便方法,来实 ...
- Echarts数据可视化series-bar柱形图详解,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- 堆积柱形图显示总数_在Excel堆积柱形图中显示合计值
在Excel中,用堆积柱形图可以比较相交于类别轴上的每一数值占总数值的大小.对于普通的簇状柱形图,我们可以在每个柱形系列的顶端放置一个数据标志,如数值,来反映各系列数据的大小.对于堆积柱形图,Exce ...
- Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
最新文章
- 数据结构与算法JavaScript描述——链表
- html文件怎么保存链接,如何使用beautifulsoup将链接的html保存在文件中,并对html文件中的所有链接执行相同的操作...
- Mysql修改数据库密码的几种方法
- 《OpenGL ES 3.x游戏开发(上卷)》一2.4 文件I/O
- mysql5.5.9_centos下mysql5.5.9编译安装
- 汪文君PowerMock实战视频
- html页面前端乱码,css网页代码乱码怎么解决?
- cryptojs php,CryptoJS简单使用方法
- 模式先行浅析分销系统的优势
- 服务器装系统就蓝屏怎么办,安装系统出现蓝屏,怎么办?
- Kettle连接mysql 驱动报 Driver class ‘org.gjt.mm.mysql.Driver‘ could not be found, make sure the ‘MySQL‘..
- 在企业里管理机器学习:来自银行和医疗行业的经验
- 用python做一个表白软件手机版_用python写一个5.20的表白小程序吧
- 2018 NOIP 普及组
- 宝石与石头(简单难度)
- HTML Canvas 涂鸦
- 国家气象局天气预报接口
- 文件随机或顺序读写原理深入浅出
- 用python抓取淘宝相关产品的价格及销量数据
- spice time step too small的解决办法
热门文章
- 人民币转换美金的c语言代码大全,美元换算(人民币换算)
- 基于nrf52832 mpu6050应用实例(7)
- 计算机的存储容量1kb表示什么,存储容量1kb等于多少字节
- UE4 HTC VIVE手柄按键对应Montion Controller 蓝图的命令
- 已下载好的OpenCV4.5.5 CMake .cache文件夹
- 阿里云国际版Windows操作系统的ECS云服务器上搭建WordPress网站
- CodeForces-1040B Shashlik Cooking(贪心)
- 提高软件开发工作效率的几种方法
- [good]使用Arduino操控RF 433Mhz射频发送器和接收器
- 物联网技术与应用知识点总结