Это 19-й день моего участия в августовском испытании обновлений.Подробности о событии:Испытание августовского обновления
👾 Предисловие
- Эти два дня я был занят работой над экраном супер данных компании, и я действительно не могу выделить время, чтобы постоянно обновлять текст.
- Но действия по обновлению сохранялись так долго, и я не хочу прекращать обновление, поэтому я поделюсь теми, которые часто используются в моей работе.
echartsВыделите карусель карты. - Стек технологий
vue2.xЯ считаю, что эффект всем понятен, так что приступим.
🛰️ список дел
- Просто подготовьте карту
- Сохраните экземпляр для последующего использования
- установить таймер
- Установить события входа и выхода мыши
🔬 просто сделай это
🗺️ Подготовьте карту
- Сначала подготовьте простую карту, так как я нахожусь в Гуанчжоу, поэтому я использую карту провинции Гуандун~
- как дела
echartsПро использование карты рассказывать не буду, посмотрите документацию и потом ставьте соответствующую картуjsonВы можете импортировать его, и я верю, что все тоже будут. Кстати, кто-то спросил меня, где найти картуjsonфайл, мы можемDataV.GeoAtlasЗапросите город, который мы хотим найти, и выберитеJsonПросто скачайте файл.
💻 Сохраните экземпляр для последующего использования
- Прежде всего, нам нужно знать, что для выделения карусели карты нам нужно использовать
ehartsавтономныйdispatchActionAPI, и этоAPIэто использоватьehartsэкземпляр для использования, поэтому вvueМы хотим сохранить экземпляр инициализации карты в начале.
<template>
<div ref="myChart" id="myChart" class="gzMap"></div>
</template>
...
data () {
return {
charts: '',
option:{
...
}
};
},
...
mounted () {
this.$echarts.registerMap('广东', gzData);//获取地图数据
this.setMyEchart(); // 页面挂载完成后执行
},
methods:{
setMyEchart () {
const myChart = this.$refs.myChart; // 通过ref获取到DOM节点
if (myChart) {
const thisChart = this.$echarts.init(myChart); // 利用原型Echarts的初始化
this.charts = thisChart;//保存实例
thisChart.setOption(this.option); // 将编写好的配置项挂载到Echarts上
}
},
}
...
- Мы инициализируем в начале
echartsКогда дело доходит до сохранения примера и ожидания его последующего использования, остальную часть конфигурации вы можете настроить самостоятельно, исходный код будет размещен внизу статьи, и вы можете забрать его, если вам интересно.
⏰ Установите карусель таймера
- Потому что нужно настроить подсветку карусели, грубо говоря, это дать время, зафиксировать определенное количество времени, и тогда вылезет окно подсказки.Сейчас по умолчанию у всех установлена обычная мышь на перейти в поле выделения и подсказки.
- Сначала установите метод таймера, затем вызовите в нем официальный метод подсветки и метод окна подсказки и запустите его в течение указанного времени.
...
data () {
return {
mTime: '',
charts: '',
index: -1,
option:{
...
}
};
},
...
methods:{
setMyEchart () {
...
this.mapActive();
...
},
mapActive () {
const dataLength = gzData.features.length;
// 用定时器控制高亮
this.mTime = setInterval(() => {
// 清除之前的高亮
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.index
});
this.index++;
// 当前下标高亮
this.charts.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: this.index
});
this.charts.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: this.index
});
if (this.index > dataLength) {
this.index = 0;
}
}, 2000);
},
}
- мы первые
dataНастройте контейнер, который получает таймер иindexНижний индекс указывает, какой город выделен. - существует
mapActive()Сначала получите количество всех городов на этой картеdataLength,так какdispatchActionзаключается в переключении подсветки в соответствии с нижним индексом.indexЕсли число больше, чем количество городов, оно не будет отображаться, все, что мы должны контролироватьinedxниже номера во всех городах. - Установите таймер, чтобы сначала очистить ранее выделенный город.Если он не очищен, он будет выделен несколько раз одновременно, а это не тот эффект, который нам нужен.
- Затем используйте наш экземпляр для вызова
ehartsспособ добиться выделения и всплывающего окна подсказки, гдеdispatchActionполучает несколько параметров,typeУказывает тип, который вы хотите представить, например, выделение или окно подсказки, которое можно найти вОфициальный сайтВидеть. - В конце концов, мы будем судить
indexЭто за городомdataLengthЧисло, если оно есть, очистите его и начните заново, пока один из основных моментов нашей карусели не завершен.
🖱️ Добавить события мыши
- Конечно, мы не можем просто закончить это так, но также добавить некоторые эффекты событий, например, когда мы перемещаем мышь по карте, она останавливает карусель и выделяет только выбранный нами город.
methods:{
setMyEchart () {
...
this.mapActive();
...
},
mouseEvents () {
// 鼠标划入
this.charts.on('mouseover', () => {
// 停止定时器，清除之前的高亮
clearInterval(this.mTime);
this.mTime = '';
console.log(this.mTime);
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.index
});
});
// 鼠标划出重新定时器开始
this.charts.on('mouseout', () => {
this.mapActive();
});
},
}
- Видно, что мы добавили событие на мышь в , а при наведении мышки на карту очищаем предыдущее соответствующее
indexКонечно, недостаточно просто добавить смахивание мышью, чтобы при однократном скольжении мышью она не продолжала подсвечиваться при вращении.Нам также нужно добавить дополнительное событие свайпа мыши для перезапуска таймера. - На этом простая карусель подсветки завершена.Конкретный исходный кодЯ положил это здесь.
👋 Напишите в конце
- Этот вид эффекта выделения часто используется в работе. Лично я считаю, что он выглядит хорошо. Надеюсь, он поможет нуждающимся студентам. Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение в области комментариев~
- Если вы считаете эту статью полезной, пожалуйста,🍉 Подписаться + Нравится + Избранное + Комментарий + Ретвитнуть 🍉Поддержите~~😛
Прекрасное прошлое 🌅
Как элегантно использовать Vuepress для написания примеров компонентов (вкл.) 👈
Как элегантно использовать Vuepress для написания примера компонента (ниже) 👈