vue3+ts中封装echarts

最新推荐文章于 2024-07-05 10:34:38 发布

凯撒Kaiser

最新推荐文章于 2024-07-05 10:34:38 发布

阅读量467

点赞数

文章标签： echarts vue.js typescript

本文链接：https://blog.csdn.net/Mike_haohao/article/details/131424283

版权

本文介绍如何在Vue3项目中结合TypeScript封装ECharts组件，从新建components/chart/index.vue开始，详细阐述代码实现过程，并展示了组件在页面上的实际效果，包括切换按钮的交互功能。

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

1 新建components文件下chart文件的index.vue，废话不多说，上代码

<template>
  <v-chart
    ref="myChart"
    class="echarts"
    :style="{ height: height }"
    :option="option"
    autoresize
  />
</template>

<script lang="ts" setup>
  import VChart from 'vue-echarts';
  import { computed } from 'vue';
  import _ from 'lodash';

  const props = defineProps({
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
    chartOption: {
      type: Object,
      default: () => {
        return {};
      },
    },
    height: {
      type: String,
      default: '300px',
    },
    unit: {
      type: String,
      default: '',
    },
  });

  const option = computed(() => {
    return {
      // title: _.assign({}, defaultOption.title, props.chartOption.title || {}),
      tooltip: _.assign(
        {},
        defaultOption.tooltip,
        props.chartOption.tooltip || {}
      ),
      grid: _.assign({}, defaultOption.grid, props.chartOption.grid || {}),
      legend: _.assign(
        {},
        defaultOption.legend,
        props.chartOption.legend || {}
      ),
      xAxis: _.assign({}, defaultOption.xAxis, props.chartOption.xAxis, {
        data: props.dataSourc