Визуализация данных Echarts: диаграммы (1) — базовая гистограмма, гистограмма с накоплением

визуализация данных

адрес проекта

представлять

Как наиболее распространенная визуальная диаграмма, гистограмма используется для отображения некоторых основных данных, которые делятся на базовую гистограмму и гистограмму с накоплением. Реализуя обе диаграммы, мы узнаем следующее

  • Базовая столбчатая диаграмма
    • Ось координат X, чертеж оси Y
    • Размеры, параметры измерения
  • Столбчатая диаграмма с накоплением
    • индикатор оси
    • легенда переключатель
    • определение стека
    • маркерная линия

Базовый анализ гистограммы

Предположим, нам нужно нарисовать гистограмму на белой бумаге, сначала мы нарисуем оси, а потом нарисуем соответствующие столбцы. Это также соответствует тому, как мы используем Echarts для рисования диаграмм в большинстве случаев. В линейчатой ​​диаграмме используется прямоугольная система координат, включая оси X и Y. Ось X линейчатой ​​диаграммы обычно представляет значение текстового типа, а ось Y — значение количественного типа. Чтобы облегчить наше понимание позже, текстовый тип называетсяизмерение; числовой тип называетсямера

Порядок отрисовки гистограммы

Таким образом, порядок отрисовки нашей текущей базовой гистограммы можно понимать как

    1. Установите ось X и соответствующий размер
    1. Установите ось Y и соответствующую ей меру

В Echarts таблица взаимосвязей элементов конфигурации, соответствующая единице рисования базовой гистограммы, выглядит следующим образом.

Таблица конфигурации блока рисования гистограммы

единица чертежа элемент конфигурации
ось X xAxis
Ось X соответствует размеру xAxis.data
ось Y yAxis
Соответствующая мера по оси Y series[i].data

Анализ таблицы конфигурации блока рисования гистограммы

Почему элементы конфигурации для измерений и показателей отличаются? Давайте проанализируем его в сочетании с руководством по элементам конфигурации, предоставленным Echarts, и кодом базовой гистограммы.

В руководстве по элементу конфигурации Echarts xAxis и yAxis совпадают, за исключением имени конфигурации. Соответствующие свойства и описания примера кода следующие:

Имя свойства имея в виду иллюстрировать
type тип оси категория: значение оси измерения: ось измерения
data размерные данные Действительно только для размерной оси

После установки размеров по осям x, y и x. Диаграмма появится с основными осями. Затем вам нужно установить метрические данные для оси Y.

Столбчатая/гистограмма Размер данных представлен высотой столбца/шириной столбца. Когда ось измерения задана, другая ось соответствует оси меры. Данные метрической оси должны быть установлены последовательно, что представляет собой массив серий данных. Каждый элемент массива представляет набор показателей. Соответствующие свойства и описания примера кода следующие:

Имя свойства имея в виду иллюстрировать
type тип ряда данных гистограмма: столбец/гистограмма
data метрические данные Работает только на оси измерения

Анализ кода образца гистограммы

Теперь разберем его в сочетании с кодом базовой гистограммы, код выглядит следующим образом

let chart = this.$refs.chart;
echarts.init(chart).setOption({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
});

Ось X: Тип оси x — категория, указывающая, что ось X является осью измерения. Данные xAxis относятся к данным оси измерения

Ось Y: тип yAxis — значение, указывающее, что ось y является осью измерения. Данные оси измерения должны быть установлены в конфигурации серии.

Когда тип ряда[i] — гистограмма, это означает, что диаграмма ряда представляет собой столбчатую/гистограмму, а данные соответствуют данным измерений.

Реализация столбчатого графа

Анализ столбчатой ​​диаграммы с накоплением

Столбчатая диаграмма с накоплением относится к возможности нескольких подкатегорий данных в одном столбце. На основе гистограммы продолжаем настраивать поле подсказки, легенду, сетку и линию маркера. Создает более настраиваемую гистограмму с накоплением.

Порядок отрисовки столбчатой ​​диаграммы с накоплением

    1. установить окно подсказки
    1. Установить легенду
    1. установить сетку
    1. Установите ось X и размерные данные
    1. установить ось Y
    1. Установить данные измерения ряда данных
      1. установить стек
      1. Установить маркерные линии
      1. установить ширину полосы

Столбчатая диаграмма с накоплением Таблица конфигурации единиц измерения графика

единица чертежа элемент конфигурации
Подсказка tooltip
легенда legend
сетка grid
ось X xAxis
Ось X соответствует размеру xAxis.data
ось Y yAxis
куча series[i].stack
сетка диаграммы markLine
ширина полосы barWidth

Анализ таблицы конфигурации ячеек гистограммы с накоплением

Подсказка — это вспомогательный компонент диаграммы, также известный как индикатор, который может отображать больше индикаторной информации о данных. Существуют разные типы: глобальные, система координат, серия, элемент данных. Соответствующие свойства и описания примера кода следующие:

Имя свойства имея в виду иллюстрировать
trigger Тип триггера подсказки элемент: триггер графики элемента данных; ось: триггер оси координат; нет: триггер отсутствует
axisPointer Элемент конфигурации индикатора оси Вступить в силу в индикаторе оси
axisPointer.type Тип индикатора линия: прямая; тень: тень; нет: нет; крест: перекрестие

Компонент легенды используется в сценариях с несколькими рядами данных.Вы можете щелкнуть легенду, чтобы управлять отображением ряда данных.Соответствующие свойства и описания примера кода следующие:

Имя свойства имея в виду иллюстрировать
data массив данных Каждый элемент представляет собой название серии, если не указано, оно будет автоматически получено из текущей серии.

Компонент сетки в контейнере диаграммы используется для установки положения, стиля и других состояний сетки диаграммы.Соответствующие свойства и описания примера кода следующие:

Имя свойства имея в виду иллюстрировать
слева, справа, снизу, сверху Расстояние от контейнера во всех направлениях Может быть определенным значением пикселя, процентным соотношением, центральным форматом (слева, по центру, справа)
containLabel Содержит ли сетка галочки для осей Может использоваться для предотвращения переполнения этикетки

Стек, примененный к линейчатой ​​диаграмме, вызывает сложение столбцов по высоте. Соответствующие свойства и описания примера кода следующие:

Имя свойства имея в виду иллюстрировать
без Настройка укладки столбцов Столбцы с одинаковым значением стека на одной и той же оси измерения будут сложены

Линия графика (markLine) может рисовать прямую линию на графике. Соответствующие свойства и описания примера кода следующие:

Имя свойства имея в виду иллюстрировать
lineStyle стиль сетки Можно установить такие атрибуты, как цвет сетки, ширина, тип и т. д.
lineStyle.type тип сетки сплошная: сплошная линия; пунктирная: пунктирная линия; пунктирная: точка
data Количество данных Каждый элемент массива может быть массивом из двух значений, представляющих конечную точку линии.

Анализ кода примера столбчатой ​​диаграммы с накоплением

let option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'        
        }
    },
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                lineStyle: {
                    type: 'dashed'
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'百度',
            type:'bar',
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必应',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        }
    ]
};

Поле подсказки: всплывающая подсказка задается под глобальным параметром, а триггер (тип триггера) — это триггер оси. При наведении курсора на ось координат появится подсказка теневого типа, поскольку значение типа axisPointer равно теневому, указывая на то, что тип индикатора теневой.

Легенда: данные легенды представляют собой массив, указывающий, что эта диаграмма содержит следующие ряды данных: «прямой доступ», «маркетинг по электронной почте», «партнерская реклама», «видеореклама», «поисковая система», «Baidu», «Google», «Бинг», «Другое»

Сетка: информация о положении указывает, что сетка находится в контейнере со смещением левого поля 3%, смещением правого поля 4% и смещением нижнего края 3%. Значение свойства containsLabel, равное true, указывает, что сетка содержит метки осей.

Анализ осей X, Y согласуется с основной гистограммой

Серия данных: в массиве серии каждый элемент массива соответствует каждому элементу легенды. Среди них стеки (атрибуты стеков), соответствующие почтовому маркетингу, партнерской рекламе и видеокампаниям, — все это рекламные объявления, а стеки, соответствующие Baidu, Google, Bing и другим сериям, — это поисковые системы, поэтому есть два типа столбцов с накоплением. по графику.

Линия диаграммы: Элемент конфигурации markLine в ряду поисковой системы задает стиль линии. Тип lineStyle отмечен пунктиром, указывая на то, что формат сетки — пунктирная линия, а тип в массиве данных — минимальное и максимальное значение специального типа аннотации, поэтому отправной точкой является минимальное значение поисковой системы. серии, а конечной точкой является максимальное значение.

Столбчатая диаграмма с накоплением для достижения эффекта

Думай и практикуй

  1. Как реализовать базовую гистограмму?
  2. Как реализовать параллельную столбчатую диаграмму? (Диаграмма комбинации столбцов для нескольких рядов данных)
  3. Как реализовать гистограмму с накоплением?
  4. Как усреднять стекирование под прицельной сеткой?
Категории