echarts 在vue中随窗口自适应

最新推荐文章于 2024-08-08 13:55:38 发布

微微暖风

最新推荐文章于 2024-08-08 13:55:38 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/cxz792116/article/details/88231669

版权

在Vue项目中，使用ECharts实现图表随着浏览器窗口尺寸变化而自适应的方法，通过监听窗口resize事件和ECharts的resize方法，确保图表在窗口调整时保持适配。

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

vue中使用echarts，随着浏览器窗口改变，自动响应。代码如下：

// html
<div ref="_chart" class="chart-style" />   // echarts盒子

// js
 var app = new Vue({
  el: '#app',
  data: {
   	options: {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 10
          }
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
          itemWidth: 15 ,
          itemHeight: 10 ,
          align: 'left',
          itemGap: 5 ,
          textStyle: {
            color: '#666',
            fontSize: 10
          },
          data: ['违停车辆', '占道经营', '出店经营', '乱堆物料', '非机动车停放', '店面或招牌停工', '游摊小贩', '垃圾堆放', '路面抛洒']
        },
        toolbox: {
          show: false
        },
        calculable: true,
        series: [
          {
            name: &#