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 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
javascript常用的方法整理
Aug 20 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 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
改造一台复古桌面收音机
2021/03/02 无线电
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
js实现登录验证码
2016/12/22 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
Python功能键的读取方法
2015/05/28 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
教师调动申请报告
2015/05/18 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS