Achieve this type of chart? Eisenhower Matrix

Question

I would like to create a chart similar to the image provided using Echarts. Eisenhower Matrix The chart appears to be a variation of an Eisenhower Matrix. Can someone provide some guidance on how to achieve this? Thank you!

Answer 1

The hint with the rects from the posted thread helped a lot.

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'svg',
  useDirtyRect: false
});
var app = {};

var option;

// Start
const data = [
  [3.275154, 2.957587],
  [-3.344465, 2.603513],
  [0.355083, -3.376585]
];
// End
const data2 = [
  [3.15154, 3.957587],
  [-3.24465, 2.103513],
  [0.385083, -3.676585]
];

const chartWidth = 800;
const chartHeight = chartWidth;
const gridLineWidth = 1;
option = {
  dataset: [
    {
      source: [data, data2]
    },
    // {
    //   transform: {
    //     type: 'ecStat:clustering',
    //     // print: true,
    //     config: {
    //       clusterCount: CLUSTER_COUNT,
    //       outputType: 'single',
    //       outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
    //     }
    //   }
    // }
  ],
  tooltip: {
    position: 'top'
  },
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    show: true
  },
  xAxis: {
    axisLabel: {
      show: true,
      inverval: 4,
      inside: true,
      formatter: function (value) {
        return value < 0 ? 'Low' : 'High Priority';
      }
    },
    gridIndex: 0,
    top: chartWidth,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    minorTick: {
      show: false
    },
    minorSplitLine: {
      show: true,
      splitNumber: 10,
      lineStyle: {
        color: '#ffffff',
        width: gridLineWidth
      }
    },
    splitLine: {
      show: true,
      interval: 10,
      lineStyle: {
        color: '#ffffff',
        width: gridLineWidth
      }
    },
    splitArea: {
      show: false
    }
  },
  yAxis: {
    axisLabel: {
      show: true,
      interval: 80,
      inside: true,
      rotate: 90,
      formatter: function (value) {
        return value < 0 ? 'Low' : 'High Priority';
      }
    },
    gridIndex: 0,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    minorTick: {
      show: false
    },
    minorSplitLine: {
      show: true,
      splitNumber: 10,
      lineStyle: {
        color: '#ffffff',
        width: gridLineWidth
      }
    },
    splitLine: {
      show: true,
      interval: 10,
      lineStyle: {
        color: '#ffffff',
        width: gridLineWidth
      }
    },
    splitArea: {
      show: false
    },
  },
  series: [
    {
      type: 'scatter',
      clip: false,
      encode: { tooltip: [0, 1] },
      symbol: 'circle',
      symbolSize: 15,
      itemStyle: {
        borderColor: '#667085',
        color: '#ffffff',
        borderWidth: 2,
        opacity: 1.0
      },
      data: data,
      datasetIndex: 0
    },
    {
      type: 'scatter',
      clip: false,
      encode: { tooltip: [0, 1] },
      symbol: 'circle',
      symbolSize: 15,
      itemStyle: {
        borderColor: '#667085',
        color: '#667085',
        borderWidth: 8,
        opacity: 1.0
      },
      data: data2,
      datasetIndex: 0
    }
  ],
  // toolbox: {
  //   right: 0,
  //   top: 'center',
  //   feature: {
  //     dataZoom: {},
  //     timeline: {}
  //   }
  // },
  // dataZoom: [
  //   {
  //     type: 'inside'
  //   },
  //   {
  //     type: 'slider'
  //   }
  // ],
  timeline: {
    show: true,
    axisType: 'time',
    padding: 20,
    // top: 0,
    // bottom: 0,
    orient: 'horizontal',
    controlPosition: 'right',
    // right: 0,
    label: {
      format: 'yyyy',
      fontSize: 12,
      // position: 'right',
      // align: 'right'
    },
    // each item in `timeline.data` corresponds to each
    // `option` in `options` array.
    data: ['2020-01-01', '2021-01-01', '2022-01-01']
  },
  graphic: [
    {
      type: 'rect',
      left: 0,
      top: 0,
      style: {
        fill: '#CCFFCC',
      },
      shape: {
        x: 0,
        y: 0,
        width: chartWidth / 2,
        height: chartHeight / 2,
      }
    },
    {
      type: 'rect',
      left: chartWidth / 2,
      top: 0,
      style: {
        fill: '#CCCCFF',
      },
      shape: {
        x: 0,
        y: 0,
        width: chartWidth / 2,
        height: chartHeight / 2,
      }
    },
    {
      type: 'rect',
      left: 0,
      top: chartHeight / 2,
      style: {
        fill: '#FFEECC',
      },
      shape: {
        x: 0,
        y: 0,
        width: chartWidth / 2,
        height: chartHeight / 2,
      }
    },
    {
      type: 'rect',
      left: chartWidth / 2,
      top: chartHeight / 2,
      style: {
        fill: '#FFCCCC',
      },
      shape: {
        x: 0,
        y: 0,
        width: chartWidth / 2,
        height: chartHeight / 2,
      }
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

* {
  margin: 0;
  padding: 0;
}
#chart-container {
  --matrix-chart-size: 800px; // aspect square
  width: var(--matrix-chart-size);
  min-height: var(--matrix-chart-size);

  & > div {
    border-radius: $radius-xl !important;
    max-width: var(--matrix-chart-size);
    overflow: hidden;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clustering Process - Apache ECharts Demo</title>
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
</body>
</html>

Here is a CodePen of my workaround https://codepen.io/klsdfr/pen/jOQrPEz