如何给echarts图表添加下载图表成图片的功能

╰+攻爆jí腚メ 2022-12-23 15:29 227阅读 1赞

### 如何给echarts图表添加下载图表成图片的功能 ###

1、先打开一个现成的图表效果图，注意图中圈出的地方，如图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]2、打开源码找到option，如下：

var chart2 = echarts.init(document.getElementById('chart2'));
      var chart2_option = { 
                tooltip: { 
                    trigger: 'axis'
                },
                legend: { 
                    data: [flow_title],
                    selected: { 
                        flow_title: true,
                    }
                },
                toolbox: { 
                    show: true,
                    feature: { 
                        mark: { show: true},                   
                    }
                },

3、在option下添加toolbox，在feature中添加saveAsImage，这就是下载的功能，，如下：

var chart2 = echarts.init(document.getElementById('chart2'));
    var chart2_option = { 
                tooltip: { 
                    trigger: 'axis'
                },
                legend: { 
                    data: [flow_title],
                    selected: { 
                        flow_title: true,
                    }
                },
                toolbox: { 
                    show: true,
                    feature: { 
                        mark: { show: true},
                        saveAsImage: { show: true},
                    }
                },

4、再次打开图表界面这时会发现右上角多了下载的功能了，点击下载就把把图表下载下来了，如图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8d60a0e15e0645a1bc38490fb71057da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201125180952315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n,size_16,color_FFFFFF,t_70#pic_center