原文出处:https://blog.csdn.net/singsingasong/article/details/77254687
参考:http://echarts.baidu.com/echarts2/doc/example/toolbox.html
关键行: icon:'image://images/more.png',
<!--chart1-->
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart1'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
tooltip: {
show: true,
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
toolbox: {
show: true,
feature: {
myTool: {
show: true,
title: '自定义扩展方法',
icon:'image://images/more.png',
z:'999',
left:'center',
onclick: function (){
alert('myToolHandler2')
}
}
}
},
legend: {
data: ['住户', '租户'],
right: '10%',
top: '20px'
},
itemStyle: {
normal: {},
emphasis: {
barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
},
title: {
text: '居住人群统计',
x: 'center'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
data: []
},
yAxis:{},
series: [{
name: '住户',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '租户',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
}]
})
// myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var xAxisData = [];
var render = [];
var residnet = [];
$.ajax({
type : "post",
// async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url: "http://10.1.17.11:8090/safecity/examineEquipment",
url: "http://10.1.17.11:8090/safecity/examineEquipment",
data : {
//需要读取
},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
}
})
</script>
注意红色部分,容易出错的是黄色高亮处的代码——
格式必须是: icon : ' image://(图片/图标的路径) '
效果图如下:
右上角的‘点点点’就是我从font-awesome上找来的图标。