散点图范围域echarts scatter配置项内容和展示
大神帮忙点评下
配置项如下
// var xData = ["2016/10/23\n第1次", "2016/10/23\n第2次", "2016/10/23\n第3次", "2016/10/24\n第1次", "2016/10/24\n第2次", "2016/10/24\n第3次",
// "2016/10/25\n第1次", "2016/10/25\n第2次", "2016/10/25\n第3次", "2016/10/26\n第1次", "2016/10/26\n第2次", "2016/10/26\n第3次",
// "2016/10/27\n第1次", "2016/10/27\n第2次", "2016/10/27\n第3次", "2016/10/28\n第1次", "2016/10/28\n第2次", "2016/10/28\n第3次",
// "2016/10/29\n第1次", "2016/10/29\n第2次", "2016/10/29\n第3次", "2016/10/30\n第1次", "2016/10/30\n第2次", "2016/10/30\n第3次",
// "2016/10/31\n第1次", "2016/10/31\n第2次", "2016/10/31\n第3次", "2016/11/01\n第3次", "2016/11/08\n第1次", "2016/11/08\n第2次", "2016/11/08\n第3次",
// "2016/11/09\n第1次", "2016/11/09\n第2次", "2016/11/09\n第3次", "2016/11/10\n第1次", "2016/11/10\n第2次", "2016/11/10\n第3次",
// "2016/11/11\n第1次", "2016/11/11\n第2次", "2016/11/11\n第3次", "2016/11/14\n第1次", "2016/11/14\n第2次", "2016/11/14\n第3次",
// "2016/11/15\n第1次", "2016/11/15\n第2次", "2016/11/15\n第3次", "2016/11/16\n第1次", "2016/11/16\n第2次", "2016/11/16\n第3次",
// "2016/11/17\n第1次", "2016/11/17\n第2次", "2016/11/17\n第3次"
// ];
var xData = [1.0, 1.5, 2.0];
var yData = ['', '-2.0', '-1.0', '0', '1.0', '2.0', '']
/*
* 标准差为3*/
var gridHight = 400;
var xMiddleLine = -(gridHight / 2);
option = {
grid: {
left: 100,
height: 400,
width: 400,
// bottom:100
},
legend: {
data: ['method', 'peer', 'allLabs']
},
tooltip: {
trigger: 'item'
},
xAxis: [{ //x轴value
name: 'CVI',
type: 'value',
min: 0,
max: 2.5,
// splitNumber:4,//仅在category中有效
// minInterval:1,
// offset: -200, //相对于默认位置的偏移
axisTick: {
show: false
},
axisLabel: {
// show:false
textStyle: {
color: "#99999"
}
},
axisLine: {
lineStyle: {
color: '#cccccc'
}
},
nameTextStyle: {
color: "#99999"
}
}, { //中间红线 value
show: false,
type: 'value',
min: 0,
max: 2.5,
offset: xMiddleLine,
axisTick: {
show: true
},
axisLabel: {
show: false
},
axisLine: {
show: true,
lineStyle: {
// color: '#a9a9a9'
// color: 'red'
}
},
}, { //中间线带箭头
show: false,
type: 'category',
data: ['a','b','c','d'],
axisTick:{
show:true
}
}],
yAxis: [{ //Y0
show: true,
type: 'value',
min: (-3),
max: 3,
position: 'right',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},splitLine:{
lineStyle:{
// color:"#e3e3e3"
}
}
}, { //1
show: true,
name: 'SDI',
type: 'category',
data: yData,
// data: ['最小', '(' + -3 + ')-2SDI', '(' + 0 + ')-1SDI', '(' + 3 + ')+0', '(' + +3 + ')1SDI', '(' + 6 + ')2SDI', '最大'],
// data:[1,2,3,4,5,6,],
boundaryGap: false, //向边缘两边对齐
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#a9a9a9'
}
},
axisLabel: {
textStyle: {
color: "#99999"
}
},
nameTextStyle: {
color: '#99999'
}
}, { //差1
show: false,
type: 'category',
// data: ['', '(' + -3 + ')-2SDI', '(' + 0 + ')-1SDI', '(' + 3 + ')+0', '(' + +3 + ')1SDI', '(' + 6 + ')2SDI', ''],
// data:[1,2,3,4,5,6,],
// boundaryGap: false,
data: ['', '', '', '', '', ''],
offset: 20,
boundaryGap: true,
axisTick: {
interval: 0
}
}, { //差1.5
show: false,
type: 'category',
// data: ['', '(' + -3 + ')-2SDI', '(' + 0 + ')-1SDI', '(' + 3 + ')+0', '(' + +3 + ')1SDI', '(' + 6 + ')2SDI', ''],
// data:[1,2,3,4,5,6,],
// boundaryGap: false,
data: ['', '', '', '', '', '', '', '', '', '', '',''], //六分
boundaryGap: true,
offset: 40,
axisTick: {
interval: 0
}
}, { //差2
show: false,
type: 'category',
data: ['', '', '', '', '', ''],//二分
axisTick: {
interval: 0
},
offset: 60
}, { //中间线带箭头Y
show: false,
type: 'value',
min: -3,
max: 3,
}
],
series: [{
name: 'method',
type: 'scatter',
data: [
[0.2, -0.24],
// [1, 2.3, 40],
// [1.5, 4.5, 30],
],
markArea: {
silent: true,
},
itemStyle: {
normal: {
// color:'#fac747'
color: 'rgb(250,199,71)'
}
},
xAxisIndex: 0,
yAxisIndex: 0
}, {
name: 'peer',
type: 'scatter',
// data: ['1', '4', '-1',],
data: [
// [0.4, 1.5, 15],
[0.7, -0.27],
// [1.5, 4.5, 30],
],
markArea: {
silent: true,
},
itemStyle: {
normal: {
// color:'#93dfb0'
color: 'rgb(147,223,176)'
}
},
xAxisIndex: 0,
yAxisIndex: 0
}, {
name: 'allLabs',
type: 'scatter',
// data: ['1', '4', '-1',],
data: [
// [0.4, 1.5, 15],
// [1, 2.3, 40],
[0.16, 1.8],
],
markArea: {
silent: true,
},
itemStyle: {
normal: {
// color:'#00a0e9'
color: 'rgb(0,160,233)'
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
data: ['', '', '', '', '', '', ''],
},{
type:'line',
xAxisIndex:2,
yAxisIndex:5,
data:['2','-2'],//用于取到0的标线
silent:true,
lineStyle:{
normal:{
opacity:0
}
},itemStyle:{
normal:{
opacity:0
}
},
markLine: {
data: [{
type: 'average',
name: '',
symbol:'none'//起点标记的图形
}],lineStyle:{
normal:{
type:'solid',
}
},label:{
normal:{
show:false
}
}
}
}, {
type: 'bar',
// data: ['', '2', '1.5', '1', '1', '1.5', '2', ''],
// data: ['2', '2', '2', '2', '2', '2'],
data: [{
value: 0,
itemStyle: {
normal: {
color: '#d6f1fc',
}
}
}, {//四分
value: 2,
itemStyle: {
normal: {
color: '#d6f1fc',
// borderColor:'#d6f1fc'
}
}
}, {
value: 2,
itemStyle: {
normal: {
color: '#d6f1fc',
// borderColor:'#d6f1fc'
}
}
}, {
value: 2,
itemStyle: {
normal: {
color: '#d6f1fc',
// borderColor:'#d6f1fc'
}
}
}, {
value: 2,
itemStyle: {
normal: {
color: '#d6f1fc',
// borderColor:'#d6f1fc'
}
}
}, {
value: 0,
itemStyle: {
normal: {
color: '#d6f1fc'
}
}
}],
// data: ['', '', '', '', '', '', '', ]
barGap: 0,
barCategoryGap: 0,
xAxisIndex: 0,
yAxisIndex: 2,
animation: false,
silent: true,
}, { //六分
type: 'bar',
// data: ['', '2', '1.5', '1', '1', '1.5', '2', ''],
// data: ['', '1.5', '1.5', '1.5', '1.5', '', ],
data: [{
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 1.5,
itemStyle: {
normal: {
color: '#92ddfc',
// borderColor:'#92ddfc'
}
}
}, {
value: 1.5,
itemStyle: {
normal: {
color: '#92ddfc',
// borderColor:'#92ddfc'
}
}
}, {
value: 1.5,
itemStyle: {
normal: {
color: '#92ddfc',
// borderColor:'#92ddfc'
}
}
}, {
value: 1.5,
itemStyle: {
normal: {
color: '#92ddfc',
// borderColor:'#92ddfc'
}
}
}, {
value: 1.5,
itemStyle: {
normal: {
color: '#92ddfc',
// borderColor:'#92ddfc'
}
}
}, {
value:1.5,
itemStyle: {
normal: {
color: '#92ddfc',
// borderColor:'#92ddfc'
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}],
// data: ['', '', '', '', '', '', '', ]
barGap: 0,
barCategoryGap: 0,
xAxisIndex: 0,
yAxisIndex: 3,
animation: false,
silent: true,
}, {
type: 'bar',
// data: ['', '2', '1.5', '1', '1', '1.5', '2', ''],
// data: ['', '', '1', '1', '', '', ],
data: [{
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 1,
itemStyle: {
normal: {
color: '#37c7cf'
// ,borderColor:'#37c7cf'
}
}
}, {
value: 1,
itemStyle: {
normal: {
color: '#37c7cf',
// borderColor:'#37c7cf'
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}, {
value: 0,
itemStyle: {
normal: {
}
}
}],
// data: ['', '', '', '', '', '', '', ]
barGap: 0,
barCategoryGap: 0,
xAxisIndex: 0,
yAxisIndex: 4,
animation: false,
silent: true,
}
]
}
截图如下
