美文网首页
Echart 增加自定义下载Excel功能

Echart 增加自定义下载Excel功能

作者: 皇甫贝 | 来源:发表于2019-04-05 20:25 被阅读0次

    在项目中你所遇到的项目需求各个奇葩, 我今天就遇到一个,图片和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里面写
    

    相关文章

      网友评论

          本文标题:Echart 增加自定义下载Excel功能

          本文链接:https://www.haomeiwen.com/subject/dupkiqtx.html