vue3寫echarts不能根據(jù)屏幕大小縮的解決辦法
更新時間：2025年04月25日 10:45:01 作者：Grocery store owner
這篇文章主要介紹了vue3寫echarts不能根據(jù)屏幕大小縮的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下
下載echarts
npm i echarts
引入
import * as echarts from 'echarts'
import { markRaw } from 'vue'
使用markRaw包裹起來
const getCodHotData = () => {
state.Chart = markRaw(echarts.init(document.getElementById('ChargingProcessCurve')))
var option = {
title: {
text: 'Stacked Line'
},
tooltip: {
show: true,
trigger: 'axis',
},
legend: {
show: true,
type: 'plain',
icon: 'roundRect',
orient: 'horizontal',
bottom: '0',
data: ['Email', 'Union Ads']
},
grid: {
left: '1%',
right: '1%',
bottom: '6%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}
state.Chart.setOption(option)
}
縮放
const echareseven = ()=> {
window.addEventListener('resize', () => {
state.Chart.resize()
})
}
使用
onMounted(() => {
nextTick(() => {
getCodHotData()
echareseven()
})
})總結(jié)
到此這篇關(guān)于vue3寫echarts不能根據(jù)屏幕大小縮解決辦法的文章就介紹到這了,更多相關(guān)vue3 echarts不能根據(jù)屏幕大小縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
本篇文章主要介紹了Vue之前端體系與前后端分離，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
Vue3+Vite項目按需自動導(dǎo)入配置以及一些常見問題修復(fù)
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗,下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite項目按需自動導(dǎo)入配置以及一些常見問題修復(fù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了如何封裝一個類似微信通訊錄帶有字母檢索功能的vue組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本文給大家總結(jié)了vue-cli常用設(shè)置,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vue中的計算屬性computed傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue 對象添加或刪除成員時無法實時更新的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
使用vue+element?ui實現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
這次做項目的時候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vuex是一個專門為vue開發(fā)的狀態(tài)管理工具,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),其核心是state,下面這篇文章主要給大家介紹了關(guān)于Vuex的安裝、搭建及案例的相關(guān)資料,需要的朋友可以參考下2022-05-05
本篇文章主要介紹了淺談vue項目可以從哪些方面進(jìn)行優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05