echarts散點圖，象限分析系列
var option = { title: [{ text: '性格群體分析', subtext: '分析物件：XX區域', left: 'center', textStyle: { fontSize: 16 } }, { text: 'Ⅰ', z:1, textAlign: 'center', left: '75%', top: '25%', textStyle: { fontSize: 36, fontWeight:'normal', color:'#999' } }, { text: 'Ⅱ', z:1, textAlign: 'center', left: '75%', top: '65%', textStyle: { fontSize: 36, fontWeight:'normal', color:'#999' } }, { text: 'Ⅲ', z:1, textAlign: 'center', left: '25%', top: '65%', textStyle: { fontSize: 36, fontWeight:'normal', color:'#999' } }, { text: 'Ⅳ', z:1, textAlign: 'center', left: '25%', top: '25%', textStyle: { fontSize: 36, fontWeight:'normal', color:'#999' } }, { text: '型別Ⅰ:性格外向開朗，願意社交', textAlign: 'center', left: '94%', top: '20%', textStyle: { fontSize: 14 } }, { text: '型別Ⅱ:性格內向，不喜歡社交', textAlign: 'center', left: '94%', top: '23%', textStyle: { fontSize: 14 } }, { text: '型別Ⅲ:怪異，不喜歡社交', textAlign: 'center', left: '94.4%', top: '26%', textStyle: { fontSize: 14 } }, { text: '型別Ⅳ:想法另類，喜歡社交', textAlign: 'center', left: '94.4%', top: '29%', textStyle: { fontSize: 14 } } ], grid: { top:'10%', left: '3%', right: '7%', bottom: '1%', containLabel: true }, tooltip: { showDelay: 0, formatter: function(params) { if (params.value.length > 1) { return params.seriesName + ' :<br/>' + params.value[0] + 'cm ' + params.value[1] + 'kg '; } }, axisPointer: { show: true, type: 'cross', lineStyle: { type: 'dashed', width: 1 } } }, toolbox: { feature: { dataZoom: {}, brush: { type: [''] } } }, legend: [ { orient: 'horizontal', x: '89%', y: '7%', align: 'left', data: ['正常性格'], textStyle: { fontSize: 14 } }, { orient: 'horizontal', x: '94%', y: '7%', align: 'left', data: ['離群性格'], textStyle: { fontSize: 14 } }, { orient: 'horizontal', x: '89%', y: '10%', align: 'left', data: ['性格中位數'], textStyle: { fontSize: 14 } }, { orient: 'horizontal', x: '94%', y: '10%', align: 'left', data: ['均分人數'], textStyle: { fontSize: 14 } } ], xAxis: [{ type: 'value', name: "專注指數", scale: true, splitLine: { show: false } }], yAxis: [{ type: 'value', scale: true, name: "人數", splitLine: { show: false } }], series : [ { name:'離群性格', z:3, type: 'effectScatter', symbolSize: 30, label: { normal: { show: true, formatter: function (param) { return param.data[2]; }, position: 'insideTop'//版本3系列
//********** 最新官網4系列版本 散點的突出點的文字樣式部分 *************//
position: [35,5], backgroundColor:'#19318F', color:'#fff', borderColor:'#19318F', borderWidth:1, borderRadius:2, padding:[6,15]
//********** 最新官網4系列版本 *************// } }, itemStyle: { normal: { color: "#EF535C" } }, data: [ [190, 95,'墨菲斯'], [190, 59.0,'檸檬'], [157.0, 63.0,'益達'],[162,90,'龍貓'] ] }, { name:'正常性格', z:3, type:'scatter', symbolSize: 25, itemStyle: { normal: { color: '#6FE12F' } }, data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8], [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6] ] }, { name:'均分人數', type:'scatter', data: [[150, 78]], itemStyle:{ normal: { color:'#8B4DF6' } }, markLine : { data : [{type : 'average', name : '均分人數'}], labei:{ show:false } } }, { name:'性格中位數', type:'scatter', data: [[175, 50]], itemStyle: { normal: { color: '#05D6DE' } }, markLine : { data : [ {type : 'average', name : '性格中位數', valueIndex: 0 } ] } } ] };
此圖的版本基於3系列使用的，當前官網最新的4系列版本，有一些部分的樣式有差異