Menu

Subscribe

导出echarts中的图片

on echarts, image

echarts提供了很多精美图表插件，通过浏览器来渲染后，用户可以保存图表为图片。但是有些应用场景，需要在用户不打开浏览器的情况下，能把图表保存下来，比如把echarts图表插入到word文档中。这种需求下，我开发了echarts图片导出服务，并提供了相关接口。

提供了两种类型的接口：

把定制页面的echarts图表保存为图片

请求实例：

curl http://115.29.188.241:3100/ -d '{"url":"http://115.29.188.241/public/echarts/default.html","funcs":"salesChart,bubbleChart","delay":1000}'

参数解释：

  • 请求接口：http://115.29.188.241:3100/
  • 请求方法：POST
  • 请求参数：
    • 参数格式：JSON
    • url:定制的echarts图表页面，如：http://115.29.188.241/public/echarts/default.html
    • funcs：上面指定的URL页面上暴露的echarts实例全局变量，多个实例用半角逗号隔开，如：salesChart,bubbleChart。 sales bubble
    • delay：可选项，单位ms，默认100，最大值5000。延时执行时间，有的echarts图表带有动画，需要等待动画执行完，delay时间越长，等待接口返回时间越长，建议关闭动画。

返回结果：

{"err":0,"msg":"success","imgs":{"bubbleChart":"http://saas-pubsentiment-img1.oss-cn-hangzhou.aliyuncs.com/2017/04/14/1492182803618.png","salesChart":"http://saas-pubsentiment-img1.oss-cn-hangzhou.aliyuncs.com/2017/04/14/1492183306861.png"}}

出参解释：

根据echarts option参数来生成图片，这里echarts的版本为3.5.3

请求实例：

curl http://115.29.188.241:3100/ -d '{"echartsOption":{"tooltip":{"trigger":"item","formatter":"{a} <br/>{b}: {c} ({d}%)"},"legend":{"orient":"vertical","x":"left","data":["直接访问","邮件营销","联盟广告","视频广告","搜索引擎"]},"series":[{"name":"访问来源","type":"pie","radius":["50%","70%"],"avoidLabelOverlap":false,"label":{"normal":{"show":false,"position":"center"},"emphasis":{"show":true,"textStyle":{"fontSize":"30","fontWeight":"bold"}}},"labelLine":{"normal":{"show":false}},"data":[{"value":335,"name":"直接访问"},{"value":310,"name":"邮件营销"},{"value":234,"name":"联盟广告"},{"value":135,"name":"视频广告"},{"value":1548,"name":"搜索引擎"}]}]},"width":600,"height":400}'

参数解释：

  • 请求接口：http://115.29.188.241:3100/
  • 请求方法：POST
  • 请求参数：
    • 参数格式：JSON
    • echartsOption：echarts的配置信息 demo-pie
    • width：可选项，生成图片的宽度，单位px，最大值：2000，默认值：600
    • height：可选项，生成图片的高度，单位px，最大值：2000，默认值：400
{"err":0,"msg":"success","imgs":{"myChart":"http://saas-pubsentiment-img1.oss-cn-hangzhou.aliyuncs.com/2017/04/14/1492184722716.png"}}

出参解释：

  • err： 0 或者 1 ， 0 表示没有错误，1表示发生错误。
  • msg： 成功返回success，失败返回错误的信息。
  • imgs：这里的key固定为myChart demo-pie