Question

如何在echarts 上面自定义图形

Answer 1

图片中红色框起来的按钮
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'