解决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
开头,例如下例中的 myTool1
,myTool2
{
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