| |
| <!-- |
| 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"> |
| <script src="lib/simpleRequire.js"></script> |
| <script src="lib/config.js"></script> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| .split { |
| line-height: 60px; |
| height: 60px; |
| background: #ddd; |
| text-align: center; |
| font-weight: bold; |
| font-size: 20px; |
| } |
| .main { |
| height: 80%; |
| } |
| </style> |
| |
| <div class="split">Color Hue</div> |
| <div id="main1" class="main"></div> |
| <div class="split">Color List</div> |
| <div id="main2" class="main"></div> |
| <div class="split">Map</div> |
| <div id="main3" class="main"></div> |
| <div class="split">Stacked Bar (and inversed)</div> |
| <div id="main4" class="main"></div> |
| |
| <script type="text/javascript"> |
| require([ |
| 'echarts' |
| ], function (echarts) { |
| const main = document.getElementById('main1'); |
| if (!main) { |
| return; |
| } |
| const chart = echarts.init(main); |
| |
| const data0 = []; |
| const MAX_DIM1 = 100; |
| |
| const itemStyle = { |
| opacity: 0.8, |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowOffsetY: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.3)' |
| }; |
| |
| let last = 60; |
| let lastDelta = 20; |
| for (let i = 0; i < MAX_DIM1; i++) { |
| lastDelta += (Math.random() - 0.5) * 15; |
| data0.push([ |
| i, |
| last += lastDelta |
| ]); |
| } |
| |
| chart.setOption({ |
| grid: { |
| top: 100, |
| bottom: 100 |
| }, |
| xAxis: { |
| type: 'value', |
| splitLine: { |
| show: false |
| } |
| }, |
| yAxis: { |
| type: 'value', |
| splitLine: { |
| show: false |
| } |
| }, |
| visualMap: [ |
| { |
| show: true, |
| left: 'center', |
| bottom: 20, |
| orient: 'horizontal', |
| itemWidth: 20, |
| itemHeight: 200, |
| min: 0, |
| max: MAX_DIM1, |
| calculable: true, |
| range: [5, 95], |
| dimension: 0, |
| inRange: { |
| colorHue: [0, 300], |
| colorLightness: 0.35, |
| colorSaturation: 1 |
| }, |
| outOfRange: { |
| color: '#eee' |
| }, |
| text: ['High', 'Low'], |
| textStyle: { |
| textShadowColor: "rgba(255, 0, 255, 1)", |
| textShadowBlur: 5, |
| textShadowOffsetX: 5, |
| textShadowOffsetY: 5 |
| } |
| } |
| ], |
| series: [ |
| { |
| name: 'bar', |
| type: 'bar', |
| barMaxWidth: 10, |
| itemStyle, |
| data: data0 |
| } |
| ] |
| }); |
| }) |
| </script> |
| |
| <script type="text/javascript"> |
| require([ |
| 'echarts' |
| ], function (echarts) { |
| const main = document.getElementById('main2'); |
| if (!main) { |
| return; |
| } |
| const chart = echarts.init(main); |
| |
| const data0 = []; |
| const data1 = []; |
| |
| const MAX_DIM2 = 300; |
| const MAX_DIM3 = 20000; |
| |
| const itemStyle = { |
| opacity: 0.8, |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowOffsetY: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| }; |
| |
| for (let i = 0; i < 60; i++) { |
| data0.push(genDataItem()); |
| data1.push(genDataItem()); |
| } |
| |
| function genDataItem() { |
| return [ |
| Math.random() * 5, |
| Math.random() * 4, |
| Math.random() * MAX_DIM2, |
| Math.random() * MAX_DIM3 |
| ]; |
| } |
| |
| chart.setOption({ |
| color: ['#555', '#555'], |
| legend: { |
| top: 20, |
| data: ['scatter0', 'scatter1'] |
| }, |
| grid: { |
| top: 100, |
| bottom: 60, |
| left: 150 |
| }, |
| xAxis: { |
| type: 'value', |
| splitLine: { |
| show: false |
| } |
| }, |
| yAxis: { |
| type: 'value', |
| splitLine: { |
| show: false |
| } |
| }, |
| visualMap: [ |
| { |
| show: true, |
| top: 'center', |
| left: 30, |
| itemHeight: 400, |
| min: 0, |
| max: MAX_DIM2, |
| calculable: true, |
| dimension: 2, |
| range: [15, 278], |
| inRange: { |
| color: ['blue', 'orange', 'yellow'] |
| }, |
| outOfRange: { |
| color: '#ddd' |
| } |
| }, |
| { |
| show: false, |
| min: 0, |
| max: MAX_DIM3, |
| dimension: 3, |
| inRange: { |
| symbolSize: [3, 40] |
| }, |
| outOfRange: { |
| symbolSize: [3, 40] |
| } |
| } |
| ], |
| series: [ |
| { |
| name: 'scatter0', |
| type: 'scatter', |
| symbol: 'circle', |
| itemStyle, |
| data: data0 |
| }, |
| { |
| name: 'scatter1', |
| type: 'scatter', |
| symbol: 'diamond', |
| itemStyle, |
| data: data1 |
| } |
| ] |
| }); |
| }) |
| </script> |
| |
| <script type="text/javascript"> |
| require([ |
| 'echarts', |
| 'map/js/world' |
| ], function (echarts) { |
| renderWorldMap(echarts); |
| }); |
| |
| function renderWorldMap(echarts) { |
| const main = document.getElementById('main3'); |
| if (!main) { |
| return; |
| } |
| const chart = echarts.init(main); |
| |
| option = { |
| title: { |
| text: 'World Population (2010)', |
| subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)', |
| sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm', |
| left: 'center', |
| top: 'top' |
| }, |
| tooltip: { |
| trigger: 'item', |
| formatter: function (params) { |
| const list = (params.value + '').split('.'); |
| const value = list[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') |
| + '.' + list[1]; |
| return params.seriesName + '<br/>' + params.name + ' : ' + value; |
| } |
| }, |
| toolbox: { |
| show: true, |
| orient: 'vertical', |
| left: 'right', |
| top: 'center', |
| feature: { |
| dataView: {readOnly: false}, |
| restore: {}, |
| saveAsImage: {} |
| } |
| }, |
| visualMap: { |
| min: 0, |
| max: 1000000, |
| left: 10, |
| bottom: 70, |
| itemHeight: 200, |
| hoverLinkDataSize: 100000, |
| text: ['High', 'Low'], |
| // realtime: false, |
| calculable: true, |
| color: ['orangered', 'yellow', 'lightskyblue'] |
| }, |
| series: [ |
| { |
| name: 'World Population (2010)', |
| type: 'map', |
| map: 'world', |
| roam: true, |
| emphasis: { |
| label: { |
| show: true |
| } |
| }, |
| data:[ |
| {name: 'Afghanistan', value: 28397.812}, |
| {name: 'Angola', value: 19549.124}, |
| {name: 'Albania', value: 3150.143}, |
| {name: 'United Arab Emirates', value: 8441.537}, |
| {name: 'Argentina', value: 40374.224}, |
| {name: 'Armenia', value: 2963.496}, |
| {name: 'French Southern and Antarctic Lands', value: 268.065}, |
| {name: 'Australia', value: 22404.488}, |
| {name: 'Austria', value: 8401.924}, |
| {name: 'Azerbaijan', value: 9094.718}, |
| {name: 'Burundi', value: 9232.753}, |
| {name: 'Belgium', value: 10941.288}, |
| {name: 'Benin', value: 9509.798}, |
| {name: 'Burkina Faso', value: 15540.284}, |
| {name: 'Bangladesh', value: 151125.475}, |
| {name: 'Bulgaria', value: 7389.175}, |
| {name: 'The Bahamas', value: 66402.316}, |
| {name: 'Bosnia and Herzegovina', value: 3845.929}, |
| {name: 'Belarus', value: 9491.07}, |
| {name: 'Belize', value: 308.595}, |
| {name: 'Bermuda', value: 64.951}, |
| {name: 'Bolivia', value: 716.939}, |
| {name: 'Brazil', value: 195210.154}, |
| {name: 'Brunei', value: 27.223}, |
| {name: 'Bhutan', value: 716.939}, |
| {name: 'Botswana', value: 1969.341}, |
| {name: 'Central African Republic', value: 4349.921}, |
| {name: 'Canada', value: 34126.24}, |
| {name: 'Switzerland', value: 7830.534}, |
| {name: 'Chile', value: 17150.76}, |
| {name: 'China', value: 1359821.465}, |
| {name: 'Ivory Coast', value: 60508.978}, |
| {name: 'Cameroon', value: 20624.343}, |
| {name: 'Democratic Republic of the Congo', value: 62191.161}, |
| {name: 'Republic of the Congo', value: 3573.024}, |
| {name: 'Colombia', value: 46444.798}, |
| {name: 'Costa Rica', value: 4669.685}, |
| {name: 'Cuba', value: 11281.768}, |
| {name: 'Northern Cyprus', value: 1.468}, |
| {name: 'Cyprus', value: 1103.685}, |
| {name: 'Czech Republic', value: 10553.701}, |
| {name: 'Germany', value: 83017.404}, |
| {name: 'Djibouti', value: 834.036}, |
| {name: 'Denmark', value: 5550.959}, |
| {name: 'Dominican Republic', value: 10016.797}, |
| {name: 'Algeria', value: 37062.82}, |
| {name: 'Ecuador', value: 15001.072}, |
| {name: 'Egypt', value: 78075.705}, |
| {name: 'Eritrea', value: 5741.159}, |
| {name: 'Spain', value: 46182.038}, |
| {name: 'Estonia', value: 1298.533}, |
| {name: 'Ethiopia', value: 87095.281}, |
| {name: 'Finland', value: 5367.693}, |
| {name: 'Fiji', value: 860.559}, |
| {name: 'Falkland Islands', value: 49.581}, |
| {name: 'France', value: 63230.866}, |
| {name: 'Gabon', value: 1556.222}, |
| {name: 'United Kingdom', value: 62066.35}, |
| {name: 'Georgia', value: 4388.674}, |
| {name: 'Ghana', value: 24262.901}, |
| {name: 'Guinea', value: 10876.033}, |
| {name: 'Gambia', value: 1680.64}, |
| {name: 'Guinea Bissau', value: 10876.033}, |
| {name: 'Equatorial Guinea', value: 696.167}, |
| {name: 'Greece', value: 11109.999}, |
| {name: 'Greenland', value: 56.546}, |
| {name: 'Guatemala', value: 14341.576}, |
| {name: 'French Guiana', value: 231.169}, |
| {name: 'Guyana', value: 786.126}, |
| {name: 'Honduras', value: 7621.204}, |
| {name: 'Croatia', value: 4338.027}, |
| {name: 'Haiti', value: 9896.4}, |
| {name: 'Hungary', value: 10014.633}, |
| {name: 'Indonesia', value: 240676.485}, |
| {name: 'India', value: 1205624.648}, |
| {name: 'Ireland', value: 4467.561}, |
| {name: 'Iran', value: 240676.485}, |
| {name: 'Iraq', value: 30962.38}, |
| {name: 'Iceland', value: 318.042}, |
| {name: 'Israel', value: 7420.368}, |
| {name: 'Italy', value: 60508.978}, |
| {name: 'Jamaica', value: 2741.485}, |
| {name: 'Jordan', value: 6454.554}, |
| {name: 'Japan', value: 127352.833}, |
| {name: 'Kazakhstan', value: 15921.127}, |
| {name: 'Kenya', value: 40909.194}, |
| {name: 'Kyrgyzstan', value: 5334.223}, |
| {name: 'Cambodia', value: 14364.931}, |
| {name: 'South Korea', value: 51452.352}, |
| {name: 'Kosovo', value: 97.743}, |
| {name: 'Kuwait', value: 2991.58}, |
| {name: 'Laos', value: 6395.713}, |
| {name: 'Lebanon', value: 4341.092}, |
| {name: 'Liberia', value: 3957.99}, |
| {name: 'Libya', value: 6040.612}, |
| {name: 'Sri Lanka', value: 20758.779}, |
| {name: 'Lesotho', value: 2008.921}, |
| {name: 'Lithuania', value: 3068.457}, |
| {name: 'Luxembourg', value: 507.885}, |
| {name: 'Latvia', value: 2090.519}, |
| {name: 'Morocco', value: 31642.36}, |
| {name: 'Moldova', value: 103.619}, |
| {name: 'Madagascar', value: 21079.532}, |
| {name: 'Mexico', value: 117886.404}, |
| {name: 'Macedonia', value: 507.885}, |
| {name: 'Mali', value: 13985.961}, |
| {name: 'Myanmar', value: 51931.231}, |
| {name: 'Montenegro', value: 620.078}, |
| {name: 'Mongolia', value: 2712.738}, |
| {name: 'Mozambique', value: 23967.265}, |
| {name: 'Mauritania', value: 3609.42}, |
| {name: 'Malawi', value: 15013.694}, |
| {name: 'Malaysia', value: 28275.835}, |
| {name: 'Namibia', value: 2178.967}, |
| {name: 'New Caledonia', value: 246.379}, |
| {name: 'Niger', value: 15893.746}, |
| {name: 'Nigeria', value: 159707.78}, |
| {name: 'Nicaragua', value: 5822.209}, |
| {name: 'Netherlands', value: 16615.243}, |
| {name: 'Norway', value: 4891.251}, |
| {name: 'Nepal', value: 26846.016}, |
| {name: 'New Zealand', value: 4368.136}, |
| {name: 'Oman', value: 2802.768}, |
| {name: 'Pakistan', value: 173149.306}, |
| {name: 'Panama', value: 3678.128}, |
| {name: 'Peru', value: 29262.83}, |
| {name: 'Philippines', value: 93444.322}, |
| {name: 'Papua New Guinea', value: 6858.945}, |
| {name: 'Poland', value: 38198.754}, |
| {name: 'Puerto Rico', value: 3709.671}, |
| {name: 'North Korea', value: 1.468}, |
| {name: 'Portugal', value: 10589.792}, |
| {name: 'Paraguay', value: 6459.721}, |
| {name: 'Qatar', value: 1749.713}, |
| {name: 'Romania', value: 21861.476}, |
| {name: 'Russia', value: 21861.476}, |
| {name: 'Rwanda', value: 10836.732}, |
| {name: 'Western Sahara', value: 514.648}, |
| {name: 'Saudi Arabia', value: 27258.387}, |
| {name: 'Sudan', value: 35652.002}, |
| {name: 'South Sudan', value: 9940.929}, |
| {name: 'Senegal', value: 12950.564}, |
| {name: 'Solomon Islands', value: 526.447}, |
| {name: 'Sierra Leone', value: 5751.976}, |
| {name: 'El Salvador', value: 6218.195}, |
| {name: 'Somaliland', value: 9636.173}, |
| {name: 'Somalia', value: 9636.173}, |
| {name: 'Republic of Serbia', value: 3573.024}, |
| {name: 'Suriname', value: 524.96}, |
| {name: 'Slovakia', value: 5433.437}, |
| {name: 'Slovenia', value: 2054.232}, |
| {name: 'Sweden', value: 9382.297}, |
| {name: 'Swaziland', value: 1193.148}, |
| {name: 'Syria', value: 7830.534}, |
| {name: 'Chad', value: 11720.781}, |
| {name: 'Togo', value: 6306.014}, |
| {name: 'Thailand', value: 66402.316}, |
| {name: 'Tajikistan', value: 7627.326}, |
| {name: 'Turkmenistan', value: 5041.995}, |
| {name: 'East Timor', value: 10016.797}, |
| {name: 'Trinidad and Tobago', value: 1328.095}, |
| {name: 'Tunisia', value: 10631.83}, |
| {name: 'Turkey', value: 72137.546}, |
| {name: 'United Republic of Tanzania', value: 44973.33}, |
| {name: 'Uganda', value: 33987.213}, |
| {name: 'Ukraine', value: 46050.22}, |
| {name: 'Uruguay', value: 3371.982}, |
| {name: 'United States of America', value: 312247.116}, |
| {name: 'Uzbekistan', value: 27769.27}, |
| {name: 'Venezuela', value: 236.299}, |
| {name: 'Vietnam', value: 89047.397}, |
| {name: 'Vanuatu', value: 236.299}, |
| {name: 'West Bank', value: 13.565}, |
| {name: 'Yemen', value: 22763.008}, |
| {name: 'South Africa', value: 51452.352}, |
| {name: 'Zambia', value: 13216.985}, |
| {name: 'Zimbabwe', value: 13076.978} |
| ] |
| } |
| ] |
| }; |
| |
| chart.setOption(option); |
| } |
| </script> |
| |
| <script type="text/javascript"> |
| require(['echarts'], function (echarts) { |
| const main = document.getElementById('main4'); |
| if (!main) { |
| return; |
| } |
| const chart = echarts.init(main); |
| |
| const xAxisData = []; |
| const data1 = []; |
| const data2 = []; |
| const data3 = []; |
| const data4 = []; |
| |
| for (let i = 0; i < 10; i++) { |
| xAxisData.push('Class' + i); |
| data1.push((Math.random() * 2).toFixed(2)); |
| data2.push(-Math.random().toFixed(2)); |
| data3.push((Math.random() * 5).toFixed(2)); |
| data4.push((Math.random() + 0.3).toFixed(2)); |
| } |
| |
| const emphasis = { |
| label: { |
| show: true, |
| position: 'outside' |
| }, |
| itemStyle: { |
| borderWidth: 1, |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowOffsetY: 0, |
| shadowColor: 'rgba(0,0,0,0.5)' |
| } |
| }; |
| |
| chart.setOption({ |
| backgroundColor: '#eee', |
| legend: { |
| data: ['bar', 'bar2', 'bar3', 'bar4'], |
| align: 'left' |
| }, |
| toolbox: { |
| feature: { |
| magicType: { |
| type: ['line', 'bar', 'stack', 'tiled'] |
| }, |
| dataView: {} |
| } |
| }, |
| tooltip: {}, |
| xAxis: { |
| data: xAxisData, |
| name: 'X Axis', |
| silent: false, |
| axisLine: {onZero: true}, |
| splitLine: {show: false}, |
| splitArea: {show: false} |
| }, |
| yAxis: { |
| inverse: true, |
| splitArea: {show: false} |
| }, |
| grid: { |
| left: 100 |
| }, |
| visualMap: { |
| type: 'continuous', |
| dimension: 1, |
| text: ['High', 'Low'], |
| inverse: true, |
| itemHeight: 200, |
| calculable: true, |
| min: -2, |
| max: 6, |
| top: 60, |
| left: 10 |
| }, |
| series: [ |
| { |
| name: 'bar', |
| type: 'bar', |
| stack: 'one', |
| emphasis, |
| data: data1 |
| }, |
| { |
| name: 'bar2', |
| type: 'bar', |
| stack: 'one', |
| emphasis, |
| data: data2 |
| }, |
| { |
| name: 'bar3', |
| type: 'bar', |
| stack: 'two', |
| emphasis, |
| data: data3 |
| }, |
| { |
| name: 'bar4', |
| type: 'bar', |
| stack: 'two', |
| emphasis, |
| data: data4 |
| } |
| ] |
| }); |
| |
| // Check setOption at the second time. |
| chart.setOption({ |
| visualMap: { |
| outOfRange: {color: '#aaa'} |
| } |
| }); |
| }); |
| </script> |
| |
| </body> |
| </html> |
