Как нарисовать слой круга на точечной диаграмме, используя Echarts

Question

Как нарисовать что-то похожее на скриншот ниже в Echarts?

С помощью ECharts я могу легко рисовать разброс и оси, включая масштабирование и панорамирование функции. Однако, когда мне нужно нарисовать новый слой поверх разброса, все становится грязно. Я пытался использовать пользовательские серии электронных диаграмм, однако, его API и документацию трудно понять. Кроме того, его функция масштабирования работает странно на нескольких сериях.

Answer 1

Вы можете создать круг, добавив настроенный элемент данных в серию разброса.

Вот пример варианта:

option = {
    xAxis: {
        max: 12
    },
    yAxis: {
        max: 12
    },
    series: {
        type: 'scatter',
        symbolSize: 20,
        data: [
            [6.0, 8.04],
            [8.0, 6.95],
            [3.5, 8.81],
            [5.0, 8.33],
            [6.0, 7.24],
            [4.0, 4.26],
            [8.0, 7.84],
            [7.0, 4.82],
            [5.0, 5.68],
            {
                value: [6, 6],
                symbolSize: 400,
                itemStyle: {
                    color: 'rgba(1,1,1,0)',
                    borderColor: '#00f',
                    borderWidth: 4
                }

            }
        ]
    }
};

..., который должен выдавать этот вывод: выводит разброс рядов с окружением

См. https://echarts.apache.org/en/option.html#series -scatter.data и прокручиваем немного вниз для получения дополнительной информации о пользовательских элементах данных.