ECharts -堆叠柱状图_echart 堆叠柱状图-程序员宅基地
- 项目简介：ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。涵盖各行业图表，满足各种需求。
- 项目地址：https://gitee.com/echarts/echarts
现在公司刚分配一个任务，需要用到 echarts堆叠柱状图处理缺陷报表问题，以前也没有接触过，所以一边学习ECharts官网上的中文API（http://echarts.baidu.com/examples.html）下面就是我的代码以及最终效果图。
<html>
<head>
<base href="<%=basePath%>">
<title>堆叠柱状图</title>
<script type="text/javascript" src="js/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: '资源总览',
left:'20px',
textStyle: {
color: "#436EEE",
fontSize: 17,
}
},
tooltip: {
trigger: "axis",
},
legend: {
itemWidth:15,
itemHeight:15,
data:['可用','不可用'],
},
xAxis: {
data: ["网络设备","服务器","应用","其他","虚拟机","存储"],
splitLine:{
show:false,
},
},
yAxis: {
splitLine:{
show:false,
},
},
series: [{
name: '可用',
type: 'bar',
stack:'使用情况',
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
normal:{
color:"#FF8849"},
}
},{
name: '不可用',
type: 'bar',
stack:'使用情况',
data: [40, 22, 18, 35, 42, 40],
itemStyle:{
normal:{
color:"#3FBB49"},
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
智能推荐
spring-cloud-hystrix之spring-cloud-1.3.4(Dalston.SR3)-boot(1.5.6) 学习笔记_springcloud dalston.sr3怎么引用-程序员宅基地
文章浏览阅读341次。spring-cloud-hystrix之spring-cloud-1.3.4(Dalston.SR3)-boot(1.5.6) 学习笔记概述hystrix可单独使用,也可与feign搭配使用,详见HystrixTargeter参考 https://fangjian0423.github.io/2017/02/19/springcloud-hystrix/http://blog.csdn.n_springcloud dalston.sr3怎么引用
ubuntu下将本地vscode编辑器通过ssh和远程服务器进行连接并使用远程的Python环境_ubuntu 通过 ssh 连接到远程服务器方便编辑代码的工具-程序员宅基地
文章浏览阅读991次。前言：在程序员的日常开发工作中，会遇到这样的情况，我们需要用自己本地的工作笔记本连接到大的服务器进行开发，因为大服务器的硬件性能强悍，有很多软件环境。我们在自己的笔记本进行开发需要用到这些软硬件环境，尤其在深度学习项目开发过程中，需要非常好的显卡，而显卡资源一般都部署在大服务器上。下面讲具体步骤：ssh和vscode的安装不再赘述，网上有很多教程。1，打开vscode编辑器，进入"扩展：商店"：在搜索框里搜索Remote-SSH，下载好这个插件。2，点击左下角绿色部分"打开远程窗口"，出现下图内容_ubuntu 通过 ssh 连接到远程服务器方便编辑代码的工具
GPU加速在前端的应用-程序员宅基地
文章浏览阅读3.2k次，点赞4次，收藏13次。概述GPU(Graphics Processing Unit) 图形处理单元，又称图形处理器，是我们所周知的显卡的核心部件，是显卡的“心脏”。按照字面意..._前台应用加速核心
C#串口通信从入门到精通（11）——串口接收的数据存储到本地文件（txt、csv）_读取并保存串口发送来的数据-程序员宅基地
文章浏览阅读4.3k次，点赞5次，收藏18次。本文详细介绍如何将串口通信将数据进行本次存储，主要介绍常用的csv、txt格式文件，由多年实战经验总结，绝对干货！_读取并保存串口发送来的数据
synchronized锁住的是什么？_如果为put方法加synchronized锁,锁住的是什么?是一个put还是所有put方法?-程序员宅基地
文章浏览阅读229次。对象锁：同步方法锁住的是对象A.一个对象+有多个synchronized方法：某一时刻内，只要有一个线程去调用其中一个synchronized 方法，其他的线程都要等待。B.一个对象中+synchronized方法+非synchronized方法：某个线程访问同步方法不影响其他线程访问非同步方法C.多个对象+多个同步方法：访问不同的对象的同步方法不会相互影响全局锁：静态同步方法锁的是当前的..._如果为put方法加synchronized锁,锁住的是什么?是一个put还是所有put方法?
outlook邮箱邮件内容乱码_邮件标题乱码问题解决一例-程序员宅基地
文章浏览阅读2.5k次。最近有用户反馈在mac下通过airmail、outlook这样的邮件客户端查看系统发出邮件的标题显示为乱码，但是windows下正常。通过邮件客户端保存为eml，用sublime text 2打开，可以发现展示为以下效果：Date: Wed, 01 Jul 2015 19:54:57 +0800From: To: "=?GBK?B?zt6+zA==?=" Subject: [MTLÑз¢Ö§³Å..._outlook 2013 转发邮件 乱码
随便推点
PLM助力国防军工制造业工艺数字化-程序员宅基地
文章浏览阅读192次。1制造业数字化工艺目标1) 通过PLM项目的实施能够理顺企...
攻防_漏洞_文件包含_文件包含漏洞详解_ctf 文件包含-程序员宅基地
文章浏览阅读3.7k次，点赞5次，收藏17次。文件包含漏洞详解_ctf 文件包含
javaweb-java占位符的使用_%x java-程序员宅基地
文章浏览阅读970次。文章目录java占位符具体使用搭配转换符的标志java占位符拼接字符串显示十分麻烦，因此java中存在大量占位符用来规范输出诸如：String.format("0.5(-%d)+", i)，类似c语言的printf方法，比“0.5（-”+…更加简洁易懂String类的format()方法具体使用format(String format, Object… args) 新字符串使用本地语言环境，制定字符串格式和参数生成格式化的新字符串。format(Locale locale, String fo_%x java
【深度学习基础】反向传播BP算法原理详解及实战演示（附源码）_反向传播算法-程序员宅基地
文章浏览阅读2.8k次，点赞34次，收藏48次。【深度学习基础】反向传播BP算法原理详解及实战演示（附源码）_反向传播算法
Linux—Ubuntu12.04下安装tree_下载tree-程序员宅基地
文章浏览阅读1.6k次，点赞2次，收藏4次。Linux—Ubuntu12.04下安装tree1、下载tree安装包，命令：wget http://mama.indstate.edu/user/ice/tree/src/tree-1.7.0.tgz2、解压tree安装包,命令：tar -zxvf tree-1.7.0.tgz3、 进入解压目录，命令：cd tree-1.7.04、 安装文件，命令：make install5、 测试使用，命令：tree亲测有效!详见转载：我用#CSDN#这个app发现了有技术含量的博客，小伙伴们求同去《L_下载tree
Excel中vlookup模糊查找的妙用（模糊匹配）_vlookup关键字模糊匹配-程序员宅基地
文章浏览阅读5k次，点赞2次，收藏4次。查找数据是否存在与另一个单元格区域中_vlookup关键字模糊匹配