Echart 四象限图

公司今日要求四象限图,经过研究修改,样式如下:在这里插入图片描述

const option = {
        title: [
          {
            text: '性格群体分析',
            subtext: '分析对象:XX区域',
            left: 'center',
            textStyle: {
              fontSize: 16,
            },
          },
          {
            text: '情绪通话量高,离散系数高',
            z: 1,
            textAlign: 'right',
            left: '95%',
            top: '5%',
            textStyle: {
              fontSize: 12,
              fontWeight: 'normal',
              color: '#000',
            },
          },
          {
            text: '情绪通话量高,离散系数低',
            z: 1,
            textAlign: 'center',
            left: '90%',
            top: '85%',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#999',
            },
          }, {
            text: '情绪通话量低,离散系数低',
            z: 1,
            textAlign: 'center',
            left: '25%',
            top: '85%',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#999',
            },
          }, {
            text: '情绪通话量低,离散系数高',
            z: 1,
            textAlign: 'center',
            left: '25%',
            top: '7%',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#999',
            },
          },
        ],
        grid: {
          top: '10%',
          left: '3%',
          right: '7%',
          bottom: '1%',
          containLabel: true,
        },
        tooltip: {
          showDelay: 0,
          formatter: (params) => {
            if (params.value.length > 1) {
              return `${params.seriesName}:<br/>${params.value[0]}cm${params.value[1]}kg`;
            }
            return false;
          },

        },
        legend: [
          {
            orient: 'horizontal',
            x: '89%',
            y: '7%',
            align: 'left',
            data: ['二'],
            textStyle: {
              fontSize: 14,
            },
          },
          {
            orient: 'horizontal',
            x: '94%',
            y: '7%',
            align: 'left',
            data: ['一'],
            textStyle: {
              fontSize: 14,
            },
          },
          {
            orient: 'horizontal',
            x: '89%',
            y: '10%',
            align: 'left',
            data: ['四'],
            textStyle: {
              fontSize: 14,
            },
          },
          {
            orient: 'horizontal',
            x: '94%',
            y: '10%',
            align: 'left',
            data: ['三'],
            textStyle: {
              fontSize: 14,
            },
          },
        ],
        xAxis: [{
          type: 'value',
          name: '专注指数',
          scale: true,
          splitLine: {
            show: false,
          },
          data: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
        }],
        yAxis: [{
          type: 'value',
          scale: true,
          name: '人数',
          splitLine: {
            show: false,
          },
          max: '1',
        }],
        series: [
          {
            name: '一',
            z: 3,
            type: 'scatter',
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#EF535C',
              },
            },
            data: [
              [0.4, 0.65], [0.1, 0.59], [0.3, 0.63], [0.26, 0.790],
            ],
          },
          {
            name: '二',
            z: 3,
            type: 'scatter',
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#6FE12F',
              },
            },
            data: [[0.6, 0.8], [0.7, 0.66], [0.8, 0.54], [0.89, 0.9],
            ],
          },

          {
            name: '三',
            type: 'scatter',
            data: [[0.3, 0.2], [0.4, 0.28]],
            itemStyle: {
              normal: {
                color: '#8B4DF6',
              },
            },
          },
          {
            name: '四',
            type: 'scatter',
            data: [[0.6, 0.3]],
            itemStyle: {
              normal: {
                color: '#05D6DE',
              },
            },

          },
          {
            name: 'wu',
            type: 'scatter',
            data: [[0.5, 0]],
            itemStyle: {
              normal: {
                color: '#999',
              },
            },
            markLine: {
              data: [
                {
                  type: 'average',
                  name: 'wu',
                  valueIndex: 0,
                },
              ],
            },

          },
          {
            name: 'six',
            type: 'scatter',
            data: [[0, 0.5]],
            itemStyle: {
              normal: {
                color: '#999',
              },
            },
            markLine: {
              data: [
                {
                  type: 'average',
                  name: 'six',
                },
              ],
              label: {
                show: false,
              },
            },
          },
        ],
      };
发布了25 篇原创文章 · 获赞 7 · 访问量 9224

猜你喜欢

转载自blog.csdn.net/Beth__hui/article/details/90720772
今日推荐