交织两个数据集

Question

我想显示一个包含两个数据集的图表，一个数据集的状态为“200 OK”，另一个数据集的状态为所有其他数据集。

我想要的是交织这两个数据集，因此一个条形图列是 dataset1，下一个可能来自 datset2。 我只能将它们并排显示，无法过滤它们。 应显示图例，并且用户应该能够取消选择其中一个数据集。

这是我打算创建的布局：

这就是我所拥有的：

echarts 小提琴

Answer 1

我想到的解决方案是这样的：

• 创建一个不可见的数据集

  "ds0"

  ，它将包含所有项目，并且其变换执行排序 - 其唯一目的是通过全局排序标准设置 x 标签的位置；由于其值为零且其名称未定义（这将其从图例中排除），它将是不可见的。
• 另外两个数据集

  "ds1"

  和

  "ds2"

  堆叠在其上，将有过滤器但没有排序，因此它们将被放置在

  "ds0"

  指定的位置。

const dom = document.getElementById("chart-container");
const myChart = echarts.init(dom, null, {
    renderer: "canvas",
    useDirtyRect: false
});

const option = {
    xAxis: {
        type: "category"
    },
    yAxis: {
        type: "value"
    },
    legend: {
        show: true
    },
    series: [
        {
            datasetId: "ds0",
            stack: "stack1",
            type: "bar",
            encode: {
                x: "url",
                y: "zero"
            }
        },
        {
            name: "200",
            datasetId: "ds1",
            type: "bar",
            encode: {
                x: "url",
                y: "count"
            },
            color: "red",
            stack: "stack1"
        },
        {
            name: "non-200",
            datasetId: "ds2",
            type: "bar",
            encode: {
                x: "url",
                y: "count"
            },
            color: "blue",
            stack: "stack1"
        }
    ],
    dataset: [
        {
            // Provide a set of data.
            id: "dataset_raw",
            dimensions: ["url", "count", "status", "zero"],
            source: [
                {
                    url: "ov",
                    count: 13,
                    status: "200 OK"
                },
                {
                    url: "ga",
                    count: 4,
                    status: "404 Not Found"
                },
                {
                    url: "wf",
                    count: 10,
                    status: "404 Not Found"
                },
                {
                    url: "zi",
                    count: 99,
                    status: "200 OK"
                },
                {
                    url: "kn",
                    count: 88,
                    status: "200 OK"
                },
                {
                    url: "xz",
                    count: 96,
                    status: "404 Not Found"
                },
                {
                    url: "cs",
                    count: 71,
                    status: "404 Not Found"
                },
                {
                    url: "zn",
                    count: 41,
                    status: "200 OK"
                },
                {
                    url: "qt",
                    count: 17,
                    status: "404 Not Found"
                },
                {
                    url: "we",
                    count: 57,
                    status: "200 OK"
                },
                {
                    url: "yv",
                    count: 61,
                    status: "404 Not Found"
                },
                {
                    url: "md",
                    count: 94,
                    status: "200 OK"
                },
                {
                    url: "nu",
                    count: 96,
                    status: "200 OK"
                },
                {
                    url: "sm",
                    count: 9,
                    status: "404 Not Found"
                },
                {
                    url: "eu",
                    count: 79,
                    status: "200 OK"
                },
                {
                    url: "cj",
                    count: 92,
                    status: "200 OK"
                },
                {
                    url: "sf",
                    count: 16,
                    status: "200 OK"
                },
                {
                    url: "wp",
                    count: 65,
                    status: "404 Not Found"
                },
                {
                    url: "qg",
                    count: 12,
                    status: "200 OK"
                }
            ].map((o) => ({ ...o, zero: 0 }))
        },
        {
            id: "ds0",
            fromDatasetId: "dataset_raw",
            transform: [
                {
                    type: "sort",
                    config: {
                        dimension: "count",
                        order: "desc"
                    }
                }
            ]
        },
        {
            id: "ds1",
            fromDatasetId: "ds0",
            transform: [
                {
                    type: "filter",
                    config: {
                        dimension: "status",
                        "=": "200 OK"
                    }
                }
            ]
        },
        {
            id: "ds2",
            fromDatasetId: "ds0",
            transform: [
                {
                    type: "filter",
                    config: {
                        dimension: "status",
                        "!=": "200 OK"
                    }
                }
            ]
        }
    ]
};

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

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

* {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

（与代码沙箱相同）

我认为也许可以找到一个更优雅的解决方案，将

ds0

条的高度设置为零，这比我的更优雅，包括向每个数据点添加

"zero": 0

条目。如果提供建议，我很乐意编辑。

Answer 2

也可以使用 visualMap 轻松完成 - 示例链接