| <!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> |