echarts的实例中如何添加背景图片

在echarts最后面添加上这段代码就可以了

function eConsole(param) {//alert(option.series[0].data.length) //alert(option.series[0].data[i]) //param.dataIndex 获取当前点击索引， //alert(param.dataIndex) clickFunc(param.dataIndex)//执行点击效果 }myChart.on("click", eConsole)

效果图：

调用方式：

在yAxis中有一个rich设置，可以设置y轴的展示方式，比如添加图片等。

其他说明，在series中的label设置中，可以设置柱状图文字说明的样式。

图片中红色框起来的按钮

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'

---