Echarts工具栏（自定义按钮）

分手后的思念是犯贱 2023-07-01 05:26 87阅读 0赞

![20200119133836199.jpg][]

toolbox: { // 工具箱
                    show: false,
                    feature: {
                        myTool1: {    //必须要my开头
                            show: true,
                            title: '全市',
                            iconStyle: {
                                borderColor: '#ffffff'
                            },
                            icon:'path://M525.4 721.2H330.9c-9 0-18.5-7.7-18.5-18.1V311c0-9 9.3-18.1 18.5-18.1h336.6c9.3 0 18.5 9.1 18.5 18.1v232.7c0 6 8.8 12.1 15 12.1 6.2 0 15-6 15-12.1V311c0-25.6-25.3-48.9-50.1-48.9h-335c-26.2 0-50.1 23.3-50.1 48.9v389.1c0 36.3 20 51.5 50.1 51.5h197.6c6.2 0 9.3-7.5 9.3-15.1 0-6-6.2-15.3-12.4-15.3zM378.8 580.6c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h141.4c6.2 0 12.3-5.8 12.3-13.4 0.3-9.5-6.2-15.9-12.3-15.9H378.8z m251.6-91.2c0-6-6.2-14.6-12.3-14.6H375.7c-6.2 0-12.4 8.6-12.4 14.6s6.2 14.6 12.4 14.6h240.8c6.2 0.1 13.9-8.5 13.9-14.6z m-9.2-120.5H378.8c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h240.8c7.7 0 13.9-8.6 13.9-14.6s-6.2-14.6-12.3-14.6z m119.4 376.6L709 714.1c9.2-12 14.6-27 14.6-43.2 0-39.4-32.1-71.4-71.8-71.4-39.7 0-71.8 32-71.8 71.4s32.1 71.4 71.8 71.4c16.3 0 31.3-5.4 43.4-14.5l31.6 31.5c3.8 3.8 10 3.8 13.8 0 3.8-3.8 3.8-10 0-13.8z m-88.8-23.6c-28.3 0-51.3-22.8-51.3-51s23-51 51.3-51c28.3 0 51.3 22.8 51.3 51s-23 51-51.3 51z',
                            onclick: function (){
                                alert('myToolHandler1')
                            }
                        },
                        myTool2:{ 必须要my开头
                          show:true,
                          title:'中心',
                            iconStyle: {
                                borderColor: '#ffffff'
                            },
                          icon:'path://M778.24 832c-10.24-5.12-23.04-5.12-33.28 0s-17.92 17.92-17.92 30.72 7.68 23.04 17.92 30.72c10.24 5.12 23.04 5.12 33.28 0s17.92-17.92 17.92-30.72-7.68-23.04-17.92-30.72z M514.56 48.64c-158.72 0-307.2 81.92-391.68 215.04-10.24 15.36-5.12 38.4 10.24 48.64 17.92 10.24 38.4 5.12 48.64-10.24 71.68-115.2 197.12-181.76 332.8-181.76 217.6 0 394.24 176.64 394.24 394.24 0 97.28-35.84 192-102.4 263.68-12.8 15.36-12.8 38.4 2.56 51.2 7.68 5.12 15.36 10.24 23.04 10.24 10.24 0 20.48-5.12 25.6-12.8 76.8-84.48 120.32-197.12 120.32-312.32 0-256-207.36-465.92-463.36-465.92z M665.6 878.08c-48.64 20.48-99.84 30.72-151.04 30.72-212.48 0-384-168.96-391.68-378.88h140.8l46.08 99.84c5.12 10.24 15.36 17.92 28.16 17.92 12.8 0 23.04-7.68 28.16-17.92l89.6-186.88 5.12 7.68c7.68 15.36 25.6 23.04 40.96 15.36 15.36-7.68 23.04-25.6 15.36-40.96L483.84 358.4c-5.12-10.24-15.36-17.92-28.16-17.92-12.8 0-23.04 7.68-28.16 17.92l-92.16 186.88L307.2 486.4c-5.12-10.24-15.36-17.92-28.16-17.92H122.88c0-5.12 2.56-12.8 2.56-17.92 2.56-7.68 2.56-15.36 5.12-23.04 5.12-20.48-7.68-38.4-28.16-43.52-20.48-5.12-38.4 7.68-43.52 28.16-2.56 10.24-5.12 17.92-5.12 28.16-5.12 25.6-5.12 51.2-5.12 76.8 0 256 207.36 465.92 465.92 465.92 61.44 0 122.88-12.8 179.2-35.84 17.92-7.68 25.6-28.16 20.48-46.08-10.24-23.04-30.72-30.72-48.64-23.04z M529.92 486.4c-7.68-5.12-20.48-5.12-28.16 0-7.68 5.12-15.36 15.36-15.36 25.6s5.12 20.48 15.36 25.6c7.68 5.12 20.48 5.12 28.16 0 7.68-5.12 15.36-15.36 15.36-25.6s-5.12-20.48-15.36-25.6zM522.24 591.36l40.96 92.16c5.12 10.24 15.36 17.92 25.6 17.92h2.56c10.24 0 20.48-5.12 25.6-15.36l89.6-148.48h107.52c17.92 0 30.72-12.8 30.72-30.72s-12.8-30.72-30.72-30.72h-125.44c-10.24 0-20.48 5.12-25.6 15.36l-66.56 112.64-17.92-38.4c-7.68-15.36-25.6-23.04-40.96-15.36-15.36 7.68-23.04 25.6-15.36 40.96z',
                          onclick:function(){
                              alert('中心')
                          }
                        },
                        dataZoom: {
                            show:false,
                            yAxisIndex: 'none'
                        },
    
                        dataView: {
                            show: true,
                            iconStyle: {
                                normal: {
                                    borderColor: '#ffffff'
                                }
                            }
                        },
                        magicType: {type: ['line', 'bar'],
                            iconStyle: {
                                borderColor: '#ffffff'
                            },
                            emphasis:{
                                iconStyle: {
                                    borderColor: '#ffffff'
                                },
                            }
                            },
                        restore: {//配置项还原。
                            show: true,
                            iconStyle: {
                                borderColor: '#ffffff'
                            },
                            emphasis:{
                                iconStyle: {
                                    borderColor: '#ffffff'
                                },
                            }
                        },
                        saveAsImage: {//保存为图片。
                            show: true,
                            iconStyle: {
                                borderColor: '#ffffff'
                            },
                            backgroundColor: '#000000',
                            emphasis:{
                                iconStyle: {
                                    borderColor: '#ffffff'
                                },
                            }
                        }
                    }
                },

另外你们是不是很好奇我这边的  icon:'path://M525.4 XXXX 是哪里来的呢？

很简单[https://www.iconfont.cn/][https_www.iconfont.cn]下面下载svg，**然后将d属性拼接起来就ok**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]**

在

[20200119133836199.jpg]: https://img-blog.csdnimg.cn/20200119133836199.jpg
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200119134125967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200119134108607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70