[VUE] Введение в использование диаграмм G2

Vue.js
[VUE] Введение в использование диаграмм G2

О диаграмме G2 Введение

G2 – это визуальный базовый движок, основанный на теории грамматики графов. Он управляется данными, предоставляет грамматику графов и интерактивную грамматику, обладает широкими возможностями использования и расширяемостью.

Используя G2, вы можете использовать Canvas или SVG для построения множества интерактивных статистических диаграмм с помощью одного оператора, не обращая внимания на различные утомительные детали реализации диаграммы.

banner.jpg

Адрес официального сайта G2 Chart

https://antv.gitee.io/zh

Подробное руководство по разработке G2 Icon

https://antv-g2.gitee.io/zh/docs/api/general/chart

использовать

Шаг 1. Установите зависимости G2

npm instal @antv/g2

Шаг 2: Подготовьте DOM-контейнер для G2 перед рисованием

<div id="webInfo"></div>

Шаг 3: Импорт

import G2 from "@antv/g2";

Шаг 4: Определите в смонтированном

  1. Вы можете сначала определить let chart = null;
  2. const chart = new G2.Chart({})
chart = new G2.Chart({       
        container: "webInfo",//指定图表容器       
        forceFit: true,//强制配合 
        width: 600, // 指定图表宽度       
        height: 306,//高度       
        padding: [20, 30, 30, 50],//内边距 
})

Шаг 5: Загрузите источник данных

/马上更新图表 / 
chart.changeData(chartData) 

/仅仅是更新数据，而不需要马上更新图表/ 
chart.source(chartData) 

/需要更新图表时调用 / 
chart.repaint()

Добавлено: расширенный синтаксис Clear Graphics.

/清理所有/
chart.clear();
Категории