echarts柱状图背景重叠组合而非并列的实现代码


Posted in Javascript onDecember 10, 2020

本文主要介绍柱状图重叠,实现条纹背景图和背景色的组合图。

一、关键性代码

// base64位背景图 此处可以改为相对路径 var barImage = './img/chart_bg.png';
// 在线上转base64位工具 https://www.sojson.com/image2base64.html 
var barImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozODBBRTU4RkZGNjUxMUU4Qjg0M0MyQjk1NEVFQTRCMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozODBBRTU5MEZGNjUxMUU4Qjg0M0MyQjk1NEVFQTRCMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4MEFFNThERkY2NTExRThCODQzQzJCOTU0RUVBNEIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM4MEFFNThFRkY2NTExRThCODQzQzJCOTU0RUVBNEIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+8z6pYgAAAOVJREFUeNpiFBQUZAACfiD+yMQAAR9BAkxQUbAAQAAxApXBlaBIfwQIIEaoCQzI6lE0w7QABBDMEAYkCQaYgShGIDsELoFuJgOyShQJgADC5iQGdIuRdSM7kwHNMXAH8WMxBUMDE7pOXBpYsFiF7mUwGyCA0EMNq0ewhSQ20xlwhS5WxUy4rMIVXwQV4wpHDMCEI/o+4lJIUDETviDBlSjwKgYI0EoZ3AAAhCDMsP+ybuAEWrjc3zSKDaRZOV/bVuxrcNP0An4BC86KwTKyi8CiTFKw3LBdsNIvEliverjdVFAUTbIP88I1kSgGzWQAAAAASUVORK5CYII='; 
var PatternImgA = new Image();
PatternImgA.src = barImage;
series: [
 {
     type: 'bar',
     data: arr,
     barWidth: 16,
     barCategoryGap: 23,
     margin: [0, 0, 0, 16],
     itemStyle: {
     	 //渐变色,也可以直接用数组给不同的柱子设置不同的颜色
       color: function (params) {
         return colorList[params.dataIndex];
       },
       barBorderRadius: [16, 16, 0, 0],
     },
     label: {
       show: true,
       fontSize: 12,
       position: 'top',
       color: '#AAAAAA',
     }
   },
   {
   	 //这里设置包含关系,只需要这一句话
     barGap: "-100%", 
     type: 'bar',
     data: arr,
     barWidth: 16,
     barCategoryGap: 23,
     itemStyle: {
     	 //此处引入条纹背景
       color: { image: PatternImgA, repeat: 'repeat' }, 
       barBorderRadius: [16, 16, 0, 0],
       xAxisIndex: 2,
       yAxisIndex: 2,
       zlevel: 2
     }
   }
 ]

二、代码层级

echarts柱状图背景重叠组合而非并列的实现代码

三、效果图

echarts柱状图背景重叠组合而非并列的实现代码

总结

到此这篇关于echarts柱状图背景重叠组合而非并列的文章就介绍到这了,更多相关echarts柱状图背景重叠组合内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
javascript实现放大镜功能
Dec 09 #Javascript
Javascript实现单选框效果
Dec 09 #Javascript
javascript实现移动端轮播图
Dec 09 #Javascript
JavaScript实现弹出窗口效果
Dec 09 #Javascript
五句话帮你轻松搞定js原型链
Dec 09 #Javascript
JS常用跨域方法实现原理解析
Dec 09 #Javascript
video.js添加自定义组件的方法
Dec 09 #Javascript
You might like
PHP 模板高级篇总结
2006/12/21 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Python中__name__的使用实例
2015/04/14 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python ATM功能实现代码实例
2020/03/19 Python
python import 上级目录的导入
2020/11/03 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
大学生收银员求职信分享
2014/01/02 职场文书
大学毕业感言
2014/01/10 职场文书
主持词开场白
2014/03/17 职场文书
环保倡议书400字
2014/05/15 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
见义勇为事迹材料
2014/12/24 职场文书
田径运动会通讯稿
2015/07/18 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript