0byt3m1n1
Path:
C:
/
wamp64
/
www
/
cpms_new
/
gentelella-1.3.0
/
vendors
/
echarts
/
test
/
[
Home
]
File: visualMap-scatter-continuous.html
<html> <head> <meta charset="utf-8"> <script src="esl.js"></script> <script src="config.js"></script> </head> <body> <style> html, body, #main { width: 100%; height: 100%; } </style> <div id="main"></div> <script> require([ 'echarts', 'echarts/chart/scatter', 'echarts/component/legend', 'echarts/component/grid', 'echarts/component/visualMapContinuous' ], function (echarts) { var chart = echarts.init(document.getElementById('main'), 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({ legend: { top: 50, data: ['scatter', 'scatter2', 'scatter3'] }, grid: { top: '26%', bottom: '26%' }, xAxis: { type: 'value', splitLine: { show: false } }, yAxis: { type: 'value', splitLine: { show: false } }, visualMap: [ { show: true, top: 100, // itemHeight: 100, backgroundColor: '#ddd', // calculable: true, inRange: { color: ['red', 'pink', 'black'] } } ], series: [ { name: 'scatter', type: 'scatter', itemStyle: { normal: { opacity: 0.8, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, symbolSize: function (val) { return val[2] * 2; }, data: data1 } ] }); chart.setOption({ visualMap: { inRange: { color: ["green", "red"] } } }); }) </script> </body> </html>