Установка ECharts

1. Автономная версия

Мы можем напрямую скачать echarts.min.js и подключить его с помощью<script>импорта тега.

echarts.min.js(4.7.0)

Кроме того, в среде разработки можно использовать версию исходного кода echarts.js и подключить её с помощью<script>тега script. Версия исходного кода содержит распространённые сообщения об ошибках и предупреждения.

echarts.js(4.7.0)

Мы также можем скачать более функциональные версии напрямую с официального сайта ECharts, которые включают разные темы и языки. URL для скачивания:https://echarts.apache.org/zh/download.html。

Эти предварительно собранные ECharts предоставляют следующие пользовательские сборки:

  • Полная версия:echarts/dist/echarts.jsСамый большой по размеру, содержит все графики и компоненты. О включённом содержимом см.:echarts/echarts.all.js。
  • Стандартная версия:echarts/dist/echarts.common.jsСредний по размеру, содержит распространённые графики и компоненты. О включённом содержимом см.:echarts/echarts.common.js。
  • Облегчённая версия:echarts/dist/echarts.simple.jsМеньший по размеру, содержит только самые часто используемые графики и компоненты. О включённом содержимом см.:echarts/echarts.simple.js。

2. Использование метода CDN

Ниже приведены два относительно стабильных CDN, рекомендованных из-за рубежа. Я пока не нашел хорошего CDN в своей стране, поэтому пока рекомендуется загружать локально.

Staticfile CDN (внутренний)

<!--Подготовьте DOM-элемент с размерами (шириной и высотой) для ECharts.--> <div id="main" style="width: 600px;height:400px;"></div>

Попробуйте сами »

jsDelivr

<!--Подготовьте DOM-элемент с размерами (шириной и высотой) для ECharts.--> <div id="main" style="width: 600px;height:400px;"></div>

Попробуйте сами »

cdnjs

<!--Подготовьте DOM-элемент с размерами (шириной и высотой) для ECharts.--> <div id="main" style="width: 600px;height:400px;"></div>

Попробуйте сами »


3. Метод NPM

Поскольку установка npm медленная, в этом руководстве используется зеркало Taobao и его команда cnpm. Инструкции по установке и использованию см. в:Использовать зеркало Taobao NPM。

Версия npm должна быть больше 3.0; если она ниже этой версии, необходимо её обновить:

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

Получить echarts через cnpm:

# 最新稳定版
$ cnpm install echarts --save

После установки ECharts и zrender будут помещены в каталог node_modules, и мы можем использовать их напрямую в коде проекта.require('echarts')для использования.

Пример

var echarts = require('echarts'); //Инициализируйте экземпляр ECharts на основе подготовленного DOM. var myChart = echarts.init(document.getElementById('main')); //Нарисовать диаграмму myChart.setOption({ title: { text: 'Пример начала работы с ECharts' }, tooltip: {}, xAxis: { data: ['Рубашка', 'шерстяной свитер', 'шифоновый топ', 'Брюки', 'туфли на высоком каблуке', 'Носки'] }, yAxis: {}, series: [{ name: 'Продажи', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });
Другие расширения