echarts四象限图实现自定义均值
var sourceData = [{//均值线参数
name: '王小虎',
sales: 142.56,
services: 64.5
}]
var seriesData = sourceData.map(function(item, index, array) {
return {
name: item['name'],//实际点的参数
value: [100, 50]
}
})
var computeServicesAvgLine = function() {
let sum = 0
sourceData.forEach(function(item) {
sum += item['services']
})
return sum / sourceData.length
}
var computeSalesAvgLine = function() {
let sum = 0
sourceData.forEach(function(item) {
sum += item['sales']
})
return sum / sourceData.length
}
var avg = {
servicesAvgLine: computeServicesAvgLine(),
salesAvgLine: computeSalesAvgLine()
}
option = {
title: {
text: '服务四象限图'
},
tooltip: {
trigger: 'item',
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
},
},
formatter: function(obj) {
if (obj.componentType == "series") {
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3);
font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
obj.name +
'</div>' +
'<span>' +
'销售额' +
'</span>' +
' : ' + obj.data.value[0] + '(元)' +
'<br/>' +
'<span>' +
'服务能力' +
'</span>' +
' : ' + obj.data.value[1] + '%'
}
}
},
label: {
normal: {
show: true,
position: 'bottom',
formatter: function(params) {
return params.name
}
},
emphasis: {
show: true,
position: 'bottom',
}
},
xAxis: {
name: '营业额',
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} 元'
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#3259B8'
}
}
},
yAxis: {
name: '服务能力',
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} %'
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#3259B8'
}
}
},
series: [{
type: 'scatter',
data: seriesData,
symbolSize: 20,
markLine: {
label: {
normal: {
formatter: function(params) {
if (params.dataIndex == 0) {
return params.value + "元";
} else if (params.dataIndex == 1) {
return params.value + "%";
}
return params.value;
}
}
},
lineStyle: {
normal: {
color: "#626c91",
type: 'solid',
width: 1,
},
emphasis: {
color: "#d9def7"
}
},
data: [{
xAxis: avg.salesAvgLine,
name: '营业额平均线',
itemStyle: {
normal: {
color: "#b84a58",
}
}
}, {
yAxis: avg.servicesAvgLine,
name: '服务能力平均线',
itemStyle: {
normal: {
color: "#b84a58",
}
}
}]
},
markArea: {
silent: true,
data: [
[{
name: '改进',
itemStyle: {
normal: {
color: 'transparent'
},
},
label: {
normal: {
show: true,
position: 'insideTopLeft',
fontStyle: 'normal',
color: "#409EFF",
fontSize: 20,
}
},
coord: [avg.salesAvgLine, avg.servicesAvgLine],
}, {
coord: [Number.MAX_VALUE, 0],
}],
[{
name: '淘汰',
itemStyle: {
normal: {
color: 'transparent',
},
},
label: {
normal: {
show: true,
position: 'insideTopRight',
fontStyle: 'normal',
color: "#409EFF",
fontSize: 20,
}
},
coord: [0, 0],
}, {
coord: [avg.salesAvgLine, avg.servicesAvgLine],
}],
[{
name: '保持',
itemStyle: {
normal: {
color: 'transparent',
},
},
label: {
normal: {
show: true,
position: 'insideBottomLeft',
fontStyle: 'normal',
color: "#409EFF",
fontSize: 20,
}
},
coord: [avg.salesAvgLine, avg.servicesAvgLine],
}, {
coord: [Number.MAX_VALUE, Number.MAX_VALUE],
}],
[{
name: '激励',
itemStyle: {
normal: {
color: 'transparent',
},
},
label: {
normal: {
show: true,
position: 'insideBottomRight',
fontStyle: 'normal',
color: "#409EFF",
fontSize: 20,
}
},
coord: [0, Number.MAX_VALUE],
}, {
coord: [avg.salesAvgLine, avg.servicesAvgLine],
}],
]
}
}]
};