| <!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/esl.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> |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| // $.getJSON('./data/nutrients.json', function (data) {}); |
| 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'], function (echarts, dataTool) { |
| $.get('./data/les-miserables.gexf', function (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> |
| |
| |
| </body> |
| </html> |
| |
