| <!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="lib/facePrint.js"></script> |
| <script src="lib/testHelper.js"></script> |
| <!-- <script src="lib/canteen.js"></script> --> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| <style> |
| .test-title-inner { |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="main0"></div> |
| |
| <script> |
| require([ |
| 'echarts' |
| ], function (echarts) { |
| var option; |
| |
| var colorList = ['#dc67ce', '#7ddc67', '#8067dc', '#dc6967', '#dcd267', '#67b7dc']; |
| // cornerRadius can be an array [innerCornerRadius, outerCornerRadius] |
| var outerCornerRadius = 5; |
| var innerCornerRadius = 5; |
| var usePercent = false; |
| var isCircular = false; |
| var isRounderOnEmphasis = false; |
| var roseType = 'area'; |
| var randomTimer; |
| var data = [ |
| { |
| name: "America", |
| value: 260 |
| }, |
| { |
| name: "Zambia", |
| value: 230 |
| }, |
| { |
| name: "Ireland", |
| value: 200 |
| }, |
| { |
| name: "Germany", |
| value: 165 |
| }, |
| { |
| name: "Australia", |
| value: 139 |
| }, |
| { |
| name: "Japan", |
| value: 128 |
| } |
| ]; |
| |
| option = { |
| color: colorList, |
| title: { |
| text: getTitle() |
| }, |
| tooltip: {}, |
| legend: { |
| bottom: 0 |
| }, |
| series: { |
| type: 'pie', |
| roseType: roseType, |
| selectedMode: 'single', |
| selectedOffset: 30, |
| label: { |
| formatter: '{b} {c}({d}%)' |
| }, |
| itemStyle: { |
| borderRadius: getCornerRadius(), |
| }, |
| // itemStyle: { |
| // borderColor: '#fff', |
| // borderWidth: 5 |
| // }, |
| data: echarts.util.clone(data) |
| } |
| }; |
| |
| function getTitle() { |
| return 'cornerRadius [' |
| + innerCornerRadius + (usePercent ? '%' : '') |
| + ', ' |
| + outerCornerRadius + (usePercent ? '%' : '') |
| + ']'; |
| } |
| |
| function getCornerRadius() { |
| return [ |
| innerCornerRadius + (usePercent ? '%' : ''), |
| outerCornerRadius + (usePercent ? '%' : '') |
| ]; |
| } |
| |
| function getEmphasisCornerRadius() { |
| const cornerRadius = getCornerRadius(); |
| if (!isRounderOnEmphasis) { |
| return cornerRadius; |
| } |
| const emphasisCornerRadius = [ |
| parseInt(cornerRadius[0], 10) * 2, |
| parseInt(cornerRadius[1], 10) * 2 |
| ]; |
| if (usePercent) { |
| emphasisCornerRadius[0] = emphasisCornerRadius[0] + '%'; |
| emphasisCornerRadius[1] = emphasisCornerRadius[1] + '%'; |
| } |
| return emphasisCornerRadius; |
| } |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| 'Test Pie with **cornerRadius**', |
| '**cornerRadius** can be a number | string | number array | string array' |
| ], |
| option: option, |
| buttons: [ |
| { |
| text: 'increase innerCornerRadius', |
| onclick: function () { |
| innerCornerRadius += 5; |
| chart.setOption({ |
| title: { |
| text: getTitle() |
| }, |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| } |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'decrease innerCornerRadius', |
| onclick: function () { |
| innerCornerRadius -= 5; |
| if (innerCornerRadius < 0) { |
| innerCornerRadius = 0; |
| } |
| chart.setOption({ |
| title: { |
| text: getTitle() |
| }, |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| } |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'increase outerCornerRadius', |
| onclick: function () { |
| outerCornerRadius += 5; |
| chart.setOption({ |
| title: { |
| text: getTitle() |
| }, |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| } |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'decrease outerCornerRadius', |
| onclick: function () { |
| outerCornerRadius -= 5; |
| if (outerCornerRadius < 0) { |
| outerCornerRadius = 0; |
| } |
| chart.setOption({ |
| title: { |
| text: getTitle() |
| }, |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| } |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'use percent', |
| onclick: function () { |
| usePercent = !usePercent; |
| chart.setOption({ |
| title: { |
| text: getTitle() |
| }, |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| } |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'random cornerRadius', |
| onclick: function () { |
| // clearInterval(randomTimer); |
| // if (randomTimer) { |
| // randomTimer = null; |
| // } |
| // else { |
| // randomTimer = setInterval(function () { |
| outerCornerRadius = ~~(Math.random() * 50); |
| innerCornerRadius = ~~(Math.random() * 50); |
| chart.setOption({ |
| title: { |
| text: getTitle() |
| }, |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| } |
| }] |
| }); |
| // }, 2e3); |
| // } |
| } |
| }, |
| { |
| text: 'roseType', |
| onclick: function () { |
| roseType = roseType ? false : 'area'; |
| chart.setOption({ |
| series: [{ |
| roseType: roseType |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'circular', |
| onclick: function () { |
| var innerRadius; |
| if (!isCircular) { |
| innerRadius = ~~(Math.random() * 70); |
| } |
| chart.setOption({ |
| series: [{ |
| radius: isCircular ? [0, '75%'] : [innerRadius + '%', '75%'] |
| }] |
| }); |
| this.innerText = 'circular' + (innerRadius ? ' ' + innerRadius + '%' : ''); |
| isCircular = !isCircular; |
| } |
| }, |
| { |
| text: 'random data', |
| onclick: function () { |
| var randomData = echarts.util.clone(data); |
| echarts.util.each(randomData, function (e) { |
| e.value = ~~(Math.random() * 1e3); |
| }); |
| chart.setOption({ |
| series: [{ |
| data: randomData |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'rounder on emphasis', |
| onclick: function () { |
| isRounderOnEmphasis = !isRounderOnEmphasis; |
| chart.setOption({ |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| } |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'set radius for all corners', |
| onclick: function () { |
| isCircular = true; |
| var val = [5, 15, 0, 20]; |
| chart.setOption({ |
| title: { |
| text: 'cornerRadius [' + val + ']' |
| }, |
| series: [{ |
| radius: ['40%', '75%'], |
| itemStyle: { borderRadius: val }, |
| emphasis: { |
| itemStyle: { borderRadius: [20, 5, 10, 30] } |
| } |
| }] |
| }); |
| } |
| }, |
| { |
| text: 'reset', |
| onclick: function () { |
| outerCornerRadius = 5; |
| innerCornerRadius = 5; |
| usePercent = false; |
| isCircular = false; |
| roseType = 'area'; |
| isRounderOnEmphasis = false; |
| chart.setOption({ |
| title: { |
| text: getTitle() |
| }, |
| series: [{ |
| itemStyle: { borderRadius: getCornerRadius() }, |
| emphasis: { |
| itemStyle: { borderRadius: getEmphasisCornerRadius() } |
| }, |
| roseType: roseType, |
| radius: [0, '75%'], |
| data: data |
| }] |
| }); |
| } |
| } |
| ] |
| }); |
| }); |
| </script> |
| |
| </body> |
| </html> |
| |
