Echars散点图的详细实现

实现目标散点图详细流程

分析实现目标散点图需要哪些步骤：

1. x轴、y轴由数值向类别的转化
2. 显示x轴和y轴的名字
3. 取消x轴网格线，显示y轴网格线并且显示为虚线
4. 在y=0的位置显示标识线
5. 改变x轴在y轴的位置
6. 改变图形形状、大小、旋转角度
7. 重点：当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'
            }
        }}
    }]
};