vue3寫echarts不能根據(jù)屏幕大小縮的解決辦法
更新時間：2025年04月25日 10:45:01 作者：Grocery store owner
這篇文章主要介紹了vue3寫echarts不能根據(jù)屏幕大小縮的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
下載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如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的
這篇文章主要介紹了vue如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
el-table表格渲染動態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案
這篇文章主要介紹了el-table表格渲染動態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
基于Vue3實(shí)現(xiàn)的圖片散落效果實(shí)例
最近工作中遇到一個效果還不錯,所以想著實(shí)現(xiàn)一下,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)的圖片散落效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
本篇文章主要介紹了Vue 滾動行為的具體使用方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
越來越多的人在用Vue，剛開始接觸vue的話常接觸的指令就幾個，統(tǒng)一歸納一下。感興趣的朋友跟隨小編一起看看吧2018-11-11
學(xué)習(xí)過vue2的寶子們肯定知道,組件傳值是vue項(xiàng)目開發(fā)過程中必不可少的功能場景,下面這篇文章主要給大家介紹了關(guān)于vue3中組件傳值的多種方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue中對watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽器，是Vue實(shí)例的一個屬性，是用來響應(yīng)數(shù)據(jù)的變化，需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的，這篇文章主要介紹了Vue中對watch的理解,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解vue-cli腳手架中webpack配置方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue中ref標(biāo)簽屬性和$ref的關(guān)系解讀
這篇文章主要介紹了vue中ref標(biāo)簽屬性和$ref的關(guān)系，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07