Введение в электронные карты

Echarts — это библиотека диаграмм визуализации с открытым исходным кодом на основе JavaScript, разработанная и поддерживаемая Baidu. Он предоставляет множество типов диаграмм, включая линейные диаграммы, гистограммы, точечные диаграммы, круговые диаграммы, карты и т. д., которые можно использовать для отображения различных типов данных. Echarts обладает хорошей интерактивностью и масштабируемостью и может удовлетворить различные потребности с помощью настраиваемых тем и стилей диаграмм. В то же время Echarts также поддерживает несколько платформ на мобильных и настольных компьютерах, позволяя отображать визуализацию данных на разных устройствах.

Типы диаграмм, предоставляемые Echarts, и их применимые сценарии

В Echarts представлены следующие типы диаграмм и применимые сценарии:

1. Линейный график: подходит для отображения тенденций и изменений данных с течением времени или других непрерывных переменных.,Может использоваться для отображения тенденций роста и колебаний данных.,Сравните различия в тенденциях между разными переменными.
2. Гистограмма: подходит для отображения размера данных и сравнения данных одной и той же категории, а также может использоваться для сравнения различий между различными переменными.
3. Круговая диаграмма: подходит для отображения пропорциональных отношений между различными категориями и может использоваться для отображения пропорциональных отношений между количествами различных категорий.
4. Диаграмма рассеяния: подходит для отображения взаимосвязи между двумя переменными и может использоваться для отображения корреляции между переменными.
5. Карта: подходит для отображения различий в данных и информации о географическом местоположении между различными географическими областями и может использоваться для сравнения количественных различий между различными географическими областями.
6. Тепловая карта: подходит для отображения пространственного распределения и распределения плотности данных. Ее можно использовать для отображения характеристик пространственного распределения или плотности данных.
7. Радарная диаграмма: подходит для отображения взаимосвязи между несколькими переменными и может использоваться для отображения различий или взаимного влияния между различными переменными.
8. Диаграмма Санки: подходит для отображения потока и преобразования данных между несколькими переменными. Ее можно использовать для отображения процесса и скорости преобразования данных, а также взаимовлияния между несколькими переменными.
9. K-линейный график: подходит для отображения изменений в финансовых операциях, таких как акции, и может использоваться для отображения ценовых тенденций и колебаний акций.
10. Ящичковая диаграмма: подходит для отображения распределения данных и может использоваться для отображения статистических характеристик, таких как медиана и квартиль данных.
11. Диаграмма водного поло: подходит для отображения статуса отдельного проекта, например хода выполнения, степени завершения и т. д.
12. Диаграмма воронки: подходит для отображения процесса обработки данных, коэффициента конверсии и другой информации.
13. Панель мониторинга: подходит для отображения состояния одной переменной.,например, температура、влажность、скорость и т. д.
14. Древовидная диаграмма: данные подходят для отображения иерархических структур и могут использоваться для отображения связей между различными уровнями.
15. прямоугольник Древовидная диаграмма: данные подходят для отображения иерархических структур и могут использоваться для отображения связей между различными уровнями.
16. Диаграмма отношений: данные, подходящие для отображения сложных сетей взаимоотношений или сетевых структур, и могут использоваться для отображения отношений между различными узлами.
17. Диаграмма облака слов: подходит для отображения ключевых слов текстовых данных и может использоваться для отображения тем и ключевых слов текстовых данных.
18. Диаграмма солнечных лучей: данные, подходящие для отображения иерархических структур.,Может использоваться для отображения взаимосвязей между различными уровнями.
19. Связь между несколькими изображениями: можно связать несколько изображений и использовать их для демонстрации взаимосвязи между различными изображениями.
20. Роза-диаграмма: используется для отображения пропорциональных отношений между различными категориями.
21. 3D-диаграмма: Echarts также поддерживает различные 3D-диаграммы, такие как 3D-гистограммы, 3D-диаграммы рассеяния и т. д.
22. Диаграмма временной шкалы: вы можете отображать изменения в данных на основе временной шкалы.,Может использоваться для отображения тенденций изменения данных с течением времени.

Установите и используйте Echarts

Установить электронные диаграммы

В папке проекта используйте терминал для ввода следующей команды в проекте Vue Установить электронные диаграммы

npm install echarts --save

Внедряйте и используйте Echarts

Электронные диаграммы можно вводить в Vue3 как глобально, так и локально.

Глобальное введение

1. Добавьте Echarts в файл main.js и используйте метод предоставления, чтобы предоставить экземпляр Echarts для глобального использования.

import {
    createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'

const app = createApp(App)
app.provide('$echarts', echarts)
app.mount('#app')

1. Используется в компонентах inject Способ получения Echarts например, и в onMounted Инициализируется в функции перехватадиаграмма

<template>
  <div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup> 
import {
    ref,onMounted,inject } from 'vue'
const chart = ref(null) 

onMounted(() => {
   
  const echarts  = inject(