vue3封装简易的vue-echarts问题

下面是关于封装简易的vue-echarts的攻略。

什么是 Vue-Echarts

Vue-Echarts是一款基于 Vue.js 的 Echarts 封装组件库，它提供了一个简洁明了的 API，便于我们在 Vue.js 项目中使用 Echarts 图表库。它能够帮助我们快速实现各种图表，提高了我们的开发效率。

Vue3封装简易的Vue-Echarts

安装依赖包

在使用 Vue3 封装简易的 Vue-Echarts 组件之前，我们需要先安装 Echarts 和 Vue-Echarts。可以使用 npm 或 yarn 安装。

npm install echarts vue-echarts

新建一个 ECharts.vue 组件

在 components 目录下新建一个 ECharts.vue 文件，代码如下：

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

<script>
import VueECharts from 'vue-echarts'

export default {
  name: 'ECharts',
  props: {
    width: {
      type: [String, Number],
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '400px'
    },
    options: {
      type: Object,
      require: true,
      default: () => ({})
    }
  },
  components: {
    VueECharts
  },
  mounted() {
    this.renderChart(this.options)
  },
  methods: {
    renderChart(options) {
      if (!options) {
        return
      }

      const chart = this.$refs.chart

      if (!chart) {
        return
      }

      const myChart = this.$echarts.init(chart)

      myChart.setOption(options)
    }
  }
}
</script>

<style>
  .echarts {
    width: 100%;
    height: 400px;
  }
</style>

在该组件中，我们接收了三个 props：

• width：设置图表宽度，默认值为 '100%'。
• height：设置图表高度，默认值为 '400px'。
• options：Echarts 配置项，必传，没有默认值。

在 mounted 生命周期函数中，我们调用 renderChart 方法来渲染图表，该方法通过 this.$refs.chart 来获取到一个 DOM 元素实例，然后使用 this.$echarts.init(chart) 来初始化一个 Echarts 实例。最后使用 myChart.setOption(options) 方法来绘制图表。

在业务组件中使用 ECharts 组件

在我们的业务组件中，我们可以通过引入这个 ECharts.vue 组件来使用 Echarts 图表。在业务组件中，我们需要将 Echarts 的配置项传递给 ECharts.vue 组件，并指定图表的宽度和高度。

<template>
  <div>
    <ECharts :options="options" width="100%" height="400px"/>
  </div>
</template>

<script>
import ECharts from './ECharts.vue'

export default {
  name: 'MyComponent',
  components: {
    ECharts
  },
  data() {
    return {
      options: {
        // Echarts 配置项
      }
    }
  }
}
</script>

在上面代码中，我们引入了 ECharts.vue 组件，并在该组件中传递了 options 和 width、height 三个 props。

示例说明

示例 1：绘制柱状图

这里以绘制一个柱状图为例，通过将 Echarts 的配置项传递给 ECharts.vue 组件，就可以绘制一个柱状图。

<template>
  <div>
    <ECharts :options="options" width="100%" height="400px"/>
  </div>
</template>

<script>
import ECharts from './ECharts.vue'

export default {
  name: 'MyComponent',
  components: {
    ECharts
  },
  data() {
    return {
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [425, 267, 706, 968, 541, 470, 259],
          type: 'bar'
        }]
      }
    }
  }
}
</script>

示例 2：绘制饼图

这里以绘制一个饼图为例，通过将 Echarts 的配置项传递给 ECharts.vue 组件，就可以绘制一个饼图。

<template>
  <div>
    <ECharts :options="options" width="100%" height="400px"/>
  </div>
</template>

<script>
import ECharts from './ECharts.vue'

export default {
  name: 'MyComponent',
  components: {
    ECharts
  },
  data() {
    return {
      options: {
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: [
            {value: 1048, name: '搜索引擎'},
            {value: 735, name: '直接访问'},
            {value: 580, name: '邮件营销'},
            {value: 484, name: '联盟广告'},
            {value: 300, name: '视频广告'}
          ]
        }]
      }
    }
  }
}
</script>

上面的示例代码只是作为参考，使用者可以根据自己的需求进行修改和扩展。