在项目中你所遇到的项目需求各个奇葩, 我今天就遇到一个,图片和Excel下载功能还有自定义Icon
1.首先Echart的Icon支持Png/Jpg/SVG三种格式
2.Echart自带toolbox--feature属性,他可以支持你的自定义的Icon设置和点击回调
代码:
toolbox: {
feature: {
myTool1: {
show: true,
title: '显示统计图',
icon: 'image://../Images/orderedList0.png',
onclick: function (){
callbackTitleOne();
}
},
myTool2: {
show: true,
title: '详情页',
icon: 'path://M950.856124 877.714442v73.142779H73.142779v-73.142779h877.713345m0-73.142778H73.142779a73.142779 73.142779 0 0 0-73.142779 73.142778v73.142779a73.142779 73.142779 0 0 0 73.142779 73.142779h877.713345a73.142779 73.142779 0 0 0 73.142779-73.142779v-73.142779a73.142779 73.142779 0 0 0-73.142779-73.142778zM642.559312 132.938098l158.354116 129.097004-158.902687 129.828432A89.965618 89.965618 0 0 0 556.799403 329.143602h-3.657139a585.14223 585.14223 0 0 0-329.142504 108.251312A411.976701 411.976701 0 0 1 255.999726 373.212126c61.07422-103.131318 165.485537-162.742683 310.85681-177.005525a89.051333 89.051333 0 0 0 77.165631-63.268503M589.896511 0.001097a16.457125 16.457125 0 0 0-16.639982 16.457125v91.428474a16.639982 16.639982 0 0 1-14.99427 16.274268c-389.485297 38.399959-438.856673 358.399616-441.233813 509.805168a16.274268 16.274268 0 0 0 16.639982 16.639982 16.091411 16.091411 0 0 0 14.628556-9.325704c73.142779-150.674124 227.839756-230.399753 407.770992-237.714031a16.639982 16.639982 0 0 1 16.457125 16.639982v88.137049a16.639982 16.639982 0 0 0 16.639982 16.639982 16.274268 16.274268 0 0 0 10.239989-3.839996L900.936178 274.286518a16.639982 16.639982 0 0 0 0-25.599973L600.1365 3.841093a15.177127 15.177127 0 0 0-10.239989-3.839996z',
onclick: function (){
alert('myToolHandler2')
}
}
}
}
以上是我百度的代码
在本地是没有问题的
但是在VUE项目打包中回出现不显示的问题 ,解决问题的原因也很简单
我们的路径用base64编码格式
如果是图片形式的路径icon为 :image://
myTool1: {
show: true,
title: '显示统计图',
icon: 'image://../Images/orderedList0.png',
onclick: function (){
callbackTitleOne();
}
}
如果是SVG形式的路径icon为 :path://
我们所有的回调操作 都可以在onclick里面写
网友评论