vue-echarts组件封装

最新推荐文章于 2024-09-07 19:48:06 发布

Eric⠀

最新推荐文章于 2024-09-07 19:48:06 发布

阅读量201

点赞数 2

文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/m0_73884922/article/details/139869989

版权

官网 "vue-echarts": "^6.6.0"

组件介绍：

使用vue-echarts + antd进行封装，不需要每次使用的时候都重复代码，且增加暂无数据展示

<template>
  <div>
    <a-empty v-if="showEmpty" :class="$style.empty" />
    <VChart v-else style="width: 100%; height: 100%" :option="option" autoresize @click="handleClick" />
  </div>
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, LineChart, BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent } from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';

provide(THEME_KEY, 'light');

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  LineChart,
  BarChart,
]);

defineProps({
  option: {
    type: Object,
    default: () => ({}),
  },
  showEmpty: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['click']);

const handleClick = (params) => {
  emit('click', params);
};
</script>
<style lang="less" module>
.empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

实现效果：