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

谁践踏了优雅 2022-05-19 01:36 557阅读 0赞

原文出处：[https://blog.csdn.net/singsingasong/article/details/77254687][https_blog.csdn.net_singsingasong_article_details_77254687]

参考：[http://echarts.baidu.com/echarts2/doc/example/toolbox.html][http_echarts.baidu.com_echarts2_doc_example_toolbox.html]  
关键行： icon:'image://images/more.png',

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

[https_blog.csdn.net_singsingasong_article_details_77254687]: https://blog.csdn.net/singsingasong/article/details/77254687
[http_echarts.baidu.com_echarts2_doc_example_toolbox.html]: http://echarts.baidu.com/echarts2/doc/example/toolbox.html