v2-charts

Компоненты, упакованные на основе Vue2 и ECharts5. Благодаря настройке свойств компонентов, можно дополнительно решить проблему сложности настройки диаграмм, делая код более понятным и лаконичным.

Введение

Онлайн-пример.

Описание компонентов:

• <charts/> — базовый компонент, в основном используется для создания макета и диаграммы.
• <charts-legend/> — компонент легенды, в основном используемый для создания легенды диаграммы, настройки.
• <charts-series/> — компонент типа диаграммы, в основном используемый для создания различных типов диаграмм, настроек.
• <charts-title/> — компонент заголовка, в основном используемый для создания заголовка диаграммы, настройки.
• <charts-tooltip/> — компонент подсказки, в основном используемый для создания подсказки диаграммы, настройки.
• <charts-x-axis/> — компонент оси X, в основном используемый для создания оси X прямоугольной системы координат диаграммы, настройки.
• <charts-y-axis/> — компонент оси Y, в основном используемый для создания оси Y прямоугольной системы координат диаграммы, настройки.

Установка

npm i --save v2-charts

или

yarn i --save v2-charts

Использование

1. Ссылка

import V2Charts from 'v2-charts'

Vue.use(V2Charts)

2. Пример

<template>
  <charts width="500px" height="500px">
    <charts-title text="Это пример круговой диаграммы" left="center"/>
    <charts-legend orient="vertical" left="left"/>
    <charts-tooltip trigger="item" />
    <charts-series
       type="pie"
       name="Источники трафика"
       radius="50%"
       :data="pieData"
       :label="{
          formatter (item) {
            return `${item.name}\n ${item.value}`
          }
       }"
    />
  </charts>
</template>

<script>
export default {
  name: "charts-demo",
  data() {
    return {
      pieData: [
        { value: 1048, name: "Поисковая система" },
        { value: 735, name: "Прямой доступ" },
        { value: 580, name: "Маркетинг по электронной почте" },
        { value: 484, name: "Партнёрский маркетинг" },
        { value: 300, name: "Видеореклама" },
      ]
    }
  }
}
</script>

Свойства

Charts Props

Events компонента Charts