Vue中ECharts组件的封装与使用

创作时间:

作者:

@小白创作中心

Vue中ECharts组件的封装与使用

引用

CSDN

https://m.blog.csdn.net/m0_46183499/article/details/136866305

ECharts 是一个基于 JavaScript 的开源可视化库，广泛应用于数据可视化和图表展示。在 Vue 项目中封装 ECharts 组件，可以提高代码复用性和开发效率。本文将详细介绍如何在 Vue 项目中封装 ECharts 组件，让读者能够快速上手并应用到实际项目中。

一、业务场景

在 Vue 项目中使用 ECharts 时，经常会遇到需要多次使用各种图表的情况。为了提高代码复用性和开发效率，我们可以将 ECharts 封装成一个可复用的组件。这样不仅可以避免重复编写相同代码，还能使代码结构更加清晰。

二、具体实现步骤

1. 安装 ECharts

首先需要在项目中安装 ECharts。在终端中运行以下命令：

npm install echarts --save

2. 在 main.js 中引入 ECharts

根据 ECharts 的版本不同，引入方式也有所不同。以下是两种版本的引入方式：

5.0 以上版本

import * as echarts from 'echarts'

5.0 以下版本

import echarts from 'echarts'

然后将 ECharts 注册到 Vue 的原型上：

Vue.prototype.$echarts = echarts

3. 创建图表组件（Echarts）

创建一个名为 MyCharts 的组件，用于封装 ECharts 的基本功能。组件接收数据源、画布宽度和高度作为 props。

<template>
  <div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div :id="uuid" :style="style"></div>
  </div>
</template>
<script>
export default {
  name: "MyCharts",
  props: {
    dataSource: {
      type: Object,
      default: null,
      require: true
    },
    canvasWidth: {
      type: String,
      default: '',
      require: true
    },
    canvasHeight: {
      type: String,
      default: '',
      require: true
    },
  },
  data() {
    return {
      uuid: undefined,
      myChart: null,
    }
  },
  computed: {
    style() {
      return {
        width: this.canvasWidth,
        height: this.canvasHeight
      }
    }
  },
  created() {
    // 时间戳+随机字符
    this.uuid = new Date().getTime() + Math.random().toString(32).slice(2, 10)
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById(this.uuid));
      // 绘制图表
      this.myChart.setOption(this.dataSource);
    }
  }
}
</script>
<style scoped>
</style>

4. 准备数据源

在 src 目录下新建一个 dataSource.js 文件，用于存放图表的数据源。

export const dataSource2 = {
  title: {
    text: 'Are you OK?'
  },
  tooltip: {},
  xAxis: {
    data: ['魄力', '建议', '先干', '成了', '马拉松', '成败得失']
  },
  yAxis: {},
  series: [
    {
      name: '小米',
      type: 'bar',
      data: [60, 45, 52, 38, 49, 55]
    }
  ]
}
export const dataSource = {
  title: {
    text: '生死看淡，不服就干'
  },
  tooltip: {},
  xAxis: {
    data: ['梦想', '坚持', '力量', '美好', '坚韧', '东西']
  },
  yAxis: {},
  series: [
    {
      name: '雷总',
      type: 'bar',
      data: [50, 80, 66, 70, 69, 71]
    }
  ]
}

5. 在父组件中使用封装好的图表组件

在需要使用图表的父组件中引入 MyCharts 组件，并传入数据源和画布尺寸。

<template>
  <div>
    <MyCharts :dataSource="dataSource" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"></MyCharts>
    <MyCharts :dataSource="dataSource2" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"></MyCharts>
  </div>
</template>
<script>
import MyCharts from "@/components/mycharts/MyCharts";
import { dataSource, dataSource2 } from "@/dataSource";
export default {
  name: "CrudPage",
  components: { MyCharts },
  data() {
    return {
      canvasWidth: '600px',
      canvasHeight: '400px',
      dataSource: dataSource,
      dataSource2: dataSource2
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style scoped>
</style>