| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="esl.js"></script> | |
| <script src="config.js"></script> | |
| <link rel="stylesheet" href="reset.css"> | |
| <script src="lib/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <style> | |
| .main { | |
| height: 400px; | |
| margin: 10px 0 80px 0; | |
| } | |
| .label { | |
| background: #ddd; | |
| line-height: 30px; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| </style> | |
| <div class="label">Color Alpha in scatter (using outOfRange as 'selected')</div> | |
| <div class="main" id="main1"></div> | |
| <div class="label">Opacity in bar (label color specified)</div> | |
| <div class="main" id="main2"></div> | |
| <div class="label">Opacity in scatter (label color specified)</div> | |
| <div class="main" id="main3"></div> | |
| <div class="label">Opacity in graph (label color specified)</div> | |
| <div class="main" id="main4"></div> | |
| <div class="label">Opacity in heatmap (inactive color default using opacity)</div> | |
| <div class="main" id="main5"></div> | |
| <div class="label">Opacity in pie (label color and label line color specified)</div> | |
| <div class="main" id="main6"></div> | |
| <!-- ALPHA SCATTER --> | |
| <script type="text/javascript"> | |
| require([ | |
| 'echarts', | |
| 'echarts/chart/scatter', | |
| 'echarts/component/legend', | |
| 'echarts/component/grid', | |
| 'echarts/component/visualMapPiecewise' | |
| ], function (echarts) { | |
| var main = document.getElementById('main1'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var data1 = []; | |
| var data2 = []; | |
| var data3 = []; | |
| var symbolCount = 6; | |
| for (var i = 0; i < 100; i++) { | |
| data1.push([ | |
| Math.random() * 5, | |
| Math.random() * 4, | |
| Math.random() * 20, | |
| Math.round(Math.random() * (symbolCount - 1)) | |
| ]); | |
| data2.push([ | |
| Math.random() * 10, | |
| Math.random() * 5, | |
| Math.random() * 20, | |
| Math.round(Math.random() * (symbolCount - 1)) | |
| ]); | |
| data3.push([ | |
| Math.random() * 15, | |
| Math.random() * 10, | |
| Math.random() * 20, | |
| Math.round(Math.random() * (symbolCount - 1)) | |
| ]); | |
| } | |
| chart.on('click', function (params) { | |
| console.log(params); | |
| }); | |
| chart.setOption({ | |
| color: ['#bcd3bb', '#928ea8', '#edc1a5'], | |
| legend: { | |
| data: ['scatter', 'scatter2', 'scatter3'] | |
| }, | |
| grid: { | |
| top: 50, | |
| bottom: 30 | |
| }, | |
| xAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| visualMap: [ | |
| { | |
| type: 'piecewise', | |
| splitNumber: 6, | |
| left: 'right', | |
| bottom: 30, | |
| // selectedMode: 'single', | |
| selectedMode: 'multiple', | |
| selected: { | |
| 0: false, 1: false, 2: false, 3: false, 4: false, 5: false | |
| }, | |
| dimension: 'value', | |
| min: 0, | |
| max: 24, | |
| precision: 0, | |
| inRange: { // visual for short cut | |
| color: ['rgb(20,1,0)'], | |
| symbolSize: [40, 5] | |
| }, | |
| outOfRange: { | |
| colorAlpha: [0.3, 1], | |
| symbolSize: [40, 5] | |
| } | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: 'scatter', | |
| type: 'scatter', | |
| itemStyle: { | |
| normal: { | |
| opacity: 0.8, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| }, | |
| data: data1 | |
| }, | |
| { | |
| name: 'scatter2', | |
| type: 'scatter', | |
| itemStyle: { | |
| normal: { | |
| opacity: 0.8, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| }, | |
| data: data2 | |
| }, | |
| { | |
| name: 'scatter3', | |
| type: 'scatter', | |
| itemStyle: { | |
| normal: { | |
| opacity: 0.8, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| }, | |
| data: data3 | |
| } | |
| ] | |
| }); | |
| window.addEventListener('resize', function () { | |
| chart.resize(); | |
| }); | |
| }); | |
| </script> | |
| <!-- OPACITY BAR --> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'echarts/chart/bar', | |
| 'echarts/chart/line', | |
| 'echarts/component/legend', | |
| 'echarts/component/grid', | |
| 'echarts/component/tooltip', | |
| 'echarts/component/toolbox', | |
| 'echarts/component/visualMap', | |
| 'zrender/vml/vml' | |
| ], function (echarts) { | |
| var main = document.getElementById('main2'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| var data3 = []; | |
| var data4 = []; | |
| var DATA_MAX = 5.5; | |
| for (var i = 0; i < 10; i++) { | |
| xAxisData.push('类目' + i); | |
| data1.push((Math.random() * DATA_MAX).toFixed(2)); | |
| data2.push(-Math.random().toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| data4.push((Math.random() + 0.3).toFixed(2)); | |
| } | |
| var labelStyle = { | |
| normal: { | |
| show: true, | |
| position: 'outside', | |
| textStyle: { | |
| color: '#333' | |
| } | |
| } | |
| }; | |
| var itemStyle = { | |
| normal: { | |
| }, | |
| emphasis: { | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0,0,0,0.5)' | |
| } | |
| }; | |
| chart.setOption({ | |
| legend: { | |
| data: ['bar', 'bar2', 'bar3'], | |
| align: 'left' | |
| }, | |
| toolbox: { | |
| // y: 'bottom', | |
| feature: { | |
| magicType: { | |
| type: ['line', 'bar', 'stack', 'tiled'] | |
| }, | |
| dataView: {} | |
| } | |
| }, | |
| tooltip: {}, | |
| xAxis: { | |
| data: xAxisData, | |
| axisLine: { | |
| onZero: true | |
| }, | |
| splitLine: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| splitArea: { | |
| show: false | |
| }, | |
| max: 6, | |
| min: -2 | |
| }, | |
| visualMap: [ | |
| { | |
| type: 'continuous', | |
| right: 0, | |
| itemWidth: 15, | |
| bottom: 30, | |
| dimension: 1, | |
| calculable: true, | |
| min: -2, | |
| max: DATA_MAX, | |
| precision: 2, | |
| inRange: { | |
| opacity: [1, 1] // Using opacity when label color specified | |
| }, | |
| controller: { | |
| inRange: { | |
| color: '#888' | |
| }, | |
| outOfRange: { | |
| color: '#888' | |
| } | |
| }, | |
| outOfRange: { | |
| opacity: [0.2, 0.2] // Using opacity when label color specified | |
| } | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| itemStyle: itemStyle, | |
| label: labelStyle, | |
| data: data1 | |
| }, | |
| { | |
| name: 'bar2', | |
| type: 'bar', | |
| stack: 'one', | |
| itemStyle: itemStyle, | |
| label: labelStyle, | |
| data: data2 | |
| }, | |
| { | |
| name: 'bar3', | |
| type: 'bar', | |
| itemStyle: itemStyle, | |
| label: labelStyle, | |
| data: data3 | |
| } | |
| ] | |
| }); | |
| window.addEventListener('resize', function () { | |
| chart.resize(); | |
| }); | |
| }); | |
| </script> | |
| <!-- OPACITY SCATTER --> | |
| <script type="text/javascript"> | |
| require([ | |
| 'echarts', | |
| 'echarts/chart/scatter', | |
| 'echarts/component/legend', | |
| 'echarts/component/grid', | |
| 'echarts/component/visualMapPiecewise' | |
| ], function (echarts) { | |
| var main = document.getElementById('main3'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var data1 = []; | |
| var symbolCount = 6; | |
| for (var i = 0; i < 100; i++) { | |
| data1.push([ | |
| Math.random() * 5, | |
| Math.random() * 4, | |
| Math.random() * 20, | |
| Math.round(Math.random() * (symbolCount - 1)) | |
| ]); | |
| } | |
| chart.setOption({ | |
| legend: { | |
| data: ['scatter', 'scatter2', 'scatter3'] | |
| }, | |
| grid: { | |
| top: 50, | |
| bottom: 30 | |
| }, | |
| xAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| visualMap: [ | |
| { | |
| type: 'piecewise', | |
| splitNumber: 6, | |
| left: 'right', | |
| bottom: 30, | |
| selectedMode: 'multiple', | |
| dimension: 'value', | |
| min: 0, | |
| max: 24, | |
| precision: 0, | |
| inRange: { // visual for short cut | |
| opacity: 1, | |
| symbolSize: [15, 50] | |
| }, | |
| outOfRange: { | |
| opacity: 0.3, | |
| symbolSize: [15, 50] | |
| } | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: 'scatter', | |
| type: 'scatter', | |
| itemStyle: { | |
| normal: { | |
| opacity: 0.8, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| }, | |
| label: { | |
| normal: { | |
| show: true, | |
| position: 'inside', | |
| textStyle: { | |
| color: '#fff' | |
| } | |
| } | |
| }, | |
| data: data1 | |
| } | |
| ] | |
| }); | |
| window.addEventListener('resize', function () { | |
| chart.resize(); | |
| }); | |
| }); | |
| </script> | |
| <!-- OPACITY GRAPH --> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'extension/dataTool/gexf', | |
| 'echarts/chart/graph', | |
| 'echarts/component/title', | |
| 'echarts/component/legend', | |
| 'echarts/component/geo', | |
| 'echarts/component/tooltip', | |
| 'echarts/component/visualMap', | |
| 'theme/vintage' | |
| ], function (echarts, gexf) { | |
| var main = document.getElementById('main4'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| $.get('./data/les-miserables.gexf', function (xml) { | |
| var graph = 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.label = { | |
| normal: { | |
| show: node.symbolSize > 30 | |
| } | |
| }; | |
| node.category = node.attributes['modularity_class']; | |
| }); | |
| graph.links.forEach(function (link) { | |
| delete link.lineStyle; | |
| }); | |
| var option = { | |
| tooltip: {}, | |
| legend: [{ | |
| // selectedMode: 'single', | |
| data: categories.map(function (a) { | |
| return a.name; | |
| }) | |
| }], | |
| visualMap: { | |
| min: 0, | |
| max: 100, | |
| dimension: 0, | |
| calculable: true, | |
| inRange: { | |
| opacity: 1, | |
| symbolSize: [10, 100] | |
| }, | |
| outOfRange: { | |
| opacity: 0.2, | |
| symbolSize: [10, 100] | |
| } | |
| }, | |
| animationDurationUpdate: 1500, | |
| animationEasingUpdate: 'quinticInOut', | |
| series : [ | |
| { | |
| name: 'Les Miserables', | |
| type: 'graph', | |
| layout: 'none', | |
| data: graph.nodes, | |
| links: graph.links, | |
| categories: categories, | |
| roam: true, | |
| label: { | |
| normal: { | |
| textStyle: { | |
| color: '#333' | |
| }, | |
| position: 'right', | |
| formatter: '{b}' | |
| } | |
| }, | |
| lineStyle: { | |
| normal: { | |
| curveness: 0.3 | |
| } | |
| } | |
| } | |
| ] | |
| }; | |
| chart.setOption(option); | |
| }); | |
| }); | |
| </script> | |
| <!-- OPACITY HEATMAP --> | |
| <script type="text/javascript"> | |
| require([ | |
| 'echarts', | |
| 'echarts/chart/heatmap', | |
| 'echarts/component/grid', | |
| 'echarts/component/tooltip', | |
| 'echarts/component/visualMapPiecewise' | |
| ], function (echarts) { | |
| var main = document.getElementById('main5'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main, null, { | |
| renderer: 'canvas' | |
| }); | |
| var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', | |
| '7a', '8a', '9a','10a','11a', | |
| '12p', '1p', '2p', '3p', '4p', '5p', | |
| '6p', '7p', '8p', '9p', '10p', '11p']; | |
| var days = ['Saturday', 'Friday', 'Thursday', | |
| 'Wednesday', 'Tuesday', 'Monday', 'Sunday']; | |
| var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]]; | |
| data = data.map(function (item) { | |
| return [item[1], item[0], item[2] || '-']; | |
| }); | |
| option = { | |
| backgroundColor: '#eee4ee', | |
| tooltip: { | |
| position: 'top' | |
| }, | |
| animation: false, | |
| grid: { | |
| height: '50%', | |
| y: '10%' | |
| }, | |
| xAxis: { | |
| type: 'category', | |
| data: hours | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: days | |
| }, | |
| visualMap: { | |
| min: 1, | |
| max: 10, | |
| calculable: true, | |
| range: [3, 6], | |
| orient: 'horizontal', | |
| left: 'center', | |
| bottom: '15%' | |
| }, | |
| series: [{ | |
| name: 'Punch Card', | |
| type: 'heatmap', | |
| data: data, | |
| label: { | |
| normal: { | |
| show: true | |
| } | |
| }, | |
| itemStyle: { | |
| emphasis: { | |
| shadowBlur: 10, | |
| shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| } | |
| } | |
| }] | |
| }; | |
| chart.setOption(option); | |
| }); | |
| </script> | |
| <!-- OPACITY HEATMAP --> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'echarts/chart/pie', | |
| 'echarts/component/legend', | |
| 'echarts/component/grid', | |
| 'echarts/component/tooltip' | |
| ], function (echarts) { | |
| var main = document.getElementById('main6'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| chart.setOption({ | |
| legend: { | |
| data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] | |
| }, | |
| tooltip: {}, | |
| visualMap: { | |
| type: 'continuous', | |
| top: 'middle', | |
| min: 0, | |
| max: 700, | |
| dimension: 1, | |
| calculable: true, | |
| inRange: { | |
| color: ['yellow', 'green'] | |
| } | |
| }, | |
| series: [{ | |
| name: 'pie', | |
| type: 'pie', | |
| selectedMode: 'single', | |
| selectedOffset: 30, | |
| clockwise: true, | |
| label: { | |
| normal: { | |
| textStyle: { | |
| color: '#333' | |
| } | |
| } | |
| }, | |
| labelLine: { | |
| normal: { | |
| lineStyle: { | |
| color: '#333' | |
| } | |
| } | |
| }, | |
| data:[ | |
| {value: [335, 632], name:'直接访问'}, | |
| {value: [310, 434], name:'邮件营销'}, | |
| {value: [234, 233], name:'联盟广告'}, | |
| {value: [135, 544], name:'视频广告'}, | |
| {value: [1548, 381], name:'搜索引擎'} | |
| ] | |
| }] | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |