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.

相关推荐
lpfasd1234 小时前
node-sass 停止维护!老项目迁移 Dart Sass 完整教程
前端·rust·sass
Data analyse4566 小时前
rnweb 回放数据量太大怎么办?分片存储与断点续传的实现思路
前端·网络·算法·数据分析
xiaogai_gai6 小时前
金蝶收料通知单查询策略实战教程:从源系统拉取到中间层落地的完整路径
java·前端·数据库
环境栈笔记7 小时前
指纹浏览器 WebRTC 怎么设置?从 ICE 候选、代理出口到功能验证
前端·人工智能·后端·自动化
赵大仁7 小时前
官网性能优化实战:LCP 3.2s → 2.1s、CLS 0.107 → 0,以及被我推翻的 6 个判断
前端·性能优化·cls·lcp·core web vitals
xiancai_xianyu7 小时前
Text2SQL落地生产库前,SQL要过哪三道闸
前端·数据库·sql·sql注入·text2sql·ai agent开发·企业级ai框架
小羊没烦恼!8 小时前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
史瓦辛格8 小时前
给 DeepSeek Harness 写费用插件:把「这次会话花了多少钱」算准
前端·deepseek
星光不问赶路人8 小时前
Vue 3 + TypeScript 中 enum 的使用实践
前端·vue.js
鸥梨菌Honevid8 小时前
UVM 中 REQ 和 RSP 类型详解:从通信模型到 item_done 与 put_response
java·前端·servlet