巧用echarts的markArea制作背景图

scatter-simple.png

option = {
  xAxis: {
    min: 0,
    max: 10,
    splitNumber: 10
  },
  yAxis: {
    min: 0,
    max: 10,
    splitNumber: 10
  },
  series: [
    {
      data: [
        [5.0, 8.04, 6],
        [8.07, 6.95, 9],
        [3.0, 7.58, 2],
        [9.05, 8.81 ,3],
        [1.0, 8.33, 2],
        [4.0, 7.66, 1],
        [3.4, 6.81, 4],
        [8.0, 6.33, 7],
        [4.0, 8.96, 8],
        [2.5, 6.82, 2],
        [3.15, 7.2, 1],
        [6.5, 7.2, 5],
        [3.03, 4.23, 2],
        [2.2, 7.83, 1],
        [2.02, 4.47, 1],
        [1.05, 3.33, 8],
        [4.05, 4.96, 9],
        [6.03, 7.24, 3],
        [2.0, 6.26, 6],
        [1.0, 8.84, 8],
        [7.08, 5.82, 9],
        [5.02, 5.6, 8]
      ],
      type: 'scatter',
      symbolSize: (val) => {
        if (val && val[2]) {
          return val[2] / 100 * 500
        } else {
          return 1
        }
      },
      markLine: {
        silent: true,
        symbol: ['none', 'none'],
        data: [{
          name: 'hLine',
          yAxis: 5,
          lineStyle: {
            color: '#000',
            type: 'dashed',
            dashOffset: 20
          }
        },
        {
          name: 'vLine',
          xAxis: 5,
          lineStyle: {
            color: '#000',
            type: 'dashed',
            dashOffset: 20
          }
        }],
        label: {
          show: false
        }
      },
      markArea: {
        data: [
          [
            {
              name: 'Midway',
              itemStyle: {
                color: '#ff0',
                opacity: 0.05
              },
              label: {
                color: '#ea0',
                position: 'insideTopLeft'
              },
              xAxis: 0,
              yAxis: 10
            },
            {
              xAxis: 5,
              yAxis: 5
            }
          ],
          [
            {
              name: 'Good',
              itemStyle: {
                color: '#0f0',
                opacity: 0.05
              },
              label: {
                position: 'insideTopRight'
              },
              xAxis: 5,
              yAxis: 10
            },
            {
              xAxis: 10,
              yAxis: 5
            }
          ],
          [
            {
              name: 'Bad',
              itemStyle: {
                color: '#f00',
                opacity: 0.05
              },
              label: {
                color: '#f00',
                position: 'insideBottomLeft'
              },
              xAxis: 0,
              yAxis: 5
            },
            {
              xAxis: 5,
              yAxis: 0
            }
          ],
          [
            {
              name: 'Midway',
              itemStyle: {
                color: '#ff0',
                opacity: 0.05
              },
              label: {
                color: '#ea0',
                position: 'insideBottomRight'
              },
              xAxis: 5,
              yAxis: 5
            },
            {
              xAxis: 10,
              yAxis: 0
            }
          ],

        ]
      }
    }
  ]
};

https://echarts.apache.org/examples/zh/editor.html?c=scatter-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurALYTREAMANCemQIYZECMdDseIANhGAByAVzIAjAKYAndtRIBfeugCeOfEVSlylGktLNWsDnvQ9-Q0ZJlG56RSTzSIEwrADaXTVtgATJmCYiD29SNwBWADo6WAAOKIAWWlgANgBdE283OOoAdiTkiIBOMKTC9K4tNwBmKKSciLCYpIAmcpD0N0KoktiImLZYWiq29rc2Wt6qqpaRkLd4ifrk5KS2WcyaxJS-tiT49crs_IipuoPQhei4wpXY847mhuOY5pmMypq2HvrXo3v3ArfCK_ML_apRaawBbNSGtd6hR6_eoxSFreEPKK_BbxPJ_dHucbUHo1U53fHzbp7Iq3MrkgrUSE_LbDcmPaIFZq3NLkwlJOIxLYxMH1ahNWCRF6lMGRaggiK3IUVWDnMDKEASIgAcjwAGN_GBpJr4XhlOJgLwAMoQABeGtgAAoAG5MXgASgQAD5iO1YBAAGYO528WAAMhDsCDbla7q8PqkEjAwikcEjrVgAHobNRYAAqcXUWzteSwCS8Rzen2weOJ5NGJV2JX2ELMKQAawAMpQ7bHvHgILwJNAwEQwFJhBJ8SazbwgproDAJEbYHOF5r_n4AkEeyFoEwyHbNQALTvQRf4lRqVwleukfini2qgcaG9aHXm4DWTUAYgL1CNL9IVV1S1Pw8EPCQfH_StSFAw8AHk_T9Rxh1gZpCx9eQbybdpt28Xd9y1R0TzPADsFwK9z1gO8JAfZQnwraC314D8tR_AsoOg2AgIPWCII46DYIQpCEyINCAMwjD_l4JhJBnBj2jA4AAHciD9F1HCwxt4RbVssHjQJ5K0DcDOCStTOg3CfXwg8AFkIB8JSmGUfjOIECQyFo-jLMrJiWOXL9EL_SiQlAJgdQEZQaG6ACtGwziqJk0tn3i1930_L8JCYIKYu8EBgD7SAYC1Sg-x8CQABVQHbCQ_TATUcrsYLSDI9RYE4FLYFUcjZByuLK28kIWoohrOsvIgwl6gD_g6HKBrwvcDwAcWAYBIKa9A3I8x9uxG9BfPS6g_Wyjr0FC8LVSiokRr66DpNk5KTrygqoCoZcSvsirQAAJQgABzQ86uu9bMDG8Vga61qOF6pq5q0IbZHB0GJviiTK2m9xZpG6ytQAISYNaRs2zydpO2B9tYo7jpOs6Isu5GUpuys7qSwzOPJ_zKZc-KnoEF7iugUqJBx4AwDAYAyGq2r6o6xmfXhtrEe68Vocxjr5evDqIdcdDK1Rn10fM_qsYWrU7IcpyucrIntoejr2e_QLLegmmLra6KZeB5m5Nh7x7YyrKncrHnCtezV3rK4XRfFn7_sBj2RvVxXWvp6DZe8H30Hl4wRq1mhJug8ob1SRsuFR4v5AAbiAA