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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
vue之数据交互实例代码
Jun 16 Javascript
vue之数据交互实例代码
Jun 20 Javascript
基于jquery实现五星好评
Nov 18 jQuery
Angular4 反向代理Details实践
May 30 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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
Yii中render和renderPartial的区别
2014/09/03 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
numpy排序与集合运算用法示例
2017/12/15 Python
5款非常棒的Python工具
2018/01/05 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
奥巴马上海演讲稿
2014/09/10 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
python和anaconda的区别
2022/05/06 Python
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技