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如何把字符串中的所有@内容,替换成带标签的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
el-table表格渲染动态表头,数据更新视图不变化的解决方案
这篇文章主要介绍了el-table表格渲染动态表头,数据更新视图不变化的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
最近工作中遇到一个效果还不错,所以想着实现一下,下面这篇文章主要给大家介绍了关于如何基于Vue3实现的图片散落效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
本篇文章主要介绍了Vue 滚动行为的具体使用方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧2018-11-11
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了vue实现分页的三种效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
Vue中对watch的理解(关键是immediate和deep属性)
watch侦听器，是Vue实例的一个属性，是用来响应数据的变化，需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，这篇文章主要介绍了Vue中对watch的理解,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了详解vue-cli脚手架中webpack配置方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中ref标签属性和$ref的关系，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论