| <!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="ut/lib/canteen.js"></script> --> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="main0"></div> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <!-- TODO: Tree, Sankey, Map --> | |
| <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> | |
| <div id="main13"></div> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| option = { | |
| legend: { | |
| data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎'] | |
| }, | |
| grid: { | |
| left: '3%', | |
| right: '4%', | |
| bottom: '3%', | |
| containLabel: true | |
| }, | |
| xAxis: { | |
| type: 'value' | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: ['周一','周二','周三','周四','周五','周六','周日'] | |
| }, | |
| series: [ | |
| { | |
| name: '直接访问', | |
| type: 'bar', | |
| stack: '总量', | |
| label: { | |
| show: true | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| }, | |
| emphasis: { | |
| focus: 'series' | |
| }, | |
| data: [13244, 302, 301, 334, 390, 330, 320] | |
| }, | |
| { | |
| name: '邮件营销', | |
| type: 'bar', | |
| stack: '总量', | |
| label: { | |
| show: true | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| }, | |
| emphasis: { | |
| focus: 'series' | |
| }, | |
| data: [120, 132, 101, 134, 90, 230, 210] | |
| }, | |
| { | |
| name: '联盟广告', | |
| type: 'bar', | |
| stack: '总量', | |
| label: { | |
| show: true | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| }, | |
| emphasis: { | |
| focus: 'series' | |
| }, | |
| data: [220, 182, 191, 234, 290, 330, 310] | |
| }, | |
| { | |
| name: '视频广告', | |
| type: 'bar', | |
| stack: '总量', | |
| label: { | |
| show: true | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| }, | |
| emphasis: { | |
| focus: 'series' | |
| }, | |
| data: [150, 212, 201, 154, 190, 330, 410] | |
| }, | |
| { | |
| name: '搜索引擎', | |
| type: 'bar', | |
| stack: '总量', | |
| label: { | |
| show: true | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| }, | |
| emphasis: { | |
| focus: 'series' | |
| }, | |
| data: [820, 832, 901, 934, 1290, 1330, 1320] | |
| } | |
| ] | |
| } | |
| var chart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| 'Overlap of stacked bar.', | |
| 'Case from #6514' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| var base = +new Date(1968, 9, 3); | |
| var oneDay = 24 * 3600 * 1000; | |
| var date = []; | |
| var data = [Math.round(Math.random() * 300)]; | |
| for (var i = 1; i < 50; i++) { | |
| var now = new Date(base += oneDay); | |
| date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); | |
| data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); | |
| } | |
| option = { | |
| grid: { | |
| containLabel: true | |
| }, | |
| xAxis: { | |
| type: 'category', | |
| boundaryGap: false, | |
| data: date | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| boundaryGap: [0, '100%'] | |
| }, | |
| series: [ | |
| { | |
| name:'large area', | |
| type:'line', | |
| smooth:true, | |
| label: { | |
| show: true, | |
| position: 'top' | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| }, | |
| itemStyle: { | |
| color: 'rgb(255, 70, 131)' | |
| }, | |
| areaStyle: { | |
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |
| offset: 0, | |
| color: 'rgb(255, 158, 68)' | |
| }, { | |
| offset: 1, | |
| color: 'rgb(255, 70, 131)' | |
| }]) | |
| }, | |
| data: data | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| width: 600, | |
| title: [ | |
| 'Overlap of line.' | |
| ], | |
| 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%'], | |
| labelLine: { | |
| length2: 100 | |
| }, | |
| labelLayout: function (params) { | |
| const cx = window.innerWidth / 2; | |
| const isLeft = params.labelRect.x < cx; | |
| return isLeft ? { | |
| x: cx - 200, | |
| align: 'right', | |
| } : { | |
| x: cx + 100, | |
| align: 'left' | |
| }; | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main2', { | |
| title: 'Pie label edge.', | |
| height: 300, | |
| option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| option = { | |
| tooltip: { | |
| trigger: 'item', | |
| formatter: '{a} <br/>{b}: {c} ({d}%)' | |
| }, | |
| legend: { | |
| orient: 'vertical', | |
| left: 10, | |
| data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] | |
| }, | |
| series: [ | |
| { | |
| name: '访问来源', | |
| type: 'pie', | |
| radius: ['50%', '70%'], | |
| label: { | |
| color: 'inherit', | |
| show: false | |
| }, | |
| emphasis: { | |
| label: { | |
| show: true, | |
| fontSize: 30, | |
| fontWeight: 'bold' | |
| } | |
| }, | |
| labelLayout: { | |
| x: '50%', | |
| y: '50%', | |
| align: 'center', | |
| verticalAlign: 'center' | |
| }, | |
| labelLine: { | |
| show: false | |
| }, | |
| data: [ | |
| {value: 335, name: '直接访问'}, | |
| {value: 310, name: '邮件营销'}, | |
| {value: 234, name: '联盟广告'}, | |
| {value: 135, name: '视频广告'}, | |
| {value: 1548, name: '搜索引擎'} | |
| ] | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main3', { | |
| title: [ | |
| 'Pie label center.' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| var data = [ | |
| [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]], | |
| [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]] | |
| ]; | |
| option = { | |
| xAxis: {}, | |
| yAxis: { | |
| scale: true | |
| }, | |
| series: [{ | |
| name: '1990', | |
| data: data[0], | |
| type: 'scatter', | |
| symbolSize: function (data) { | |
| return Math.sqrt(data[2]) / 5e2; | |
| }, | |
| emphasis: { | |
| focus: 'self' | |
| }, | |
| labelLayout: { | |
| y: 20, | |
| align: 'center', | |
| moveOverlap: 'shiftX', | |
| hideOverlap: true | |
| }, | |
| labelLine: { | |
| show: true, | |
| length2: 5, | |
| lineStyle: { | |
| color: '#bbb' | |
| } | |
| }, | |
| label: { | |
| show: true, | |
| formatter: function (param) { | |
| return param.data[3]; | |
| }, | |
| minMargin: 10, | |
| color: '#333', | |
| textBorderColor: '#fff', | |
| textBorderWidth: 1, | |
| position: 'top' | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main6', { | |
| title: [ | |
| 'Overlap Shift X' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| var data = [ | |
| [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]], | |
| [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]] | |
| ]; | |
| option = { | |
| xAxis: { | |
| splitLine: { show: false } | |
| }, | |
| yAxis: { | |
| splitLine: { show: false }, | |
| scale: true | |
| }, | |
| grid: { | |
| left: 100, | |
| width: 300 | |
| }, | |
| series: [{ | |
| name: '1990', | |
| data: data[0], | |
| type: 'scatter', | |
| symbolSize: function (data) { | |
| return Math.sqrt(data[2]) / 5e2; | |
| }, | |
| emphasis: { | |
| focus: 'self' | |
| }, | |
| labelLayout: { | |
| x: 500, | |
| moveOverlap: 'shiftY', | |
| // hideOverlap: true | |
| }, | |
| labelLine: { | |
| show: true, | |
| length2: 5, | |
| lineStyle: { | |
| color: '#bbb' | |
| } | |
| }, | |
| label: { | |
| show: true, | |
| formatter: function (param) { | |
| return param.data[3]; | |
| }, | |
| textBorderColor: '#fff', | |
| textBorderWidth: 1, | |
| position: 'top', | |
| minMargin: 2 | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main7', { | |
| title: [ | |
| 'Overlap Shift Y' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| const color = [ | |
| '#1576d2', | |
| '#d14a82', | |
| '#26c1f2', | |
| '#a166ff', | |
| '#1271cc', | |
| '#272f67' | |
| ]; | |
| let data = [{ | |
| name: 'Mon', | |
| value: 182 | |
| }, | |
| { | |
| name: 'Tue', | |
| value: 191 | |
| }, | |
| { | |
| name: 'Wed', | |
| value: 234 | |
| }, | |
| { | |
| name: 'Thu', | |
| value: 290 | |
| }, | |
| { | |
| name: 'Fri', | |
| value: 330 | |
| } | |
| ]; | |
| // 指定数据块中 label 的相应效果,以保证label的正常显示 | |
| const dataArcStyle = { | |
| label: { | |
| show: true | |
| }, | |
| labelLine: { | |
| show: true | |
| }, | |
| emphasis: { | |
| labelLine: { | |
| show: true | |
| } | |
| } | |
| } | |
| data = data.map(d => { | |
| d = Object.assign(d, dataArcStyle) | |
| return d; | |
| }); | |
| const sum = data.reduce((prev, curr) => prev + curr.value, 0); | |
| data.push({ | |
| name: null, | |
| value: sum, | |
| itemStyle: { | |
| opacity: 0 | |
| }, | |
| label: { | |
| show: false | |
| }, | |
| tooltip: { | |
| show: false | |
| } | |
| }); | |
| option = { | |
| backgroundColor: '#000', | |
| color, | |
| tooltip: { | |
| show: true | |
| }, | |
| series: [{ | |
| type: 'pie', | |
| center: ['50%', '75%'], | |
| radius: ['50%', '80%'], | |
| startAngle: 180, | |
| data | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main8', { | |
| title: [ | |
| 'Case from https://gallery.echartsjs.com/editor.html?c=xFcvAMHjr1&v=1' | |
| ], | |
| option: option, | |
| height: 500 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts', 'map/js/china'], function (echarts) { | |
| option = { | |
| series: [{ | |
| type: 'map', | |
| map: 'china', | |
| label: { | |
| show: false, | |
| formatter: [ | |
| `{title|{b}}`, | |
| `{value|{c} K 平方公里}` | |
| ].join('\n'), | |
| backgroundColor: '#eee', | |
| borderColor: '#17A597', | |
| borderWidth: 1, | |
| borderRadius: 4, | |
| align: 'center', | |
| width: 150, | |
| rich: { | |
| title: { | |
| align: 'center', | |
| lineHeight: 17, | |
| fontSize: 12, | |
| color: '#fff', | |
| backgroundColor: '#17A597', | |
| width: 150, | |
| height: 20, | |
| borderRadius: [4, 4, 0, 0] | |
| }, | |
| value: { | |
| align: 'center', | |
| height: 25 | |
| } | |
| } | |
| }, | |
| labelLine: { | |
| show: true, | |
| showAbove: true, | |
| length2: 10 | |
| }, | |
| labelLayout: function (params) { | |
| const positionMap = [ | |
| // 内蒙古 | |
| (params) => { return { y: params.rect.y - 20, align: 'center' } }, | |
| // 上海 | |
| (params) => { return { x: params.rect.x + 50, align: 'left' } } | |
| ] | |
| return positionMap[params.dataIndex] && Object.assign({ | |
| draggable: true | |
| }, positionMap[params.dataIndex](params)); | |
| }, | |
| emphasis: { | |
| label: { | |
| show: false | |
| } | |
| }, | |
| data: [{ | |
| name: '内蒙古', | |
| value: 118.3, | |
| label: { | |
| show: true | |
| } | |
| }, { | |
| name: '上海', | |
| value: 6.34, | |
| label: { | |
| show: true | |
| } | |
| }] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main9', { | |
| title: [ | |
| 'Draggable label' | |
| ], | |
| option: option, | |
| height: 500 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'extension/dataTool', | |
| './data/les-miserables.gexf' | |
| ], function (echarts, dataTool, xml) { | |
| var graph = dataTool.gexf.parse(xml); | |
| var categories = []; | |
| for (var i = 0; i < 9; i++) { | |
| categories[i] = { | |
| name: '类目' + i | |
| }; | |
| } | |
| graph.nodes.forEach(function (node) { | |
| delete node.itemStyle; | |
| node.value = node.symbolSize; | |
| node.category = node.attributes['modularity_class']; | |
| }); | |
| graph.links.forEach(function (link) { | |
| delete link.lineStyle; | |
| }); | |
| var option = { | |
| legend: [{}], | |
| animationDurationUpdate: 1500, | |
| animationEasingUpdate: 'quinticInOut', | |
| series : [ | |
| { | |
| name: 'Les Miserables', | |
| type: 'graph', | |
| layout: 'none', | |
| data: graph.nodes, | |
| links: graph.links, | |
| categories: categories, | |
| roam: true, | |
| draggable: true, | |
| label: { | |
| show: true, | |
| formatter: '{b}', | |
| position: 'right' | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| }, | |
| emphasis: { | |
| label: { | |
| show: true | |
| } | |
| }, | |
| lineStyle: { | |
| color: 'source', | |
| curveness: 0.3 | |
| }, | |
| emphasis: { | |
| lineStyle: { | |
| width: 10 | |
| } | |
| } | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main10', { | |
| title: [ | |
| 'Hide overlap in graph zooming.' | |
| ], | |
| height: 800, | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts', 'map/js/china'], function (echarts) { | |
| const option = { | |
| series: [{ | |
| type: 'map', | |
| map: 'china', | |
| roam: true, | |
| label: { | |
| show: true | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main11', { | |
| title: [ | |
| 'Map label should update it\'s position when labelLayout is used.' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| const svg = [ | |
| '<?xml version="1.0" encoding="utf-8"?>', | |
| '<svg viewBox="-25 0 300 100" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" fill-rule="evenodd" xml:space="preserve">', | |
| '<path name="left_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>', | |
| '<path name="right_rect" d="M 150,0 L 150,100 250,100 250,0 Z" fill="#567" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>', | |
| '</svg>' | |
| ].join('') | |
| echarts.registerMap('testGeoSVG_coord1', { svg: svg }); | |
| option = { | |
| series: [{ | |
| type: 'map', | |
| roam: true, | |
| top: 10, | |
| bottom: 10, | |
| left: 10, | |
| right: 10, | |
| selectedMode: 'multiple', | |
| map: 'testGeoSVG_coord1', | |
| select: { | |
| itemStyle: { | |
| color: 'red' | |
| }, | |
| label: { | |
| color: '#fff' | |
| } | |
| }, | |
| label: { | |
| show: true, | |
| fontSize: 30 | |
| }, | |
| labelLayout: { | |
| hideOverlap: true | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main12', { | |
| title: [ | |
| 'Click both rect make them selected (become red)', | |
| '(1) zoom to trigger label **hideOverlap**', | |
| 'zoom back, check labels should be restored', | |
| '(2) mouseover one the **right rect** and zoom to trigger label **hideOverlap**', | |
| 'zoom back, mouseout, check the label should not disappear' | |
| ], | |
| option: option, | |
| height: 200, | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| const svg = [ | |
| '<?xml version="1.0" encoding="utf-8"?>', | |
| '<svg xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" fill-rule="evenodd" xml:space="preserve">', | |
| '<path name="left_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>', | |
| '</svg>' | |
| ].join('') | |
| echarts.registerMap('testGeoSVG_coord2', { svg: svg }); | |
| option = { | |
| geo: { | |
| map: 'testGeoSVG_coord2', | |
| roam: true | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main13', { | |
| title: [ | |
| '(geo coordSys) label displayed only on hover', | |
| 'zoom: label should keep displayed.' | |
| ], | |
| option: option, | |
| height: 200, | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |