Как использовать модули карт zingchart в Vue. js? - PullRequest
Новая
       18

Как использовать модули карт zingchart в Vue. js?

0 голосов
/ 23 марта 2020

Я ищу в документации , но я не нахожу примеров использования модулей карт с zingchart- vue

На самом деле я использую Nuxt, но я полагаю, что это то же самое ...

1 Ответ

1 голос
/ 23 марта 2020

мы обновили наш readme в репозитории zingchart- vue о том, как решить эту проблему.

https://github.com/zingchart/zingchart-vue#zingchart -модули

ZingChart поставляется в комплекте с вашими общими типами диаграмм, такими как линия, столбец, p ie и разброс. Для дополнительных типов диаграмм вам потребуется импортировать файл дополнительного модуля.

Например, добавление диаграммы глубины в компонент vue потребует дополнительного импорта. Обратите внимание, что вы должны импортировать из каталога modules-es6 в пакете zingchart.

import 'zingchart/modules-es6/zingchart-depth.min.js';

Вот полный пример vue для загрузки карты: 

<template>
  <div style="height:200px">
    <zingchart :height="'100%'" ref="myChart" 
               :data="{
        shapes: [
          {
            type: 'zingchart.maps',
            options: {
              name: 'usa',
              ignore: ['AK','HI']
            }
          }
        ]
      }" >
    </zingchart>
  </div>
</template>

<script>
import zingchartVue from 'zingchart-vue';
import 'zingchart/modules-es6/zingchart-maps.min.js';
import 'zingchart/modules-es6/zingchart-maps-usa.min.js';

export default {
  components: {
    zingchart: zingchartVue,
  },
}
</script>
...