Введение

Обёртывание echarts по аналогии с vue-echarts, в основном для решения проблемы с основной темой и реагирования на конфигурацию options. Также предоставляется несколько упакованных функций для преобразования функций.

Установка

Установка через CDN

На unpkg.com/bin-charts можно найти последние версии ресурсов bin-charts. Можно также выбрать нужную версию и импортировать файл js на страницу, чтобы начать использовать его:

<!-- import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- import echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<!-- import bin-charts -->
<script src="https://unpkg.com/bin-charts@0.1.0/lib/bin-charts.min.js"></script>

@0.1.0 обозначает номер версии. Рекомендуется зафиксировать номер версии для обеспечения стабильности кода.

Установка через npm

Рекомендуется использовать npm для установки, так как это лучше сочетается с инструментами сборки, такими как webpack. Кроме того, он лучше работает с es6 и поддерживает импорт по требованию.

npm i bin-charts -S
# or 
yarn add bin-charts

Если вы знакомы с node.js и npm и хотите использовать webpack, пожалуйста, перейдите к следующему разделу: «Быстрое начало работы» (/#/start).

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

Используйте npm с Vue Loader на основе ES Module (рекомендуемый метод), см. демо для конкретных инструкций по использованию.

В main.js добавьте следующий код:

import Vue from 'vue';
import BinCharts from 'bin-charts';
import App from './App.vue';

// Вручную импортируйте модули ECharts для уменьшения размера пакета
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/radar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'

// Если вам нужно использовать расширения ECharts, просто импортируйте пакет расширения напрямую
// Например, ECharts-GL:
// Установите зависимость: npm install --save echarts-gl, а затем добавьте следующую ссылку
import 'echarts-gl'

// После регистрации компонента вы можете использовать его
Vue.component(BinCharts.name, BinCharts)

new Vue({
  el: '#app',
  render: h => h(App)
});

Примечание

По умолчанию в режиме webpack будет импортироваться исходная версия для реализации отложенной загрузки, что может привести к исключению файлов в node_modules из области перевода Babel. Пожалуйста, измените конфигурацию следующим образом:

// vue.config.js
module.exports = {
  transpileDependencies: [
    'bin-charts'
  ]
}