解决Echarts的toolbox只显示英文的和自定义事件的问题

1、问题描述:

echarts的toolbox只显示英文,前几天还是中文,很奇怪。

2、解决方案:

我们为toolbox中每一个配置项都添加title属性,title属性的值就是你想显示的值,随便写。toolbox的配置代码如下:

toolbox: {                  //工具栏
                        show: true,               //显示工具栏组件
                        feature: {                //各工具配置项
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,           //显示该工具
                                readOnly: false,       //是否显示不可编辑(只读)
                                title:'数据视图'
                            },
                            magicType: {            //动态类型切换
                                show: true,           //是否显示该工具
                                type: ['line', 'bar'], //启用的动态类型
                                title:{
                                    line:'切换为折线图',
                                    bar:'切换为柱状图'
                                }
                            },
                            restore: {              //配置项还原
                                show: true,            //是否显示该工具
                                title:'还原'
                            },
                            saveAsImage: {          //保存为图片
                                show: true,            //是否显示该工具
                                title:'保存'
                            }
                        }
                    }

改正后的效果:

各工具配置项。

除了各个内置的工具按钮外,还可以自定义工具按钮。

注意,自定义的工具名字,只能以 my 开头,例如下例中的 myTool1myTool2

{
    toolbox: {
        feature: {
            myTool1: {
                show: true,
                title: '自定义扩展方法1',
                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                onclick: function (){
                    alert('myToolHandler1')
                }
            },
            myTool2: {
                show: true,
                title: '自定义扩展方法',
                icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
        }
    }
}

官网配置:https://echarts.apache.org/zh/option.html#toolbox.feature

posted @ 2022-04-27 17:57  土小狗  阅读(549)  评论(0编辑  收藏  举报