echart - 改变坐标原点/四象限配置

 楼主我就是接了这么一个需求，原点坐标不以（0,0）为零点，散点与原点值比较分布在四个象限内，如图：

为了能看出对比，我把原点的值展示一下

好的，需求描述完，接下来我们进入正题：

1、首先，我翻了文档，大概也有我不熟的原因，需求比较赶，所以我并不知道echart到底有没有改变零点值的配置，反正我是暂时还没找到（后续找到我会再次做补充），但是我找到了 markLine（图表标线）这个属性，所以大家现在看到以上两张图横竖两条线，正式我用markLine配置出来的

data(){
    return {
        option: {
            series: [
              {
                type: 'scatter',  // 我采用的是散点图，这个是可选值
                symbolSize: 16,
                data: [],
                markLine: {
                  silent: true, // 不予点击交互（开启的话，你自己可以试一下有什么效果啦）
                  lineStyle: { 
                    color: 'rgb(0,0,0,1)',
                    type: 'solid' // 标尺的线型号，我这里用的是实线，有可选值
                  },
                  data: [
                    {   
                      symbol: 'none',
                      label: {
                          position: 'end', // 表现内容展示的位置
                          formatter: '订阅',  // 标线展示的内容
                      },
                      xAxis: 125028.000, // 标线原点x值
                    },
                    { 
                      symbol: 'none', // 标线起点图形，有可选值（具体参考文档配置）
                      label: {
                        position: 'end', // 标线标题处于标线位置
                        formatter: '观看',  // 标线自定义标题
                      }, 
                      yAxis: 1320.000, // 标线原点y值
                    }
                  ]
                },
              },
            ],
        }
    }
}

 2、标线配置出来，由于我要做分割线的展示（也就是图片上的形成的小方块），所以我这边必须得配置坐标轴为展示状态，所以接下来我还要做隐藏坐标轴的配置，直接上图了，有对属性配置不懂得，建议对应挨个查文档，这里以‘xAxis’（x轴）的配置为例（‘yAxis’（y轴）的隐藏配置同上）

3、接下来就是四象限标题的配置了

// 在option中配置title属性
 title: [
          {
            text: '明星频道区',
            backgroundColor:'#E0E6F1',  // 添加标题背景色
            borderRadius: 4,  // 圆角
            height:21, 
            lineHeight:21,
            z: 1,
            textAlign: 'right',
            left: '75%',  // 在图形中的位移位置
            textStyle: {
              fontSize: 11,
              fontWeight: 'normal',
              color: '#333333',
            },
          },
          {
            text: '增长疲软区',
            backgroundColor:'#E0E6F1',
            borderRadius: 4,
            height:21,
            lineHeight:21,
            z: 1,
            textAlign: 'right',
            left: '30%',
            textStyle: {
              fontSize: 11,
              fontWeight: 'normal',
              color: '#333333',
            },
          },
          {
            text: '增长探索区',
            backgroundColor:'#E0E6F1',
            borderRadius: 4,
            height:21,
            lineHeight:21,
            z: 1,
            textAlign: 'right',
            left: '30%', // 在图形中的位移位置
            bottom: '0', // 在图形中的位移位置
            textStyle: {
              fontSize: 11,
              fontWeight: 'normal',
              color: '#333333',
            },
          },
          {
            text: '定位摸索区',
            backgroundColor:'#E0E6F1',
            borderRadius: 4,
            height:21,
            lineHeight:21,
            z: 1,
            textAlign: 'right',
            left: '75%',
            bottom: '0',
            textStyle: {
              fontSize: 11,
              fontWeight: 'normal',
              color: '#333333',
            },
          },
        ],