下面是基于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技术站
微信扫一扫 
支付宝扫一扫 