vue3写echarts不能根据屏幕大小缩的解决办法
更新时间：2025年04月25日 10:45:01 作者：Grocery store owner
这篇文章主要介绍了vue3写echarts不能根据屏幕大小缩的解决办法,文中通过代码介绍的非常详细,对大家学习或者使用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()
})
})总结
到此这篇关于vue3写echarts不能根据屏幕大小缩解决办法的文章就介绍到这了,更多相关vue3 echarts不能根据屏幕大小缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
本篇文章主要介绍了Vue之前端体系与前后端分离，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
Vite是一种新型前端构建工具,能够显著提升前端开发体验,下面这篇文章主要给大家介绍了关于Vue3+Vite项目按需自动导入配置以及一些常见问题修复的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了如何封装一个类似微信通讯录带有字母检索功能的vue组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
本文给大家总结了vue-cli常用设置,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
这篇文章主要介绍了Vue中的计算属性computed传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue 对象添加或删除成员时无法实时更新的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了加速vue组件渲染之性能优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这次做项目的时候遇到需要切换预览表格数据的需求,所以下面这篇文章主要给大家介绍了关于使用vue+element ui实现走马灯切换预览表格数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
vuex是一个专门为vue开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态,其核心是state,下面这篇文章主要给大家介绍了关于Vuex的安装、搭建及案例的相关资料,需要的朋友可以参考下2022-05-05
本篇文章主要介绍了浅谈vue项目可以从哪些方面进行优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论