vue3中封装echarts

KAGHQ

已于 2023-04-14 00:32:19 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

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

于 2023-04-14 00:31:10 首次发布

本文链接：https://blog.youkuaiyun.com/LRQQHM/article/details/130143496

总结专栏收录该内容

51 篇文章

订阅专栏

该文章展示了一个Vue子组件，用于封装Echarts图表。子组件通过onBeforeMount生成唯一id，避免重复，并在onMounted时初始化Echarts实例，根据父组件传递的选项和样式设置图表。同时监听窗口大小变化以调整图表尺寸。父组件传递了图表数据和样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件

<template>
  <div :id="uid" :style="myStyle"></div>
</template>
<script setup>
import { onMounted, onBeforeMount, ref, defineProps, onBeforeUnmount, onUnmounted } from 'vue';
import * as echarts from 'echarts';
// 因为是封装的组件，会多次调用，id不能重复，要在初始化之前写，不然会报错dom为定义
let uid = ref('');
onBeforeMount(() => {
  uid.value = `echarts-uid-${parseInt((Math.random() * 1000000).toString())}`;
});

onMounted(() => {
  let myChart = echarts.init(document.getElementById(uid.value));
  // 在template中可以直接取props中的值，但是在script中不行，因为script是在挂载之前执行的
  myChart.setOption(props.myOption, {
    notMerge: true, //不和之前的option合并
  });

  // 监听页面的大小
  window.addEventListener('resize', () => {
    setTimeout(() => {
      myChart?.resize({
        animation: {
          duration: 300,
        },
      });
    }, 300);
  });
});

const props = defineProps({
  myStyle: {
    type: Object,
    default: () => ({
      width: '100%',
      height: '100%',
    }),
  },
  myOption: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});
</script>

父组件

<template>
  <div class="card">
    <current-echarts :myOption="chartLineData" :myStyle="{ width: '273px', height: '330px' }"></current-echarts>
  </div>
</template>
<script>
import CurrentEcharts from '../../../components/CurrentEcharts.vue';
import { onMounted, reactive, toRefs, getCurrentInstance, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  name: 'ehartLine',
  components: {
    CurrentEcharts
  },
  props: {

  },
  setup(props) {
    const chartLineData = {
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          data: [
            { value: 335, name: 'A' },
            { value: 310, name: 'B' },
            { value: 234, name: 'C' },
            { value: 135, name: 'D' },
            { value: 1548, name: 'E' }
          ]
        }
      ]
    }
    onMounted(() => {
    })
    onUnmounted(() => {

    })
    return {
      chartLineData
    };
  },
};
</script>


<style lang="scss" scoped>
.card {
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #E7EBF2;
  border-radius: 5px;

  .title {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #34383E;
    padding: 20px 25px 18px 0;
    border-bottom: 1px solid #EEF1F5;
  }
}
</style>