如何在echarts 上面自定义图形

Posted 2023-02-26

参考技术A 图片中红色框起来的按钮
2、代码

[javascript] view plain copy
selfButtons://自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
show:true,//是否显示
title:'自定义', //鼠标移动上去显示的文字
icon:'test.png', //图标
option:,
onclick:function(option1) //点击事件,这里的option1是chart的option信息
alert('1');//这里可以加入自己的处理代码，切换不同的图形


在toolbox中的位置

[javascript] view plain copy
toolbox:
show : true,
feature :
mark : show: true,
dataView : show: true, readOnly: false,
magicType : show: true, type: ['line', 'bar'],
restore : show: true,
selfButtons://自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
show:true,//是否显示
title:'自定义', //鼠标移动上去显示的文字
icon:'test.png', //图标
option:,
onclick:function(option1) //点击事件,这里的option1是chart的option信息
alert('1');//这里可以加入自己的处理代码，切换不同的图形

,
saveAsImage : show: true



当然，内置了很多图标，这些图标都是画出来的。

[javascript] view plain copy
iconLibrary:
mark: _iconMark,
markUndo: _iconMarkUndo,
markClear: _iconMarkClear,
dataZoom: _iconDataZoom,
dataZoomReset: _iconDataZoomReset,
restore: _iconRestore,
lineChart: _iconLineChart,
barChart: _iconBarChart,
pieChart: _iconPieChart,
funnelChart: _iconFunnelChart,
forceChart: _iconForceChart,
chordChart: _iconChordChart,
stackChart: _iconStackChart,
tiledChart: _iconTiledChart,
dataView: _iconDataView,
saveAsImage: _iconSave,
cross: _iconCross,
circle: _iconCircle,
rectangle: _iconRectangle,
triangle: _iconTriangle,
diamond: _iconDiamond,
arrow: _iconArrow,
star: _iconStar,
heart: _iconHeart,
droplet: _iconDroplet,
pin: _iconPin,
image: _iconImage


带chart后缀的都放在magicType的type中，同时后缀chart不用，程序里会自动拼接，比如lineChart，写'line'本回答被提问者采纳