【矢量图】PyEcharts导出图片并矢量化 |
您所在的位置：网站首页 › 磁带矢量图 › 【矢量图】PyEcharts导出图片并矢量化 |
【矢量图】PyEcharts导出图片并矢量化
|
前言
图是门面，但朦胧美并不是文章所需要的 问题处理导出图片（JPEG、PNG）的方式，网上很多就不再赘述了，这里咱还是矢量化下吧。网上说用phantomjs-prebuilt.js，我也试了没太整明白。然后 下载 const a = window.document.querySelector('#download') a.addEventListener('click',()=>{ const content = document.querySelector('svg').outerHTML const blob= new Blob([content], {type: 'xml/svg'}) a.href = URL.createObjectURL(blob) a.download = 'test.svg' })再生成的html文件中的对应位置加入上述代码，这样就可以在页面中直接下载.svg格式的图片了。 修改过后的.html DOCTYPE html> Awesome-pyecharts 下载 const a = window.document.querySelector('#download') a.addEventListener('click',()=>{ const content = document.querySelector('svg').outerHTML const blob= new Blob([content], {type: 'xml/svg'}) a.href = URL.createObjectURL(blob) a.download = 'test.svg' }) var chart_ed36cfe4f82d4f129392bb2966bfe0bb = echarts.init( document.getElementById('ed36cfe4f82d4f129392bb2966bfe0bb'), 'white', {renderer: 'svg'}); var option_ed36cfe4f82d4f129392bb2966bfe0bb = { "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDelay": 0, "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "animationDelayUpdate": 0, "color": [ "#c23531", "#2f4554", "#61a0a8", "#d48265", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3", "#f05b72", "#ef5b9c", "#f47920", "#905a3d", "#fab27b", "#2a5caa", "#444693", "#726930", "#b2d235", "#6d8346", "#ac6767", "#1d953f", "#6950a1", "#918597" ], "series": [ { 。。。。。。 "center": [ "50%", "50%" ], "radius": [ 0, "95%" ], "highlightPolicy": "ancestor", "nodeClick": "rootToNode", "sort": a=>{a}, "levels": [ {}, { "r0": "15%", "r": "20%", "itemStyle": { "borderWidth": 2 }, "label": { "rotate": "tangential" } }, { "r0": "20%", "r": "70%", "label": { "align": "right", "color": "black" } }, { "r0": "70%", "r": "72%", "label": { "position": "outside", "padding": 3, "silent": false, "color": "black" }, "itemStyle": { "borderWidth": 3 } } ], "label": { "show": true, "position": "top", "margin": 8 }, "xAxisIndex": 0, "yAxisIndex": 0 }, { "type": "pie", "clockwise": true, "data": [ { "name": "BatFish", "value": 5, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "ClownFish", "value": 8, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Crab", "value": 56, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Crocodile", "value": 18, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "CrocodileFish", "value": 4, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Fish", "value": 92, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Flounder", "value": 30, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "FrogFish", "value": 7, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "GhostPipefish", "value": 86, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "LeafySeaDragon", "value": 23, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Octopus", "value": 23, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Pagurian", "value": 7, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Pipefish", "value": 274, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "ScorpionFish", "value": 67, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "SeaHorse", "value": 136, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Shrimp", "value": 27, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Slug", "value": 3, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "StarFish", "value": 29, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Stingaree", "value": 20, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Turtle", "value": 23, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Ant", "value": 17, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Bug", "value": 19, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Cat", "value": 140, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Caterpillar", "value": 84, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Centipede", "value": 5, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Chameleon", "value": 47, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Cheetah", "value": 14, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Deer", "value": 28, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Dog", "value": 37, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Duck", "value": 22, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Gecko", "value": 35, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Giraffe", "value": 24, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Grouse", "value": 10, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Human", "value": 62, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Kangaroo", "value": 6, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Leopard", "value": 31, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Lion", "value": 17, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Lizard", "value": 147, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Monkey", "value": 10, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Rabbit", "value": 23, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Reccoon", "value": 3, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Sciuridae", "value": 24, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Sheep", "value": 6, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Snake", "value": 42, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Spider", "value": 186, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "StickInsect", "value": 45, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Tiger", "value": 25, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Wolf", "value": 7, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Worm", "value": 19, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Bat", "value": 17, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Bee", "value": 25, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Beetle", "value": 6, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Bird", "value": 175, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Bittern", "value": 43, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Butterfly", "value": 102, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Cicada", "value": 82, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Dragonfly", "value": 27, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Frogmouth", "value": 17, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Grasshopper", "value": 147, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Heron", "value": 51, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Katydid", "value": 193, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Mantis", "value": 86, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Mockingbird", "value": 27, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Moth", "value": 49, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Owl", "value": 103, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Owlfly", "value": 7, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Frog", "value": 89, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Toad", "value": 159, "selected": false, "itemStyle": { "color": "blue" } }, { "name": "Other", "value": 34, "selected": false, "itemStyle": { "color": "blue" } } ], "radius": [ "20%", "70%" ], "center": [ "50%", "50%" ], "roseType": "area", "label": { "show": false, "position": "top", "margin": 8 }, "xAxisIndex": 1, "yAxisIndex": 1 } ], "legend": [ { "data": [], "selected": {} }, { "data": [], "selected": {}, "show": false, "padding": 5, "itemGap": 10, "itemWidth": 25, "itemHeight": 14 } ], "tooltip": { "show": true, "trigger": "item", "triggerOn": "mousemove|click", "axisPointer": { "type": "line" }, "showContent": true, "alwaysShowContent": false, "showDelay": 0, "hideDelay": 100, "textStyle": { "fontSize": 14 }, "borderWidth": 0, "padding": 5 }, "grid": [ { "show": false, "zlevel": 0, "z": 2, "top": "50%", "right": "50%", "containLabel": false, "backgroundColor": "transparent", "borderColor": "#ccc", "borderWidth": 1 }, { "show": false, "zlevel": 0, "z": 2, "top": "50%", "right": "50%", "containLabel": false, "backgroundColor": "transparent", "borderColor": "#ccc", "borderWidth": 1 } ], "title": [ { "padding": 5, "itemGap": 10 }, { "padding": 5, "itemGap": 10 } ] }; chart_ed36cfe4f82d4f129392bb2966bfe0bb.setOption(option_ed36cfe4f82d4f129392bb2966bfe0bb); |
但是吧word2016暂时还是不支持svg的，咱得转换成.emf 就用线上转换：https://convertio.co/zh/download/1ee7d1e8167645f03dfc30d338913c9094b659/ 然后放入就暴露了另一个问题，Pyecharts导出的svg背景是透明的，然后就成了黑色 
但是吧我设置成白色之后，它，。， 
然后我就有点混乱了，然后我就用AI对背景是黑色的给处理下。 1.先将背景是黑色的emf，修改背景颜色为“无”，存储为eps 2.将eps转为emf方可 也可直接编辑svg，导出emf方可 
【本文地址】