| <!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; |
| } |
| </style> |
| |
| |
| <div id="main0"></div> |
| <div id="main1"></div> |
| <div id="main2"></div> |
| <div id="main3"></div> |
| <div id="main4"></div> |
| <div id="main5"></div> |
| <div id="main6"></div> |
| <div id="main7"></div> |
| <div id="main8"></div> |
| <div id="main9"></div> |
| <div id="main10"></div> |
| <div id="main11"></div> |
| <div id="main12"></div> |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var value2 = 400; |
| var total = 1000; |
| |
| function getData() { |
| return [{ |
| name: '', |
| value: total - value2, |
| itemStyle: { color: 'rgb(8,90,150)' }, |
| label: { show: false } |
| }, { |
| name: '50%', |
| value: value2, |
| itemStyle: { color: 'rgb(23,235,255)'}, |
| label: { position: 'center', color: '#999', fontSize: '100' } |
| }] |
| } |
| |
| var option = { |
| animation: false, |
| series: [{ |
| type: 'pie', |
| radius: ['60%','80%'], |
| labelLine: { show: false }, |
| hoverAnimation: false, |
| data: getData() |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: 'Label should be always at center of the pie', |
| option: option, |
| info: { |
| data: [{ |
| label: {position: 'center'} |
| }] |
| } |
| }); |
| |
| setInterval(function () { |
| value2 += 3; |
| if (value2 > total) { |
| value2 = 0; |
| } |
| chart.setOption({ |
| series: [{ |
| data: getData() |
| }] |
| }); |
| }, 20); |
| }); |
| |
| </script> |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var count = 80; |
| var data = []; |
| for (var i = 0; i < count; i++) { |
| // var label = i === 30 |
| // ? { |
| // position: 'center', |
| // fontSize: 30, |
| // color: '#fff' |
| // } |
| // : null; |
| data.push({ |
| name: i + 'Something really Random', |
| value: Math.random(), |
| // label: label |
| }); |
| } |
| |
| var option = { |
| series: [{ |
| type: 'pie', |
| radius: '50%', |
| labelLine: { |
| minTurnAngle: 110, |
| length2: 10, |
| smooth: true |
| }, |
| data: data |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1', { |
| title: 'Too many', |
| option: option |
| }); |
| }); |
| |
| |
| </script> |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var count = 60; |
| |
| function makeData(sign) { |
| var data = []; |
| for (var i = 0; i < count; i++) { |
| var value = Math.random() * 50 * sign; |
| value = +value.toFixed(2); |
| |
| if (i >= 2 |
| && i <= count - 2 |
| && i % 10 !== 0 |
| // Test the case that the bottom label is normal to display. |
| && Math.abs(i - Math.round(count / 2)) > 2 |
| ) { |
| value = sign > 0 |
| ? value - Math.floor(value) |
| : value - Math.ceil(value); |
| value = +value.toFixed(2); |
| } |
| |
| data.push({ |
| name: value, |
| value: value |
| }); |
| } |
| return data; |
| } |
| |
| var pos = ['25%', '75%']; |
| |
| var option = { |
| title: [{ |
| text: 'Positive value\nminShowLabelAngle: 10', |
| textAlign: 'center', |
| left: pos[0] |
| }, { |
| text: 'Negative value\nminShowLabelAngle: 2', |
| textAlign: 'center', |
| left: pos[1] |
| }], |
| series: [{ |
| type: 'pie', |
| center: [pos[0], '50%'], |
| minShowLabelAngle: 10, |
| label: {show: true}, |
| radius: '30%', |
| data: makeData(1) |
| }, { |
| type: 'pie', |
| center: [pos[1], '50%'], |
| minShowLabelAngle: 2, |
| label: {show: true}, |
| radius: '30%', |
| data: makeData(-1) |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main2', { |
| title: [ |
| 'minShowLabelAngle: label of small sector should **not be displayed**.', |
| 'other label should **be displayed** in appropriate place.' |
| ], |
| option: option |
| }); |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var count = 5; |
| |
| function makeData(sign) { |
| var data = []; |
| for (var i = 0; i < count; i++) { |
| var value = Math.random() * 50 * sign; |
| value = +value.toFixed(2); |
| |
| if (i >= 2 |
| && i <= count - 2 |
| && i % 10 !== 0 |
| // Test the case that the bottom label is normal to display. |
| && Math.abs(i - Math.round(count / 2)) > 2 |
| ) { |
| value = sign > 0 |
| ? value - Math.floor(value) |
| : value - Math.ceil(value); |
| value = +value.toFixed(2); |
| } |
| |
| data.push({ |
| name: value, |
| value: value |
| }); |
| } |
| return data; |
| } |
| |
| var pos = ['25%', '75%']; |
| |
| var option = { |
| title: [{ |
| text: 'label.rotate: true, label should be in redical direction.', |
| textAlign: 'center', |
| left: pos[0] |
| }, { |
| text: 'label.rotate: 20', |
| textAlign: 'center', |
| left: pos[1] |
| }], |
| series: [{ |
| type: 'pie', |
| center: [pos[0], '50%'], |
| minShowLabelAngle: 10, |
| label: { |
| show: true, |
| rotate: true |
| }, |
| labelLine: { |
| length2: 0 |
| }, |
| radius: '30%', |
| data: makeData(1) |
| }, { |
| type: 'pie', |
| center: [pos[1], '50%'], |
| minShowLabelAngle: 2, |
| label: { |
| show: true, |
| rotate: 20 |
| }, |
| radius: '30%', |
| data: makeData(-1) |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main3', { |
| title: [ |
| 'label should be rotated' |
| ], |
| option: option |
| }); |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| // Pencil sketch texture |
| var patternSrc = window.pieTexture; |
| var img = new Image(); |
| img.src = patternSrc; |
| |
| option = { |
| title: [{ |
| left: '25%', |
| top: 10, |
| text: 'Lable text should be white\n and bordered with each sector color', |
| textAlign: 'center' |
| }, { |
| left: '75%', |
| top: 10, |
| text: 'Lable text should be white\n and bordered with black', |
| textAlign: 'center' |
| }], |
| series: [{ |
| type: 'pie', |
| label: { |
| position: 'inside' |
| }, |
| center: ['25%', 150], |
| radius: [30, 60], |
| data: [{ |
| name: 'xxxxxxxxxxxx', |
| value: 100 |
| }, { |
| name: 'yyyyyyyy', |
| value: 120 |
| }, { |
| name: 'zzzzzzzz', |
| value: 110 |
| }] |
| }, { |
| type: 'funnel', |
| label: { |
| position: 'inside' |
| }, |
| top: null, |
| bottom: 30, |
| height: 100, |
| width: 50, |
| left: '25%', |
| data: [{ |
| name: 'xxxxxxxxxxxx', |
| value: 100 |
| }, { |
| name: 'yyyyyyyyyyy', |
| value: 120 |
| }, { |
| name: 'zzzzzzzzzzz', |
| value: 110 |
| }] |
| }, { |
| type: 'pie', |
| label: { |
| position: 'inside' |
| }, |
| center: ['75%', 150], |
| radius: [30, 60], |
| itemStyle: { |
| color: { |
| image: img, |
| repeat: 'repeat' |
| }, |
| borderWidth: 3, |
| borderColor: '#111' |
| }, |
| data: [{ |
| name: 'xxxxxxxxxxxx', |
| value: 100 |
| }, { |
| name: 'yyyyyyyyyyy', |
| value: 120 |
| }, { |
| name: 'zzzzzzzzzzz', |
| value: 110 |
| }] |
| }, { |
| type: 'funnel', |
| label: { |
| position: 'inside' |
| }, |
| top: null, |
| bottom: 30, |
| height: 100, |
| width: 50, |
| left: null, |
| right: '25%', |
| itemStyle: { |
| color: { |
| image: img, |
| repeat: 'repeat' |
| }, |
| borderWidth: 3, |
| borderColor: '#111' |
| }, |
| data: [{ |
| name: 'xxxxxxxxxxxx', |
| value: 100 |
| }, { |
| name: 'yyyyyyyyyyyyy', |
| value: 120 |
| }, { |
| name: 'zzzzzzzzzzzz', |
| value: 110 |
| }] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main4', { |
| title: [ |
| 'label.position: "inside". And half inside half outside.' |
| ], |
| option: option, |
| height: 400, |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| const data = [{ |
| name: 'Something really Random(1)', |
| value: 1 |
| }, { |
| name: 'Something really Random(2)', |
| value: 2 |
| }, { |
| name: 'Something really Random(3)', |
| value: 3 |
| }, { |
| name: 'Something really Random(4)', |
| value: 2 |
| }, { |
| name: 'Something really Random(5)', |
| value: 3 |
| }]; |
| |
| for (let i = 0; i < 5 ; i++) { |
| data.push({ |
| name: 'Something really Random(' + i + ')', |
| value: Math.random() * 0.1 + 0.1 |
| }); |
| } |
| |
| data.push({ |
| name: 'Something really Random', |
| value: 2 |
| }); |
| for (let i = 0; i < 5 ; i++) { |
| data.push({ |
| name: 'Something really Random(' + i + ')', |
| value: Math.random() * 0.1 + 0.1 |
| }); |
| } |
| |
| var option = { |
| series: [{ |
| type: 'pie', |
| radius: '50%', |
| data: data |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main5', { |
| title: 'Layout Case 1', |
| option: option |
| }); |
| }); |
| |
| </script> |
| |
| <script> |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| const data = [{ |
| "name": "United States", |
| "value": [213242, 22.86439111423725, "United States"] |
| }, { |
| "name": "Italy", |
| "value": [110574, 11.856047040759652, "Italy"] |
| }, { |
| "name": "Spain", |
| "value": [104118, 11.163817043697554, "Spain"] |
| }, { |
| "name": "China", |
| "value": [82361, 8.830971931231625, "China"] |
| }, { |
| "name": "Germany", |
| "value": [77872, 8.349649059978255, "Germany"] |
| }, { |
| "name": "France", |
| "value": [57749, 6.192005901539504, "France"] |
| }, { |
| "name": "Iran", |
| "value": [47593, 5.103051773571311, "Iran"] |
| }, { |
| "name": "United Kingdom", |
| "value": [29865, 3.202207072840695, "United Kingdom"] |
| }, { |
| "name": "Switzerland", |
| "value": [17768, 1.905133610253925, "Switzerland"] |
| }, { |
| "name": "Turkey", |
| "value": [15679, 1.6811453103991045, "Turkey"] |
| }, { |
| "name": "Belgium", |
| "value": [13964, 1.4972583145872247, "Belgium"] |
| }, { |
| "name": "Netherlands", |
| "value": [13696, 1.4685226207810533, "Netherlands"] |
| }, { |
| "name": "Austria", |
| "value": [10711, 1.1484627476041078, "Austria"] |
| }, { |
| "name": "Korea, South", |
| "value": [9887, 1.0601112114239395, "Korea, South"] |
| }, { |
| "name": "Canada", |
| "value": [9560, 1.0250493760708872, "Canada"] |
| }, { |
| "name": "Portugal", |
| "value": [8251, 0.8846948119205952, "Portugal"] |
| }, { |
| "name": "Brazil", |
| "value": [6836, 0.7329746375335339, "Brazil"] |
| }, { |
| "name": "Israel", |
| "value": [6092, 0.6532009203999837, "Israel"] |
| }, { |
| "name": "Sweden", |
| "value": [4947, 0.5304308852952593, "Sweden"] |
| }, { |
| "name": "Norway", |
| "value": [4863, 0.52142417529631, "Norway"] |
| }, { |
| "name": "Australia", |
| "value": [4862, 0.5213169525582273, "Australia"] |
| }, { |
| "name": "Czechia", |
| "value": [3508, 0.37613736519421254, "Czechia"] |
| }, { |
| "name": "Ireland", |
| "value": [3447, 0.3695967781711661, "Ireland"] |
| }, { |
| "name": "Denmark", |
| "value": [3290, 0.35276280829217765, "Denmark"] |
| }, { |
| "name": "Chile", |
| "value": [3031, 0.3249921191287509, "Chile"] |
| }, { |
| "name": "Malaysia", |
| "value": [2908, 0.31180372234457526, "Malaysia"] |
| }, { |
| "name": "Russia", |
| "value": [2777, 0.2977575436557378, "Russia"] |
| }, { |
| "name": "Ecuador", |
| "value": [2748, 0.29464808425133865, "Ecuador"] |
| }, { |
| "name": "Poland", |
| "value": [2554, 0.2738468730632893, "Poland"] |
| }, { |
| "name": "Romania", |
| "value": [2460, 0.2637679356835128, "Romania"] |
| }]; |
| |
| var option = { |
| backgroundColor: '#333', |
| visualMap: { |
| dimension: 0, |
| left: 10, |
| itemWidth: 12, |
| min: data[29].value[0], |
| max: data[0].value[0], |
| text: ['High', 'Low'], |
| textStyle: { |
| color: '#ddd' |
| }, |
| inRange: { |
| color: ['lightskyblue', 'yellow', 'orangered', 'red'] |
| } |
| }, |
| series: [{ |
| type: 'pie', |
| data: data, |
| roseType: 'radius', |
| radius: ['30%', '70%'] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main6', { |
| title: 'Case from https://gallery.echartsjs.com/editor.html?c=xpm1ZhhOCG', |
| height: 300, |
| option: option |
| }); |
| }); |
| |
| </script> |
| |
| <script> |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| const option = { |
| backgroundColor: '#2c343c', |
| visualMap: { |
| show: false, |
| min: 80, |
| max: 600, |
| inRange: { |
| colorLightness: [0, 1] |
| } |
| }, |
| series : [ |
| { |
| name: '访问来源', |
| type: 'pie', |
| radius: '55%', |
| data:[ |
| {value:235, name:'视频广告'}, |
| {value:274, name:'联盟广告'}, |
| {value:310, name:'邮件营销'}, |
| {value:335, name:'直接访问'}, |
| {value:400, name:'搜索引擎'} |
| ], |
| roseType: 'angle', |
| label: { |
| textStyle: { |
| color: 'rgba(255, 255, 255, 0.3)' |
| } |
| }, |
| labelLine: { |
| smooth: true, |
| minTurnAngle: 120, |
| lineStyle: { |
| color: 'rgba(255, 255, 255, 0.3)' |
| } |
| }, |
| itemStyle: { |
| color: '#c23531', |
| shadowBlur: 200, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| } |
| ] |
| }; |
| var chart = testHelper.create(echarts, 'main7', { |
| title: 'Case from https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-styling-step5', |
| height: 300, |
| option: option |
| }); |
| }); |
| |
| </script> |
| |
| <script> |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| const option = { |
| series: [ |
| { |
| name: '访问来源', |
| type: 'pie', |
| radius: '50%', |
| center: ['25%', '50%'], |
| data: [ |
| { value: 1, name: '搜索引擎' }, |
| ], |
| emphasis: { |
| itemStyle: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| }, |
| label: { |
| position: 'inside' |
| } |
| }, |
| { |
| name: '访问来源1', |
| type: 'pie', |
| radius: '50%', |
| center: ['75%', '50%'], |
| data: [ |
| { value: 1, name: '搜索引擎' }, |
| ], |
| emphasis: { |
| itemStyle: { |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| }, |
| label: { |
| position: 'outside' |
| } |
| }, |
| ] |
| }; |
| |
| setTimeout(() => { |
| option.series[0].label.position = 'outside'; |
| option.series[1].label.position = 'inside'; |
| chart.setOption(option); |
| }, 2000); |
| setTimeout(() => { |
| option.series[0].label.position = 'inside'; |
| option.series[1].label.position = 'outside'; |
| chart.setOption(option); |
| }, 4000); |
| setTimeout(() => { |
| option.series[0].label.position = 'outside'; |
| option.series[1].label.position = 'inside'; |
| chart.setOption(option); |
| }, 6000); |
| |
| var chart = testHelper.create(echarts, 'main8', { |
| title: 'labelLine should be hidden when position is not \'outside\'', |
| height: 300, |
| option: option |
| }); |
| |
| }); |
| </script> |
| |
| <script> |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| const option = { |
| series: [ |
| { |
| name: 'Access From', |
| type: 'pie', |
| radius: 50, |
| data: [ |
| { value: 1, name: 'Search Engine' }, |
| { value: 0, name: 'Direct' }, |
| { value: 0, name: 'Union Ads' }, |
| { value: 1, name: 'Video Ads' } |
| ], |
| label: { |
| show: true |
| }, |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main9', { |
| title: [ |
| 'The first label shoud be rendered correctly when it\'s followed by several zero values', |
| 'Test case from issue #16208', |
| ], |
| height: 300, |
| option: option |
| }); |
| |
| }); |
| </script> |
| |
| <script> |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| const option = { |
| series: [ |
| { |
| name: "Access From", |
| type: "pie", |
| radius: "50%", |
| data: [ |
| { value: 1048, name: "Search Engine" }, |
| { value: 735, name: "Direct" }, |
| { value: 580, name: "Email" }, |
| { value: 484, name: "Union Ads" }, |
| { value: 300, name: "Video Ads" }, |
| ], |
| }, |
| ], |
| }; |
| |
| var chart = testHelper.create(echarts, 'main10', { |
| title: [ |
| 'Label line should hide when emphasis after update the emphasis.labelLine', |
| 'also label should be hidden when sector was selected', |
| 'Test case from issue #16539', |
| ], |
| height: 300, |
| option: option, |
| button: [ |
| { |
| text: 'Click to update options', |
| onClick: () => { |
| chart.setOption({ |
| series: [ |
| { |
| selectedMode: true, |
| emphasis: { |
| labelLine: { |
| show: false, |
| }, |
| }, |
| select: { |
| label: { |
| show: false, |
| } |
| } |
| }, |
| ], |
| }) |
| } |
| } |
| ] |
| }); |
| |
| }); |
| </script> |
| |
| <script> |
| require([ |
| 'echarts' |
| ], function (echarts) { |
| var option = { |
| series: [{ |
| data: [ |
| { |
| name: '三门峡市', |
| value: 4702 |
| }, |
| { |
| name: '内江市', |
| value: 4516 |
| }, |
| { |
| name: '天门市', |
| value: 1316 |
| }, |
| { |
| name: '昭通市', |
| value: 6188 |
| }, |
| { |
| name: '娄底市', |
| value: 7120 |
| }, |
| { |
| name: '博尔塔拉州', |
| value: 189 |
| }, |
| { |
| name: '丽水市', |
| value: 6478 |
| }, |
| { |
| name: '牡丹江市', |
| value: 5540 |
| }, |
| { |
| name: '桂林市', |
| value: 15518 |
| }, |
| { |
| name: '桃园市', |
| value: 86 |
| }, |
| { |
| name: '晋中市', |
| value: 10661 |
| }, |
| { |
| name: '雅安市', |
| value: 2411 |
| }, |
| { |
| name: '文昌市', |
| value: 1420 |
| }, |
| { |
| name: '广州市', |
| value: 159522 |
| }, |
| { |
| name: '文山壮族苗族自治州', |
| value: 3168 |
| }, |
| { |
| name: '晋城市', |
| value: 8640 |
| }, |
| { |
| name: '昌都市', |
| value: 507 |
| }, |
| { |
| name: '曲靖市', |
| value: 10705 |
| }, |
| { |
| name: '昌吉州', |
| value: 801 |
| }, |
| { |
| name: '其他', |
| value: 60280480, |
| selected: false |
| } |
| ], |
| type: 'pie', |
| radius: '70%', |
| minAngle: 1, |
| minShowLabelAngle: 2 |
| }], |
| legend: { |
| show: true, |
| orient: 'vertical', |
| left: 'left', |
| selected: { |
| '其他': false |
| } |
| } |
| }; |
| |
| |
| var chart = testHelper.create(echarts, 'main11', { |
| title: [ |
| 'Label line should be hidden after clicking the legend item **其他**', |
| 'Test case from issue #17013', |
| ], |
| height: 300, |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require([ |
| 'echarts' |
| ], function (echarts) { |
| var option = { |
| series: [{ |
| type: 'pie', |
| radius: ['40%', '70%'], |
| minShowLabelAngle: 100, |
| label: { |
| show: true, |
| position: 'inside' |
| }, |
| data: [ |
| { value: 1048, name: 'Search Engine' }, |
| { value: 735, name: 'Direct' }, |
| { value: 580, name: 'Email' }, |
| { value: 484, name: 'Union Ads' }, |
| { value: 300, name: 'Video Ads' } |
| ] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main12', { |
| title: [ |
| 'The labels should be rendered correctly and no errors in the console', |
| 'Test case from issue #17712', |
| ], |
| height: 300, |
| option: option |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
