向 echarts图标工具栏toolbox中加入自定义图标/图形

来源:互联网 发布:广东人吃福建人 知乎 编辑:程序博客网 时间:2024/06/16 17:52

首先参考一下官方文档:


接下来自己动手:

<!--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上找来的图标。

原创粉丝点击