vue3中使用echart,彻底解决宽度100%变成100px

使用echart最让人头疼的就是尺寸大小的设置,经常性的出现不符合预期的效果。

  • 问题1:当把width设置是有tab时,切换显示的尺寸一直是100px;

  • 解决办法:放弃事业tab,换成el-radio组件,效果不错。

  • 问题2:没有使用element的tab组件,仍然出现了该现象。

  • 解决办法:把生成echart的元素包装成一个单独的子组件,在使用的地方引入包装后的该组件,然后在调用地方的外层组件中,使用v-if进行控制。这样就可以完美显示正常尺寸。

网上也看了很多解决方法,实验了很多不生效。最终使用上面的2个办法解决了目前我遇到的问题,希望对你有帮助。

下面是我在项目中封装的MyChart.vue组件。

<template>
  <div class="line-chart">
    <div ref="lineChart" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, GraphicComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  GridComponent,
  TooltipComponent,
  GraphicComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
let myChart: any = null;
const lineChart = ref();
const props = defineProps({
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
  chartOption: {
    type: Object,
    default: () => {
      return {
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          x: 35,
          y: 15,
          x2: 5,
          y2: 5,
          borderWidth: 1,
        },
        series: [],
      };
    },
  },
});
watch(
  () => props.chartOption,
  (propData) => {
    nextTick(() => {
      chartResize();
      myChart?.setOption(propData, true);
    });
  },
  { deep: true, immediate: true }
);
onMounted(() => {
  myChart = echarts.init(lineChart.value);
  myChart?.setOption(props.lineData, true);
  window.addEventListener('resize', chartResize);
});
onUnmounted(() => {
  myChart?.dispose();
  window.removeEventListener('resize', chartResize);
});
const chartResize = () => {
  myChart?.resize();
};
</script>
<style lang="scss" scoped>
#lineChart {
  width: 100%;
  height: 300px;
}
</style>

在使用的地方进行引入调用即可

<MyChart
    :lineOption="lineOption"
    v-if="chartData.length>0"
    height="200px"
/>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值