echart自适应尺寸，字体，宽度

最新推荐文章于 2024-07-26 15:20:05 发布

one.dream

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量4k

点赞数

分类专栏： Javascript 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_44472722/article/details/122238405

版权

Javascript 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

本文介绍了一款名为'auto-size-echart'的插件，它解决了ECharts在容器尺寸变化时需要手动调整的问题，图表样式如字体大小等也能随之自动调整。通过简单的安装和使用方法，轻松实现图表的自适应。

摘要由CSDN通过智能技术生成

echart在改变容器尺寸时需要手动调用resize才能做到图表变化
但是设置的fontsize，with这些参数还是无法改变
本插件解决这一问题
如有帮助给颗star源码

auto-size-echart

根据容器大小自动缩放echarts

本地测试

App.vue为测试页面

git clone https://github.com/wj100/auto-size-echart.git

yarn

yarn dev

使用方法

1. 安装

yarn add auto-size-echart

1. 使用

import AutoSizeEchart from 'auto-size-echart';
//options对象的键对应容器id
const options={
    chart1: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
            },
          ],
        },
}
 let autoSizeEchart = new AutoSizeEchart(options);
 autoSizeEchart.init();