Это седьмой день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов последнего обновления 2021 г.
предисловие
- онлайн музыкаТкни меня!
- Исходный код музыкального блогаСейчас в сети!
- В первых нескольких статьях говорилось об установке и развертывании Docker, и операция относительно проста. (начальный уровень)
- Поскольку я учил необходимости учиться заходить на официальный сайт echarts, чтобы найти примеры, теперь потребности напрямую дают мне ссылку на echarts и позволяют мне понять это.
- Вы думали, что он был цел? По сути, он основывается на этом фундаменте, а затем добавляется к дракону.
- Один раз сказали, что загружено слишком много данных, и страница зависнет, мне нужно было сразу написать 5к данных на официальный сайт, мол ничего страшного. Да, да, но люди показывают один.Если вы хотите вывести 5 графиков на одной странице, нагрузка на производительность в пять раз выше, сестра.
- Далее я поделюсь своим опытом написания Echarts с момента моей работы, которая выйдет в 1510 году.
- Вы готовы?
Стул здесь, и он становится мягким и теплым по пути к программированию~
1. Есть проблемы
Положение карты echarts становится меньше, и после деформации все еще наблюдается явление застревания.
Ниже мы проанализируем, почему эта проблема существует.
Во-вторых, восстановить сцену
Есть кнопка.После нажатия позиция, занимаемая графиком диаграммы, становится меньше.При этом диаграммы деформируются и размер необходимо пересчитать. Так как его рассчитать?
3. Анализ
Мысли из трехлетнего опыта.
3.1 ResizeObserver
Используйте API, предоставляемый браузером:ResizeObserver,ResizeObserverИнтерфейс может слушатьElementобласть содержимого илиSVGElementИзменение ограничения коробки.
mounted() {
this.objResizeObserver = new ResizeObserver(() => {
if (this.lineChart) {
console.log(111)
this.lineChart.resize()
}
})
this.objResizeObserver.observe(this.$refs.chartBox)
}
Если вы напечатаете его внутри ResizeObserver, вы обнаружите, что при нажатии кнопки позиция, занимаемая графиком echarts, становится меньше, и ResizeObserver будет срабатывать много раз.Поскольку ширина постоянно меняется, 111 печатается 50 раз ( потому что графиков пять), а это значит, что размер диаграммы изменяется десять раз, поэтому страница будет сильно застревать.
Чтобы посмотреть эффект, вы можете ткнуть меня
Я спросил его, вам не кажется, что ваша страница сильно тормозит? Он сказал, что все в порядке, я оптимизировал этот эффект.
Первоначально он сделал присваивание внутри ResizeObserver.Если значение не пустое, оно не будет изменять размер, говоря, что исходный размер был оптимизирован.
Потом спросил: почему бы не использовать метод ресайза, он сказал, что это бесполезно.
Хорошо, я напишу это для вас.
3.2 resize
Окно прослушивает событие изменения размера. следующим образом:
window.addEventListener('resize', setTimeout(() => {
if (this.lineChart) {
console.log(666)
this.lineChart.resize()
}
}, 800))
Если вы напечатаете его в методе изменения размера, вы обнаружите, что при нажатии кнопки позиция, занимаемая графиком echarts, становится меньше, что вызовет изменение размера и печать 666 5 раз (потому что есть пять графиков), что означает, что Диаграмма изменяется только один раз, потому что addEventListener, внутри изменения размера, необходимо отменить последнее изменение. Явно не застрял, оптимизировал.
Поскольку изменение размера привязки окна будет вызвано только изменением окна, но при нажатии кнопки позиция, занимаемая графиком диаграммы, становится меньше, и изменение размера окна не будет инициировано.В это время, когда мы хотим щелкнуть кнопку, мы можем вручную запустить метод изменения размера.
Чтобы посмотреть эффект, вы можете ткнуть меня
Окно, прослушивающее событие изменения размера, запускается только один раз, что очень оптимизировано.
Ну, вы все еще чувствуете, что нет никакого пути.
Три года опыта: я использовал ресайз сначала безрезультатно.
Тогда вы не использовали таймер для задержки расчета изменения размера?
Если это бесполезно, это потому, что экземпляр echarts не был загружен, даже если изменение размера вычисляет ширину и высоту в это время, его нельзя вычислить. Естественно, мы не можем добиться желаемого эффекта. не вступит в силу.
В-четвертых, код выглядит следующим образом
Есть две схемы, одна ResizeObserver и другая resize.
4.1 ResizeObserver
<div>
<button @click="btnClick">点击</button>
<div ref="chartBox" >
<div ref="lineChart"></div>
</div>
</div>
data() {
return {
lineChart: null,
objResizeObserver: null,
}
},
methods:{
// 点击事件
btnClick(){
// echarts图占的位置变小的逻辑
// ...
}
}
mounted() {
this.objResizeObserver = new ResizeObserver(() => {
if (this.lineChart) {
console.log(111) // 多次触发
this.lineChart.resize()
}
})
this.objResizeObserver.observe(this.$refs.chartBox)
},
destroyed() {
this.objResizeObserver = null
}
4.2 resize
<div>
<button @click="btnClick">点击</button>
<div ref="chartBox" >
<div ref="lineChart"></div>
</div>
</div>
data() {
return {
lineChart: null
}
},
methods:{
// 点击事件
btnClick(){
// echarts图占的位置变小的逻辑
// ...
this.reload()
},
reload() {
setTimeout(() => {
if (this.lineChart) {
console.log(666)
this.lineChart.resize()
}
}, 800)
},
},
mounted() {
window.addEventListener('resize', this.reload)
// 如果echarts图是v-if，这里还需要手动调用一次resize
this.reload()
},
destroyed() {
window.removeEventListener('resize', this.reload)
}
Точка знаний
echarts,ResizeObserver,window.addEventListener,resize
постскриптум
При написании Эхарса обращайте внимание на самоадаптацию, не деформируется ли он, и жалуйтесь, что у Эчарца много атрибутов, но это косвенно показывает, что он мощный и масштабируемый, и ему приходится думать о днях, когда он работал с богиней В то время я еще тот мальчик.
👍 Если это полезно для вас, ваши лайки - это смазка для меня, чтобы двигаться вперед.
Рекомендовано в прошлом
Внешний интерфейс, быстрое развертывание dist в Nginx
Все, что сказал Лао Ши, является объектом, вы верите в это?
Vue-Cli3 создает библиотеку компонентов
Vue реализует динамическую маршрутизацию (и интервьюер выдает основные моменты проекта)
Операция Axios, которую вы не знаете в проекте (рукописные основные принципы, совместимость)
Документация по компонентам проекта сборки VuePress
система управления фоном vue-typescript-admin-template