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

最新推荐文章于 2024-05-28 21:17:54 发布
最新推荐文章于 2024-05-28 21:17:54 发布
阅读量926 收藏 19
点赞数 24
分类专栏： 2024年程序员学习 文章标签： 物联网 嵌入式硬件 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85014296/article/details/138977070
版权

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。
img
img

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

    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](https://bbs.csdn.net/topics/618679757)属性可以设置图形类型，echarts提供的标记类型有【circle】【rect】【roundRect】【triangle】【diamond】【pin】【arrow】【none】。


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


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


![](https://img-blog.csdnimg.cn/20200210212838332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pcmFjbGVfX1k=,size_16,color_FFFFFF,t_70)


代码呈上：

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==’,

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。
img
img

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
[外链图片转存中…(img-V69i9IlO-1715868995308)]
[外链图片转存中…(img-sp6WGBmr-1715868995308)]

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_85014296
关注
  • 24
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts象形柱图
07-31
echarts象形柱图
echarts做渐变色象形图
jinggaoniao的博客
08-12 1258
要实现的效果如下图所示： 话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts 渐变色象形图</title> <script src="echarts.min.js"></script> <style> div{width
echarts-象形柱图
最新发布
m0_74019046的博客
05-28 567
一般的柱图都是纯色柱图，使用象形柱图可以给柱图定义自己的样式。样式的调节与柱图一样，核心在于symbol调节柱图的组成。使用symbol设置图形类型symbolRepeat:指定图形元素是否重复。设置symbolRepeat后图形会堆叠。设置 symbolSize调整大小后会有层叠的效果。
echart象形图-三角锥形/山峰形/三角形--柱子渐变色，x轴换行显示，加单位显示
XiaoHuanhu的博客
07-15 3205
效果图： <div id="divChart" :style="{ width: '100%', height: '100%' }"></div> export default { name: "echartDiv", data() { return { option: { tooltip: { trigger: "axis", axisPointer: { ..
最全echarts象形柱图自定义样式（类似柱状图），物联网嵌入式开发之内存泄漏调试学习与总结
2401_85015249的博客
05-15 2170
data: [‘滑轮’,‘电源线’,‘滑轮’,‘电源线’,‘滑轮’,‘电源线’,‘滑轮’,‘电源线’,‘滑轮’](img-QpKch06q-1715719697846)](img-PXbwIEeB-1715719697847)]symbolRepeat: ‘fixed’, //使图形元素重复。show: false //是否显示坐标轴刻度。show:false // 是否显示坐标轴。
echarts 象形柱图_矢量图_自定义样式
aibujin的博客
04-23 1723
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、vue echarts
2024年最新echarts象形柱图自定义样式（类似柱状图）(1)，2024年最新2024年华为物联网嵌入式开发面试真题解析
2401_85015500的博客
05-14 226
属性可以设置图形类型，echarts提供的标记类型有【circle】【rect】【roundRect】【triangle】【diamond】【pin】【arrow】【none】。当然，亦可通过设置图片来达到我们在实际业务中所需要的效果，可通过【image://url】设置为图片，其中url为图片链接。
Echarts 自定义象形柱图Spirits
zmyalh的博客
11-07 322
Echarts 自定义象形柱图Spirits
echarts柱状图自定义样式（一）
miracle__Y的博客
02-09 7709
在最近业务开展过程中，涉及到highcharts和echarts的图表数据展示颇多，后UI设计师根据数据展示要求设计出花里胡哨的图表样式，正好最近也来研究一下，后续会补几篇相关博文。废话也不多说，先上效果： 以下为实例代码（可直接复制至echarts官网查看效果） option = { grid: { left: '-5%', right:...
象形柱状图加渐变 加随机数.html
04-28
Echarts象形柱状图渐变色加随机数,下载后可直接看效果
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图
03-20
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图，数据驱动更新charts （备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PictorialBar
echarts 实现圆柱体图形.zip
05-14
总之，将 ECharts 柱状图转化为圆柱体图需要利用其 WebGL 渲染器并编写自定义着色器，同时结合 ECharts 的其他配置项实现数据映射、动画、交互性和性能优化。通过这样的方式，我们可以创建出具有立体感和美观性的...
Echarts5开源可视化图表库开发的象形柱图世界旅游景点日记照片墙
02-10
Echarts5开源可视化图表库 1. 图表基础框架的搭建； 2. series-pictorialBar，象形柱图； 3. series-bar，柱状图； 4. dataZoom 组件，用于区域缩放； 5. on方法添加事件处理函数；
echarts横向堆叠柱状图.zip
10-11
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等。在本案例中，我们关注的是如何在 ECharts 中实现横向堆叠柱状图。首先，我们需要...
埃及象形文字数据集 JPG（2K+图片）【500010083】
11-08
该数据集名为“埃及象形文字数据集 JPG（2K+图片）【500010083】”，其主要包含与古埃及象形文字相关的2000多张JPEG格式的图像，旨在为计算机视觉、图像识别或机器学习的研究提供素材。这些图片可能用于训练模型来...
Wyn Enterprise-象形柱状图.viz
09-09
Wyn Enterprise-象形柱状图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值