qq_43559923通过本文主要向大家介绍了echarts散点图，象限分析系列等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
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系列版本，有一些部分的样式有差异（中位线，以及分均线）
此段代码可直接复制运行与官网的模拟编辑器上，