0byt3m1n1
Path:
C:
/
wamp64
/
www
/
cpms_new
/
gentelella-1.3.0
/
vendors
/
echarts
/
test
/
[
Home
]
File: visualMap-opacity.html
<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 20px 80px 20px; } .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> <!-- ALPHA SCATTER --> <script type="text/javascript"> require([ 'echarts', 'echarts/chart/scatter', 'echarts/component/legend', 'echarts/component/grid', 'echarts/component/visualMapPiecewise' ], function (echarts) { var chart = echarts.init(document.getElementById('main1'), null, { renderer: 'canvas' }); 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.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: 'z', 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 chart = echarts.init(document.getElementById('main2')); 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 chart = echarts.init(document.getElementById('main3'), null, { renderer: 'canvas' }); 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: 'z', min: 0, max: 24, precision: 0, inRange: { // visual for short cut opacity: [1, 1], symbolSize: [15, 50] }, outOfRange: { opacity: [0.3, 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 chart = echarts.init(document.getElementById('main4')); $.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, 1], symbolSize: [10, 100] }, outOfRange: { opacity: [0.2, 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> </body> </html>