Подробное объяснение каждого элемента конфигурации карты Echarts и данных национальной провинции и города.
Подробное объяснение каждого элемента конфигурации карты Echarts и данных национальной провинции и города.
Язык кода:js
копировать
 option: {
        backgroundColor: "#fff", // цвет холста
        //Подсказка
        tooltip: {
          backgroundColor: "rgba(255,255,255,1)",
          borderColor: "#333",
          // Подскажите текстовое содержание и стиль
          formatter: function (params) {
            console.log("2323", params.data);
            var result = "";
            result += params.data.name + "<br>";
            result += "<span>" + params.data.address + "</span><br>";
            result += "<span>" + params.data.phone + "</span><br>";
            result += "<span>" + params.data.workRule + "</span>";
            return result;
          },
        },
        //Компонент географической системы координат используется для рисования карты
        geo: [
          {
            map: "hebei", // использовать registerMap Зарегистрированное имя Зарегистрируйтесь, чтобы получить доступную карту, только на geo компонент или map Тип диаграммы
            aspectScale: 1, // Этот параметр используется scale соотношение сторон карты
            roam: false, // Разрешить ли масштабирование
            zoom: 1.1, // Коэффициент масштабирования текущей перспективы
            center: [116.692385, 39.198286], // Координаты центральной точки карты провинции Хэбэй
            layoutSize: "90%", //Размер карты поддерживает процентное отношение к ширине и высоте экрана или абсолютному размеру пикселей.
            layoutCenter: ["50%", "50%"], //карта Положение центра на экране
            label: {
              show: true, // Отображает ли карта текст региона и названия провинций и городов
              color: "#fff",
              fontSize:14,// Размер текста названия провинции и города
            },
            itemStyle: {
              // цвет области
              areaColor: {
                type: "radial", //Градиентный режим
                x: 0.7,
                y: 0.5,
                r: 0.4,
                // Изменить цвет карты эффект градиента
                colorStops: [
                  {
                    offset: 0,
                    color: "#0160AD", // 0% цвет
                  },
                  {
                    offset: 1,
                    color: "#0160AD", // 100% цвет
                  },
                ],
                global: false, // Значение по умолчанию: false
              },
              emphasis: {
                areaColor: "blue", // Цвет фона области, куда перемещается мышь.
                borderWidth: 0,
              },
              borderColor: "#FFFFFF",
              borderWidth: 1,
            },
            //Стили многоугольников и меток в выделенном состоянии.
            emphasis: {
              itemStyle: {
                areaColor: "#0160AD",
              },
              label: {
                show: 1,
                color: "#fff",
              },
            },
            // zlevel большое дело Canvas будет размещен zlevel маленький Canvas выше
            zlevel: 3,
          },
        ],
        // Информация о серии диаграмм
        series: [
          {
            type: "scatter", // График рассеяния (пузырьковый график), есть несколько типов на выбор
            coordinateSystem: "geo", // система координат  geoиспользоватьгеографиясистема координат
            symbolSize:16, // размер точки вспышки
            zlevel: 10, // Вот ключ, его надо поместить Последовательно отображать иерархию,
            // Включать ли эффект увеличения после выделения. от 5.3.2 Версия начинает поддерживать номер, используемый для установки увеличения выделения, увеличения по умолчанию. 1.1 раз
            emphasis: {
              scale: true, 
            },
            symbol:'image://' + logo, // Маркированная графика может пройти 'image://url' Установить изображение, где URL ссылка на изображение или dataURI
            itemStyle: {
              // Цвет точек можно определить по params Значение параметра можно использовать для установки цвета несовместимого цвета.
              color: function () {
                return "white";
              },
              // shadowBlur: 10,
              // shadowColor: "#333", //Графическая тень
            },
            data: [], // Данные о точках, включая широту и долготу
          },
        ],
      },

series-type

Определение

line

Линейная/площадная диаграмма

bar

гистограмма

pie

круговая диаграмма

scatter

График рассеяния (пузырьковый график)

effectScatter

График рассеяния (пузырьковый график) с анимацией волновых эффектов

radar

радиолокационная карта

tree

древовидная диаграмма

treemap

Форма визуализации «дерева данных»

sunburst

Санберст

boxplot

«Коробочный сюжет», «Коробчатый сюжет», «Коробочный сюжет», «Коробочный сюжет», «Коробочный сюжет»

candlestick

K-линейный график

heatmap

тепловая карта

map

карта

parallel

параллельная система координат

lines

карта пути

graph

Используется для отображения узлов и данных о взаимосвязях между узлами.

sankey

Диаграмма Санки

funnel

воронкообразная диаграмма

gauge

Панель управления

pictorialBar

Пиктограмма

themeRiver

тема река

custom

Пользовательская серия

json.rar
boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода