工作日志：ruoyi-vue-plus echarts根据窗口大小变化

魏时烟

已于 2024-09-25 10:06:16 修改

阅读量188

点赞数 2

分类专栏：工作日志文章标签：前端 echarts vue

于 2024-09-24 18:10:06 首次发布

本文链接：https://blog.csdn.net/qq_42812154/article/details/142487814

版权

工作日志专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1、echarts根据窗口大小变化。

onMounted(() => {
  // 折线图
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById('chartDom')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  option = {
    grid: {
      left: '35',
      top: 10,
      bottom: 30,
      right: 10
    },
    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'
      }
    ]
  };

  option && myChart.setOption(option);

  // 为窗口大小改变添加事件监听
  window.onresize = () => {
    // 调用ECharts实例的resize方法
    myChart.resize();
  };
});

2、打开页面后，跟开着定时器一样连续不断报错。
在这里插入图片描述
不知道为什么，刷新就好了。

3、修改elementplus中的table背景色和边框。

.el-table {
    border: 1px solid #EBEEF5;
}

.el-table:not(.el-table--border) .el-table__cell {
    border-right: 1px solid #EBEEF5 !important;
}
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
    background-color: #fff !important;
}
.el-scrollbar {
    border-right: 1px solid #EBEEF5;
}