| <!DOCTYPE html> |
| <!-- |
| 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"> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <script src="lib/simpleRequire.js"></script> |
| <script src="lib/config.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <script src="data/pie-texture.js"></script> |
| <script src="lib/facePrint.js"></script> |
| <script src="lib/testHelper.js"></script> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| .test-title { |
| background: #146402; |
| color: #fff; |
| } |
| .test-chart { |
| border: 1px solid red; |
| } |
| </style> |
| <div id="main"></div> |
| |
| <script> |
| |
| require([ |
| 'echarts' |
| ], function (echarts) { |
| var dom = document.getElementById('main'); |
| |
| var aligns = [ |
| 'none', |
| 'labelLine', |
| 'edge' |
| ]; |
| for (var b = 0; b < 2; ++b) { |
| for (var w = 0; w < 2; ++w) { |
| for (var r = 0; r < 2; ++r) { |
| for (var a = 0; a < aligns.length; a++) { |
| var id = 'main-' + b + '-' + w + '-' + r + '-' + a; |
| var container = document.createElement('div'); |
| container.setAttribute('id', id); |
| dom.appendChild(container); |
| |
| var align = aligns[a]; |
| var data = [ |
| { |
| name: 'Apples huida dhuasi hduias huid as hidusah huidas cjibjdf8k', |
| value: 78 |
| }, |
| { |
| name: '{a|Dorro quisam dsjahui fdhjs hudsa huds}', |
| value: 60 |
| }, |
| { |
| name: '{a|Neque dasdaferw dasdas pordsao estdsas qdasdasui dolom}', |
| value: 48 |
| }, |
| { |
| name: 'Oranges', |
| value: 40 |
| }, |
| { |
| name: 'Pears', |
| value: 32 |
| }, |
| { |
| name: 'quia dolorsit amet consectetur adipisci', |
| value: 27 |
| } |
| ]; |
| var option = { |
| series: [ |
| { |
| type: 'pie', |
| radius: '80%', |
| center: ['50%', '50%'], |
| data: data, |
| label: { |
| width: w ? 300 : undefined, |
| position: 'outer', |
| alignTo: align, |
| edgeDistance: 20, |
| fontSize: 30, |
| padding: [10, 20], |
| backgroundColor: b && 'rgba(0, 0, 255, 0.2)', |
| rich: r && { |
| a: { |
| fontSize: 36, |
| borderColor: 'rgba(0, 0, 255, 0.8)', |
| borderWidth: 1, |
| borderRadius: 10 |
| } |
| }, |
| overflow: 'break' |
| }, |
| labelLine: { |
| length2: 50 |
| }, |
| left: 0, |
| right: 0, |
| top: 0, |
| bottom: 0, |
| animationDuration: 0 |
| } |
| ] |
| }; |
| |
| var rich = r ? 'richText' : 'plainText'; |
| var chart = testHelper.create(echarts, id, { |
| width: 1250, |
| title: [ |
| 'Labels should not be outside of the canvas', |
| 'alignTo: **' + align + ', ' + rich + '**', |
| 'width: **' + (w ? '300' : 'undefined') + '**', |
| 'background: **' + (b ? 'true' : 'false') + '**' |
| ], |
| option: option |
| }); |
| } |
| } |
| } |
| } |
| }); |
| |
| </script> |
| </body> |
| </html> |
