如何使用Echarts实现类似艾森豪威尔矩阵的图表？

核心思路 #

艾森豪威尔矩阵本质是二维象限图，用Echarts的散点图结合自定义坐标轴、背景区域标注就能实现。核心是把x轴定义为「紧急程度」，y轴定义为「重要程度」，通过坐标轴分割出四个象限，再在对应象限放置任务节点。

具体实现步骤 #

1. 基础配置与坐标轴设置 #

先初始化Echarts实例，配置x/y轴为0-10的连续区间，用中间值5分割象限，同时添加带颜色的象限背景和标签：

var myChart = echarts.init(document.getElementById('main'));

option = {
    // 鼠标hover提示
    tooltip: {
        trigger: 'item',
        formatter: params => `任务: ${params.value[2]}<br/>紧急程度: ${params.value[0]}/10<br/>重要程度: ${params.value[1]}/10`
    },
    xAxis: {
        type: 'value',
        min: 0,
        max: 10,
        splitLine: {
            show: true,
            lineStyle: {type: 'solid', color: '#ccc', width: 2},
            interval: 5 // 紧急程度分割线
        },
        axisLabel: {
            formatter: val => val === 5 ? '一般' : (val === 0 ? '不紧急' : '紧急')
        }
    },
    yAxis: {
        type: 'value',
        min: 0,
        max: 10,
        splitLine: {
            show: true,
            lineStyle: {type: 'solid', color: '#ccc', width: 2},
            interval: 5 // 重要程度分割线
        },
        axisLabel: {
            formatter: val => val === 5 ? '一般' : (val === 0 ? '不重要' : '重要')
        }
    },
    // 象限背景与标签
    graphic: [
        // 重要且紧急
        {type: 'rect', left: 'center', top: 'top', width: '50%', height: '50%', style: {fill: '#ffcccc', opacity: 0.3}},
        {type: 'text', left: '75%', top: '25%', style: {text: '重要且紧急', fontSize: 16, fontWeight: 'bold'}},
        // 重要不紧急
        {type: 'rect', left: 'left', top: 'top', width: '50%', height: '50%', style: {fill: '#ccffcc', opacity: 0.3}},
        {type: 'text', left: '25%', top: '25%', style: {text: '重要不紧急', fontSize: 16, fontWeight: 'bold'}},
        // 不重要不紧急
        {type: 'rect', left: 'left', top: 'center', width: '50%', height: '50%', style: {fill: '#ccccff', opacity: 0.3}},
        {type: 'text', left: '25%', top: '75%', style: {text: '不重要不紧急', fontSize: 16, fontWeight: 'bold'}},
        // 紧急不重要
        {type: 'rect', left: 'center', top: 'center', width: '50%', height: '50%', style: {fill: '#ffffcc', opacity: 0.3}},
        {type: 'text', left: '75%', top: '75%', style: {text: '紧急不重要', fontSize: 16, fontWeight: 'bold'}}
    ],
    series: [
        {
            type: 'scatter',
            data: [
                [8, 9, '项目上线'], [7, 8, '核心Bug修复'], // 重要且紧急
                [2, 8, '技能进阶学习'], [3, 9, '长期客户维护'], // 重要不紧急
                [2, 2, '刷短视频'], [1, 3, '无意义闲聊'], // 不重要不紧急
                [8, 3, '临时凑数会议'], [9, 2, '无关广告邮件'] // 紧急不重要
            ],
            label: {show: true, formatter: params => params.value[2]},
            symbolSize: 20
        }
    ]
};

myChart.setOption(option);

2. 关键细节调整 #

• 象限定制: 直接修改graphic里的矩形颜色、文本内容，就能适配你的变体矩阵需求。
• 数据扩展: 在series.data里添加[紧急度, 重要度, 任务名]格式的数组，即可新增任务节点；也可以拆分多个series用不同颜色区分任务类型。
• 评分体系适配: 调整x/y轴的min/max值，就能适配0-5、1-4等不同的紧急/重要程度评分规则。

3. 交互增强 #

如果需要更丰富的交互，比如点击任务节点跳转详情页，可以给series添加click事件：

myChart.on('click', params => {
    // 这里写点击后的逻辑，比如跳转
    console.log('点击了任务:', params.value[2]);
});

内容的提问来源于stack exchange，提问作者Chris Nun