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.

相关推荐
程序员鱼皮3 分钟前
前特斯拉 AI 总监:AI 编程最大的谎言,是 “提效”
前端·后端·ai·程序员·开发
Irene199111 分钟前
Vue3 规范推荐的 <script setup> 中书写顺序(附:如何响应路由参数变化)
vue.js·路由
pusheng202515 分钟前
普晟传感2026年新春年会总结与分析
前端·javascript·html
谢尔登16 分钟前
React19事件调度的设计思路
前端·javascript·react.js
Emma_Maria26 分钟前
本地项目html和jquery,访问地址报跨域解决
前端·html·jquery
奋斗吧程序媛31 分钟前
常用且好用的命令
前端·编辑器
2301_7965125235 分钟前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Lazyload 懒加载(懒加载的图片)
前端·javascript·react native·react.js·ecmascript·harmonyos
敲敲了个代码41 分钟前
从N倍人力到1次修改:Vite Plugin Modular 如何拯救多产品前端维护困境
前端·javascript·面试·职场和发展·typescript·vite
摘星编程44 分钟前
OpenHarmony环境下React Native:Timeline时间轴组件
javascript·react native·react.js
摘星编程1 小时前
在OpenHarmony上用React Native:Timeline水平时间轴
javascript·react native·react.js