echart 自定义按钮，能够设置宽高吗

可以通过样式来设置：

你可先给你的按钮设置一个class,比如：class="btn"；

方法有3种：

1.如果有你外链样式表你可以在样式表征

.btn{

width:200px

height:50px

}

2.如果没有连接你直接上头部加上

<style type="text/css">

.btn{

width:200px

height:50px

}

</style>

3.你可以直接在按钮上加比如：

<button style="width:200pxheight:50px">按钮</button>

图片中红色框起来的按钮

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'

---