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