vue项目 实现 vue-schart 图表 resize

项目中之前用了 vue-schart(项目已经没人维护,很久不更新了)

GitHub - lin-xin/vue-schart: :bar_chart: Vue.js wrapper for sChart.js

没有resize功能,又不想修改源码,可以参考下边的方法实现:

html 复制代码
<template>
  <div>
    <schart 
    class="schart"  
    canvasId="eChartBar"
    :options="options"
    ></schart>
  </div>
</template>
javascript 复制代码
<script setup>
  import Schart from 'vue-schart'
  import { ref } from 'vue'

  const options = ref({})

  window.addEventListener('resize', () => {
    // 通过修改重置options实现resize
    options.value= JSON.parse(JSON.stringify(options.value))
  })
</script>

推荐使用:Vue-ECharts

GitHub - ecomfe/vue-echarts: Apache ECharts component for Vue.js.

相关推荐
CodeSheep3 分钟前
中国四大软件外包公司
前端·后端·程序员
七月shi人4 分钟前
使用Node版本管理包n,在MAC电脑权限问题
前端·macos
shangxianjiao4 分钟前
vue前端项目介绍项目结构
前端·javascript·vue.js
Mike_jia12 分钟前
4ga Boards:重新定义高效协作的实时看板工具实战指南
前端
袖手蹲14 分钟前
Arduino UNO Q使用Streamlit构建WebUI:零前端经验打造交互式硬件控制
前端
大布布将军18 分钟前
⚡️编排的艺术:BFF 的核心职能——数据聚合与 HTTP 请求
前端·网络·网络协议·程序人生·http·node.js·改行学it
冒冒菜菜24 分钟前
RSAR的前端可视化界面
前端
asdfg125896336 分钟前
数组去重(JS)
java·前端·javascript
鹏多多37 分钟前
前端大数字精度解决:big.js的教程和原理解析
前端·javascript·vue.js
恋猫de小郭1 小时前
八年开源,GSY 用五种技术开发了同一个 Github 客户端,这次轮到 AI + Compose
android·前端·flutter