| |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/simpleRequire.js"></script> |
| <script src="lib/config.js"></script> |
| </head> |
| <body> |
| <style> |
| html, body, #main { |
| width: 100%; |
| height: 100%; |
| /* background-image: url(old_mathematics.png); */ |
| /* background-repeat: repeat; */ |
| } |
| </style> |
| <div id="main"></div> |
| <div id="result" style="border:1px solid red; width: 400px; height:300px;position:absolute;left: 0;top:0;"> |
| |
| </div> |
| <script> |
| var chart; |
| require([ |
| 'echarts' |
| ], function (echarts) { |
| |
| chart = echarts.init(document.getElementById('main'), null, { |
| renderer: 'svg' |
| }); |
| |
| option ={ |
| animation: false, |
| "tooltip": { |
| "trigger": "item", |
| "formatter": "{a} <br/>{b} : {c} ({d}%)" |
| }, |
| "series": [ |
| { |
| "name": "学员分布情况", |
| "type": "pie", |
| "radius": [ |
| 20, |
| 65 |
| ], |
| "center": [ |
| "50%", |
| "50%" |
| ], |
| "roseType": "radius", |
| "label": { |
| "show": false |
| }, |
| "data": [ |
| { |
| "name": "小学数学", |
| "value": 394 |
| }, |
| { |
| "name": "小学语文", |
| "value": 100 |
| } |
| ] |
| } |
| ], |
| "title": { |
| "show": false |
| }, |
| "backgroundColor": "#ffffff", |
| "color": [ |
| "#7daef3", |
| "#a0d633" |
| ] |
| }; |
| |
| chart.setOption(option); |
| |
| var container = document.getElementById('result'); |
| // var url = escapeHtml(chart.getDataURL()); |
| var url = escapeHtml(`<svg xmlns="http://www.w3.org/2000/svg" version="1.1" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"> |
| <g> |
| <path d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3 c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/> |
| <path d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/> |
| <path d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/> |
| <path d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6 c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/> |
| <path d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/> |
| <path d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7 c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/> |
| <path d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7 C20.6,84.2,23.2,86.3,26.2,88.2z"/> |
| <path d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6 c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/> |
| </g> |
| </svg>`) |
| // url = url.replace(/"/g, '"'); |
| console.log(url); |
| container.innerHTML = '<img src="' + url + '">'; |
| |
| |
| function escapeHtml (string) { |
| var entityMap = { |
| '&': '&', |
| '<': '<', |
| '>': '>', |
| '"': '"', |
| "'": ''', |
| '/': '/', |
| '`': '`', |
| '=': '=' |
| }; |
| |
| return String(string).replace(/[&<>"'`=\/]/g, function (s) { |
| return entityMap[s]; |
| }); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
