ECharts
View on GitHub
Home
Example
API & Doc
Download
ZIP (Latest)
Link
Ecom-FE
Data Visualization
ZRender
option
option = { tooltip : { trigger: 'item' }, legend: { data:['scatter1','scatter2'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, restore : true, saveAsImage : true } }, calculable : true, xAxis : [ { type : 'value' } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'scatter1', type:'scatter', symbol: 'emptyCircle', //'circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond' symbolSize: function(value){ if (value[0] < 2) { return 2; } else if (value[0] < 8) { return Math.round(value[2] * 3); } else { return 20; } }, itemStyle: { normal: { color: 'lightblue', lineStyle: { width: 8 }, label : {show: true} }, emphasis: { color: 'lightgreen', } }, data: (function() { var d = []; var len = 20; while (len--) { d.push([ (Math.random()*10).toFixed(2) - 0, (Math.random()*10).toFixed(2) - 0, (Math.random()*10).toFixed(2) - 0 ]); } return d; })() }, { name:'scatter2', type:'scatter', symbol: 'diamond', symbolSize: function(value){ return Math.round(value[2] * 3); }, itemStyle: { emphasis : { label : {show: true} } }, data: (function() { var d = []; var len = 20; while (len--) { d.push([ (Math.random()*10).toFixed(2) - 0, (Math.random()*10).toFixed(2) - 0, (Math.random()*10).toFixed(2) - 0 ]); } d.push({ value : [5,5,1000], itemStyle: { normal: { color: 'orange', lineStyle: { width: 8 } }, emphasis: { color: '#ff4500', lineStyle: { width: 12 } } }, symbol: 'emptyTriangle', symbolRotate:90, symbolSize:30 }) return d; })() } ] };
Refresh ~