echarts象形柱图自定义样式（类似柱状图）

最新推荐文章于 2024-05-10 11:47:36 发布
最新推荐文章于 2024-05-10 11:47:36 发布
阅读量8.5k 收藏 27
点赞数 4
分类专栏： echarts 文章标签： 象形柱图 柱状图 自定义样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miracle__Y/article/details/104255014
版权

象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图，往往用在信息图中，用于有至少一个类目轴或时间轴的直角坐标系上。

先上一个简单的效果：

 其实实现思路主要在于：绘制具有颜色定义的背景以及对应的数据标识列，废话咱也不多说，直接上代码，此代码可直接复制至echarts官网运行查看。

var maxData = 2000; 
option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '2%',
        containLabel: true
    },
    xAxis: {
    	axisLine:{
            	show:false // 是否显示坐标轴
        },
        axisTick: {
            show: false  //是否显示坐标轴刻度
        },
        data: ['手术室','CT室','心内科','口腔科','ICU室','眼科','放射科','导管室','供应室','神外科']
    },
    yAxis: {
        max:maxData,
        show:false,
    }, 
    series: [{
        type: 'pictorialBar',
        symbol: 'rect',
        symbolSize: [50, 10],
        color:'#7f71e2',
        symbolRepeat: true,
        symbolBoundingData: maxData,
        data:  [
            {
                value:120,
                itemStyle: {
                    color:'#7f71e2'
                }
            },{
                value:110,
                itemStyle: {
                    color:'#4aa1e1'
                }
            },{
                value:130,
                itemStyle: {
                    color:'#6494db'
                }
            },{
                value:450,
                itemStyle: {
                    color:'#159be4'
                }
            },{
                value:345,
                itemStyle: {
                    color:'#4ebcff'
                }
            },{
                value:784,
                itemStyle: {
                    color:'#05d4b5'
                }
            },{
                value:103,
                itemStyle: {
                    color:'#2fcd97'
                }
            },{
                value:403,
                itemStyle: {
                    color:'#23d2c9'
                }
            },{
                value:563,
                itemStyle: {
                    color:'#80d985'
                }
            },{
                value:132,
                itemStyle: {
                    color:'#a6c34c'
                }
            }
        ],
        z:10
    },{
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.2,
                barBorderRadius: 100
            }
        }, 
        animationDuration: 0,
        symbolRepeat: 'fixed', //使图形元素重复
        symbol: 'rect',
        symbolSize: [50,10],
        symbolBoundingData: maxData,
        data: [
            {
                value:120,
                itemStyle: {
                    color:'#7f71e2'
                }
            },{
                value:110,
                itemStyle: {
                    color:'#4aa1e1'
                }
            },{
                value:130,
                itemStyle: {
                    color:'#6494db'
                }
            },{
                value:450,
                itemStyle: {
                    color:'#159be4'
                }
            },{
                value:345,
                itemStyle: {
                    color:'#4ebcff'
                }
            },{
                value:784,
                itemStyle: {
                    color:'#05d4b5'
                }
            },{
                value:103,
                itemStyle: {
                    color:'#2fcd97'
                }
            },{
                value:403,
                itemStyle: {
                    color:'#23d2c9'
                }
            },{
                value:563,
                itemStyle: {
                    color:'#80d985'
                }
            },{
                value:132,
                itemStyle: {
                    color:'#a6c34c'
                }
            }
        ],
        markPoint: {
        	label:{
        		show:true,
        		formatter:'{c}'
        	},
        	itemStyle: {
    			borderColor: "#fff" ,
    			shadowColor:"#b3b2b2",
    			shadowBlur: 10,
    			borderWidth: 2 ,
        	},
    		symbolOffset:[0,-10],
            data: [
                {
                	value:120,
                	xAxis:0, 
                	yAxis:maxData,
                	itemStyle: {
            			color:'#7f71e2'
        			},
                },{
                    value:110,
                    xAxis:1, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#4aa1e1'
                    }
                },{
                    value:130,
                    xAxis:2, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#6494db'
                    }
                },{
                    value:450,
                    xAxis:3, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#159be4'
                    }
                },{
                    value:345,
                    xAxis:4, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#4ebcff'
                    }
                },{
                    value:784,
                    xAxis:5, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#05d4b5'
                    }
                },{
                    value:103,
                    xAxis:6, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#2fcd97'
                    }
                },{
                    value:403,
                    xAxis:7, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#23d2c9'
                    }
                },{
                    value:563,
                    xAxis:8, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#80d985'
                    }
                },{
                    value:132,
                    xAxis:9, 
                	yAxis:maxData,
                    itemStyle: {
                        color:'#a6c34c'
                    }
                }
            ]
        },
        z: 5
    }]
}

 symbol属性可以设置图形类型，echarts提供的标记类型有【circle】【rect】【roundRect】【triangle】【diamond】【pin】【arrow】【none】。

当然，亦可通过设置图片来达到我们在实际业务中所需要的效果，可通过【image://url】设置为图片，其中url为图片链接。

下面我们就来一个使用图片来实现的效果：

代码呈上：

var maxData = 1000; 
option = {
 	grid: {
        left: '3%',
        right: '4%',
        bottom: '2%',
        containLabel: true
    },
    xAxis: {
    	axisLine:{
            	show:false // 是否显示坐标轴
        },
        axisTick: {
            show: false  //是否显示坐标轴刻度
        },
        data: ['滑轮','电源线','滑轮','电源线','滑轮','电源线','滑轮','电源线','滑轮']
    },
    yAxis: {
        max:maxData,
        show:false,
    }, 
    series: [{
        type: 'pictorialBar',
        symbolSize: [50, 10],
        color:'#7f71e2',
        symbolRepeat: true,
        symbolBoundingData: maxData,
        data:  [
            {
                value:920,
                itemStyle: {
                    color:'#7f71e2'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWNcKxXwn4E4wBj0dD0DAwMDwzrpQAYGBoZBqY+JSMOHDBj10GAHox4a7GDUQ4MdjHposAMATc8OKkrHJNwAAAAASUVORK5CYII=',
            },{
                value:890,
                itemStyle: {
                    color:'#4aa1e1'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWP8u9DjPwNxgJEpbjsDAwMDw79FngwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcA03EO+XdHrqoAAAAASUVORK5CYII=',
            },{
                value:880,
                itemStyle: {
                    color:'#6494db'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWPkTl34n4E4wPhlVhwDAwMDA0/aIgYGBoZBqY+JSMOHDBj10GAHox4a7GDUQ4MdjHposAMAHHwOJKeijY8AAAAASUVORK5CYII=',
            },{
                value:860,
                itemStyle: {
                    color:'#159be4'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWPMOX39PwNxgHGyiQYDAwMDQ+6ZGwwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcAFO8PId+i7t4AAAAASUVORK5CYII=',
            },{
                value:850,
                itemStyle: {
                    color:'#4ebcff'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAN0lEQVRIiWNUnv//PwNxgPFOAoShsoCBgYGBYVDqYyLS8CEDRj002MGohwY7GPXQYAejHhrsAAB1KAvUwPRZUAAAAABJRU5ErkJggg==',
            },{
                value:820,
                itemStyle: {
                    color:'#05d4b5'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWNsjv3wn4E4wFiziJ+BgYGBoSXuIwMDA8Og1MdEpOFDBox6aLCDUQ8NdjDqocEORj002AEAIO8O42bcG50AAAAASUVORK5CYII=',
            },{
                value:750,
                itemStyle: {
                    color:'#2fcd97'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWPMubX3PwNxgHGyqhMDAwMDQ+7tfQwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcAvEoPFv3RdPsAAAAASUVORK5CYII=',
            },{
                value:720,
                itemStyle: {
                    color:'#23d2c9'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAN0lEQVRIiWP877ziPwNxgJFhTziE5bKSgYGBYVDqYyLS8CEDRj002MGohwY7GPXQYAejHhrsAAC6+gv9qxbDzwAAAABJRU5ErkJggg==',
            },{
                value:600,
                itemStyle: {
                    color:'#80d985'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWP8dS7hPwNxgJHVcD4DAwMDw+/ziQwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcA55QPOy2F96cAAAAASUVORK5CYII=',
            } 
        ],
        z:10
    },{
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.2,
                barBorderRadius: 100
            }
        }, 
        animationDuration: 0,
        symbolRepeat: 'fixed', //使图形元素重复 
        symbolSize: [50,10],
        symbolBoundingData: maxData,
        data: [
            {
                value:920,
                itemStyle: {
                    color:'#7f71e2'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWNcKxXwn4E4wBj0dD0DAwMDwzrpQAYGBoZBqY+JSMOHDBj10GAHox4a7GDUQ4MdjHposAMATc8OKkrHJNwAAAAASUVORK5CYII=',
            },{
                value:890,
                itemStyle: {
                    color:'#4aa1e1'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWP8u9DjPwNxgJEpbjsDAwMDw79FngwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcA03EO+XdHrqoAAAAASUVORK5CYII=',
            },{
                value:880,
                itemStyle: {
                    color:'#6494db'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWPkTl34n4E4wPhlVhwDAwMDA0/aIgYGBoZBqY+JSMOHDBj10GAHox4a7GDUQ4MdjHposAMAHHwOJKeijY8AAAAASUVORK5CYII=',
            },{
                value:860,
                itemStyle: {
                    color:'#159be4'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWPMOX39PwNxgHGyiQYDAwMDQ+6ZGwwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcAFO8PId+i7t4AAAAASUVORK5CYII=',
            },{
                value:850,
                itemStyle: {
                    color:'#4ebcff'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAN0lEQVRIiWNUnv//PwNxgPFOAoShsoCBgYGBYVDqYyLS8CEDRj002MGohwY7GPXQYAejHhrsAAB1KAvUwPRZUAAAAABJRU5ErkJggg==',
            },{
                value:820,
                itemStyle: {
                    color:'#05d4b5'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWNsjv3wn4E4wFiziJ+BgYGBoSXuIwMDA8Og1MdEpOFDBox6aLCDUQ8NdjDqocEORj002AEAIO8O42bcG50AAAAASUVORK5CYII=',
            },{
                value:750,
                itemStyle: {
                    color:'#2fcd97'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWPMubX3PwNxgHGyqhMDAwMDQ+7tfQwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcAvEoPFv3RdPsAAAAASUVORK5CYII=',
            },{
                value:720,
                itemStyle: {
                    color:'#23d2c9'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAN0lEQVRIiWP877ziPwNxgJFhTziE5bKSgYGBYVDqYyLS8CEDRj002MGohwY7GPXQYAejHhrsAAC6+gv9qxbDzwAAAABJRU5ErkJggg==',
            },{
                value:600,
                itemStyle: {
                    color:'#80d985'
                },
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWP8dS7hPwNxgJHVcD4DAwMDw+/ziQwMDAyDUh8TkYYPGTDqocEORj002MGohwY7GPXQYAcA55QPOy2F96cAAAAASUVORK5CYII=',
            } 
        ],
        markPoint: {
        	label:{
        		show:true,
        		formatter:'{c}'
        	},
        	itemStyle: {
				borderColor: "#fff" ,
				shadowColor:"#b3b2b2",
				shadowBlur: 10,
				borderWidth: 2 ,
        	},
    		symbolOffset:[0,-10],
            data: [
                {
                	value:920,
                	xAxis:0, 
                	yAxis:maxData,
                	itemStyle: {
            			color:'#7f71e2'
        			},
                },{
	                value:890,
	                xAxis:1, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#4aa1e1'
	                }
	            },{
	                value:880,
	                xAxis:2, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#6494db'
	                }
	            },{
	                value:860,
	                xAxis:3, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#159be4'
	                }
	            },{
	                value:850,
	                xAxis:4, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#4ebcff'
	                }
	            },{
	                value:820,
	                xAxis:5, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#05d4b5'
	                }
	            },{
	                value:750,
	                xAxis:6, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#2fcd97'
	                }
	            },{
	                value:720,
	                xAxis:7, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#23d2c9'
	                }
	            },{
	                value:600,
	                xAxis:8, 
                	yAxis:maxData,
	                itemStyle: {
	                    color:'#80d985'
	                }
	            } 
            ]
        },
        z: 5
    }]
}

 我们使用的图片大致是这个样子的：（可复制base64编码转译查看）

注意：在写图片地址时，一定不要忘记写image://！！！一定注意！！！

不忘初心 丶
关注
  • 4
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts象形柱图
07-31
echarts象形柱图
象形柱状图加渐变 加随机数.html
04-28
Echarts象形柱状图渐变色加随机数,下载后可直接看效果
echarts添加图形标记（三角形、矩形......）
最新发布
qq_47199913的博客
05-10 356
此外，ECharts还支持自定义标记图形，你可以通过定义SVG路径数据来创建完全自定义的形状。但这种高级用法较为复杂，通常需要对SVG有一定的了解。配置允许你为数据点添加特殊的标记，以突出显示某些具有重要意义的数据，比如最大值、最小值或者平均值等。属性用来定义这些标记的图形样式。除了这些内置的图形，你还可以使用图片作为标记，通过设置。
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图
03-20
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图，数据驱动更新charts （备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PictorialBar
echarts 实现圆柱体图形.zip
05-14
echarts实现平面的柱状图很顺利，但是用户为了美观，立体感，用到圆柱体图，网上也查了很多资料，自己做了很好看的效果，希望大家能采用到。
Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图
askuld的博客
08-18 903
象形柱图实现水塔水位的动画和水球图
echarts 象形柱图pictorialBar
weixin_43294560的博客
08-11 8179
象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形 1、配置data data:[{ value:n, symbol:'circle', 自定义图像 symbolSize:['100%','100%'] 当symbolBoundingData未设置时,默认填充整个图像高度到value对应的高度 ['30%', '50%']，那么最终图形的尺寸是： 宽度：基准柱的宽度 * 30%。 高度：
echarts 象形柱图_矢量图_自定义样式
aibujin的博客
04-23 1645
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、vue echarts
echarts柱状图的样式调整及应用
qq_45991812的博客
03-09 6072
/symbolOffset: [0,-5],//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //坐标轴上显示的文字。data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据。color: 'rgba(85, 88, 95, 1)' //x轴坐标的文字颜色。
数据可视化ECharts:定制柱状图bar
薛定谔的猫
11-01 1445
data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px。- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px。- Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框。- 分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)// x轴中更换data数据。
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
xiaoming4965的博客
08-31 753
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
数据可视化！全面了解象形柱形图！
weixin_65518219的博客
06-17 1053
象形柱图它利用SVG图片和形状来表现数据，能够让数据展现更加贴近数据故事背景，视觉表达更为丰富生动。你可以通过新增的内置多种图案快速实现数据形态的修饰，同时结合图案的个性化设置效果搭配来改变数据的展现效果。今天让我们来学习一下象形柱形图，加深对它的了解吧。“.json”是用来存储简单的数据接口和对象的文件；json是一种轻量级的数据交换格式，基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据，用于许多web应用程序来进行数据交换。2.导入库。
echarts象形柱状图
tt1234561009的博客
05-26 984
/ num:数字 len:保留小数点位数if (!num += ".";
echart自定义图片填充柱状图
qq_35946021的博客
04-22 385
echart用自定义图片填充柱状图 加记得加image://或者直接使用bas64格式图片。关键代码 type: 'pictorialBar'echart用自定义图片填充柱状图。
Echart 图表模板变量 {a}, {b}，{c}，{d}，{e}
happy81997的博客
10-24 2718
Echart 图表模板变量 {a}, {b}，{c}，{d}，{e} 模板变量有{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在trigger为'axis'的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b...
echarts分段式的象形柱图
weixin_43773218的博客
07-25 1964
我一开始想到的自然是用elementui的进度条来做，但找了许久都没找到这种的样式效果。于是考虑用柱状图，如果这三个数据只用一个柱状图自然很难实现这样的效果(对我而言)，于是就考虑用三个柱状图，一条数据就用一个柱状图。，然后其余的数据就通过el-row和el-col布局来实现。下层块是下面一层颜色较浅的部分，下层块是上面颜色较深的部分。这种类似的效果图在echarts官方示例中叫。ranking是后端返回的数据。options配置如下。这是设置柱体颜色渐变。...
Echarts 象形柱状图（pictorialBar）
不同场景下的水平居中
03-15 8166
Echarts 象形柱状图
Echarts自定义柱状图
weixin_68854196的博客
10-20 1006
自定义柱状图

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值