Echarts 水桶注水式柱状图

效果图

代码：

<html>
<head><title></title>
</head>
<style type="text/css"></style>
<script type="text/javascript" src="js/echarts.js"></script>
<body><div id="_top" style="width: 800px;height: 600px;"></div>
</body>
<script type="text/javascript">var myChart = echarts.init(document.getElementById('_top'));var option = {tooltip: {              //图名show: false,        //是否显示图名                 },grid: {                 //图的相对位置top: '20%',left: '5%',right: '5%',bottom: '15%',},xAxis: {data: ['一班', '二班', '三班'],offset: 15,          //刻度内容距x轴的距离axisTick: {show: false     //显示刻度样式},axisLine: {show: true      //是否显示x轴},axisLabel: {color: '#aaa',  //刻度内容颜色fontSize: 14    //字体大小}},yAxis: {                    //y轴属性min: 0,                 //最小刻度max: 100,               //最大刻度splitLine: {show: false         //是否显示网格},axisTick: {show: true          //是否显示刻度样式},axisLine: {show: true          //是否显示y轴},axisLabel: {show: true          //是否显示y轴刻度内容},type:"value",           //y轴样式axisLabel: {color: '#aaa',      //刻度内容颜色fontSize: 14        //字体大小}},series: [{type: 'bar',            //echarts表格类型bar为柱状图label: {                //标签属性show: true,         //是否显示标签position: 'top',    //标签位置padding: 10,        //标签相对位置color: '#2979ff',   //标签颜色fontSize: 14,       //标签字体大小formatter: '{c}%'   //显示数字样式，百分比样式},itemStyle: {color:"blue"        //柱子颜色},barWidth: '30%',        //柱宽data: [49, 80, 67],     //数值代表柱子高度z: 5                    //显示层次}, {type: 'bar',barGap: '-100%',        //偏移尺度itemStyle: {color: '#536dfe',   opacity: 0.2        },barWidth: '30%',        data: [100, 100, 100],z: 15}],backgroundColor: "#190c12",};myChart.setOption(option);
</script>
</html>

分析：产生水桶注水样式原理：其实是一组两个柱状图，两个柱状图位置重叠(barGap属性)，显示层次不同(z属性)，便可以达到水桶注水的效果

转载于:https://www.cnblogs.com/wangqilong/p/9417507.html

echarts 水桶注水式柱状图相关推荐

css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
实现echarts图表响应式效果
echarts图表响应式最近应项目要求需要做响应式的echarts图表,开始在网上找了各种资源都没有找到如何操作.最后还是靠别人指点做出来的, 其实多看看文档也能明白,不过没那个耐心,哈哈.不多说上 ...
echarts如何显示多个柱形图_使用echarts画多维柱状图
前言在此之前,已经跟大家分享了如何使用echarts画折线图.双折线图.柱状图,今天跟大家分享一下使用echarts画多维柱状图. 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. ...
echarts学习1----格式整理以及地图入门
首先,Echarts是结合html/ javascript一起运用的,可以在线也可以离线使用. 下面是一个.html文件的代码及解析: <!DOCTYPE html> <head&g ...
绘制3D Echarts地图饼图堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
Echarts进度条式的柱状图
一.代码简介本次主要是在Vue web项目中,利用Echarts实现一个类似进度条似的.颜色渐变的水平柱状图二.功能预览三.示例代码 <template&g ...
echarts柱状图与轴不重叠_用Echarts做堆积的柱状图，当横轴为“time”类型时，都是从0开始显示，而不是叠加，为什么会这样？...
echarts为Echarts2,在自己页面上做没有效果,因此在其例子 http://echarts.baidu.com/echa- 的基础上改为下面的代码(横轴改为时间类型) var stime=' ...
SpringBoot+Vue+Echarts实现双柱体柱状图
场景若依前后端分离版本地搭建开发环境并运行项目的教程: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建架构的基础上,实现使用 ...

echarts 水桶注水式柱状图

Echarts 水桶注水式柱状图

echarts 水桶注水式柱状图相关推荐

最新文章

热门文章