vue中封装echarts公共组件过程

下面是基于Vue2.x版本的封装echarts公共组件的完整攻略。

1. 准备工作

首先，我们需要引入echarts的依赖，这可以通过npm或CDN两种方式实现。

npm方式

在项目的根目录打开终端，输入以下命令安装echarts

npm install -S echarts

CDN方式

在根目录的index.html中引入echarts的js和css文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Echarts Demo</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>
    <!-- 引入 echarts.css -->
    <link href="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/build.js"></script>
  </body>
</html>

2. 创建组件

我们可以在Vue中创建一个全局或局部的组件，用于封装echarts图表。以柱状图为例：

<template>
  <div class="chart"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'bar-chart',
  props: {
    // echarts所用的option
    option: {
      type: Object,
      required: true
    },
    // 图表容器所用的样式
    style: {
      type: Object,
      default () {
        return { width: '100%', height: '400px' }
      }
    }
  },
  mounted () {
    // 初始化echarts
    let chart = echarts.init(this.$el)
    // 为echarts设置option
    chart.setOption(this.option)
    // 监听窗口大小变化，重新绘制图表
    window.addEventListener('resize', () => chart.resize())
    // 将echarts实例保存在$this中，后续可用于调用echarts方法
    this.$chart = chart
  },
  // 当组件销毁时，同时销毁echarts实例
  beforeDestroy () {
    if (this.$chart) {
      this.$chart.dispose()
      this.$chart = null
    }
  }
}
</script>

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

3. 使用组件

使用组件非常简单，只需要在需要显示图表的地方，引入和传入组件即可。以柱状图组件为例：

<template>
  <bar-chart :option="barOption"></bar-chart>
</template>

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

export default {
  name: 'app',
  components: {
    BarChart
  },
  data () {
    return {
      // 柱状图的option
      barOption: {
        title: {
          text: '柱状图'
        },
        tooltip: {},
        legend: {
          data:['销量']
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  }
}
</script>

4. 示例说明

示例1

在Vue的脚手架工具中创建一个新项目，然后创建一个柱状图组件，在该组件中添加echarts的依赖，并封装echarts图表。最后，在组件中引入柱状图组件并传入option，以显示柱状图。

步骤如下：

创建vue项目

shell vue create vue-echarts-demo

安装echarts依赖

shell npm install -S echarts

创建BarChart.vue文件

```html

```

使用BarChart组件

```html

```

运行项目并查看效果

shell npm run serve

示例2

在Vue的脚手架工具中创建一个新项目，然后创建一个线性图组件，在该组件中添加echarts的依赖，并封装echarts图表。最后，在组件中引入线性图组件并传入option，以显示线性图。

步骤如下：

创建vue项目

shell vue create vue-echarts-demo

安装echarts依赖

shell npm install -S echarts

创建LineChart.vue文件

```html

```

使用LineChart组件

```html

```

运行项目并查看效果

shell npm run serve

以上两个示例都演示了如何基于Vue2.x版本封装echarts公共组件的过程。开发者可以通过以上步骤进行学习、实践和扩展，为自己的项目构建更加丰富多彩的图表拓展功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue中封装echarts公共组件过程 - Python技术站

vue中封装echarts公共组件过程

1. 准备工作

npm方式

CDN方式

2. 创建组件

3. 使用组件

4. 示例说明

示例1

示例2

相关文章