实现目标散点图详细流程
分析实现目标散点图需要哪些步骤:
- x轴、y轴由数值向类别的转化
- 显示x轴和y轴的名字
- 取消x轴网格线,显示y轴网格线并且显示为虚线
- 在y=0的位置显示标识线
- 改变x轴在y轴的位置
- 改变图形形状、大小、旋转角度
- 重点:当y点为负的时候改变图形的颜色
1. x轴、y轴由数值向类别的转化
x轴刻度将数字转化成类别使用到的属性是xAxis.axisLabel. formatter,
官方文档对它的解释:刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
即当value等于某个数字时候,向texts数组push进相应的文本即可实现数字转化成类别。
xAxis: {
axisLabel:{
formatter: function (value) {
var texts = [];
if(value==0){
texts.push('电话接通');
}else if (value <= 3) {
texts.push('提出问题');
}else if (value <= 6) {
texts.push('问题沟通');
}else if (value <= 6) {
texts.push('问题解答');
}else if (value <= 9) {
texts.push('最终反馈');
}
return texts;
}
}
},
2.显示x轴和y轴的名称
在xAxis和yAxis里加入属性name,即xAxis{name:"沟通阶段"},yAxis{name:"情感偏向"}
改变x轴、y轴名称样式: nameTextStyle: {
color: "rgba(70, 158, 239, 1)",
fontSize: 14,
align: "left",
},
3. 取消x轴网格线,显示y轴网格线并且显示为虚线
取消x轴网格线:在 xAxis 里加入 splitLine:{ show:false }
显示y轴网格线并且显示为虚线:在 xAxis 里加入 splitLine:{ show:true, lineStyle: { type: 'dashed' } }
补充:
xAxis.splitLine.lineStyle.color:[’#aaa’, ‘#ddd’] // 使用深浅的间隔色
xAxis.splitLine.lineStyle.width:1 //分隔线线宽
xAxis.splitLine.lineStyle.type: ‘solid’ //分隔线线的类型(可选:‘solid’、‘dased’、‘dotted’)
4. 在y=0的位置显示标识线
标识线:markLine (在option里面添加)
markLine: {
symbol: ['none'],//去掉箭头(原标识线是带有箭头的)
itemStyle: {
normal: {
lineStyle: {
type: 'solid',
color:'#74dc77',
width: 4
},
label: {
show: false, //去掉数字(原标识线是带有所在y轴数值的)
}
}
},
data: [{
yAxis : 0,//标示线在y轴的位置
}]
}
5. 改变x轴在y轴的位置
一般情况下,x轴是在y轴的0点位置开始。
改变x轴在y轴的位置:axisLine: { onZero: false } (在xAxis里添加)
x轴就不会在y轴0点的位置开始,会在y轴最小值显示
6. 改变图形形状、大小、旋转角度
改变图形形状:symbol (在series里面添加,即series:[{ symbol:"rect" }])
改变图形大小:symbolSize (在series里面添加,即series:[{ symbolSize:10 }])
改变旋转角度:symbolRotate (在option😳里面添加,即symbolRotate:45)
7. 当y点为负的时候改变图形的颜色
itemStyle : {
color : function (param) { // 颜色
var height = param.data[0]/100
var weight = param.data[1]
var param = weight / Math.pow(height,2)
if(param > 0){
return '#5daaf1' //y>0图形显示蓝色
}else{
return '#ef543d' //y<0图形显示红色
}
}
}
❤️❤️❤️实现上面的步骤,就得到心目中的散点图啦❤️❤️❤️
贴上完整代码💁🏻
option = {
symbolRotate:45, //图形旋转角度
xAxis: {
name: "沟通阶段",
splitLine:{
show:false,
} ,//去除网格线
axisLine: {
onZero: false
},
nameTextStyle: {
color: "rgba(70, 158, 239, 1)",
fontSize: 14,
align: "left",
},
axisLabel:{
formatter: function (value) {
var texts = [];
if(value==0){
texts.push('电话接通');
}else if (value <= 3) {
texts.push('提出问题');
}else if (value <= 6) {
texts.push('问题沟通');
}else if (value <= 6) {
texts.push('问题解答');
}else if (value <= 9) {
texts.push('最终反馈');
}
return texts;
}
},
},
yAxis: {
name: "情感偏向",
min:-10,
max:10,
interval:10,
axisLabel:{
formatter: function (value) {
var texts = [];
if(value==10){
texts.push('满意');
}
else if (value==-10) {
texts.push('不满意');
}else if(value==0){
texts.push('0');
}
return texts;
}
},
splitLine:{
show:true,
lineStyle: {
type: 'dashed'
}
} ,//去除网格线
nameTextStyle: {
color: "rgba(70, 158, 239, 1)",
fontSize: 14,
align: "right",
},
},
series: [{
symbol:"rect", //图形类型
symbolSize: 15, //图形大小
data: [
[0.4, -8.04],
[1.5, -6.95],
[1.9, -7.58],
[2, -5.81],
[3.3, -3.33],
[4.1, -2.66],
[3, 3.81],
[5, 5.33],
[6.2, 2.96],
[6, 4],
[5.5, 3],
[8,9.20]
],
type: 'scatter',
markLine: { //标识线
symbol: ['none', 'none'],//去掉箭头
itemStyle: {
normal: {
lineStyle: {
type: 'solid',
color:'#74dc77',
width: 4
},
label: {
show: false,
}
}
},
data: [{
yAxis : 0,//在y轴的位置
},]
},
itemStyle : {
color : function (param) { // 颜色
var height = param.data[0]/100
var weight = param.data[1]
var param = weight / Math.pow(height,2)
if(param > 0){
return '#5daaf1'
}else{
return '#ef543d'
}
}}
}]
};