封装echarts为Vue组件并不难，只需要遵循以下步骤即可。
步骤1：安装echarts和vue-echarts
使用npm安装echarts和vue-echarts依赖：
npm install echarts vue-echarts --save
步骤2：创建一个Echarts.vue组件
在src/components目录下创建一个Echarts.vue的文件，代码如下：
<template>
<div ref="chartDom" style="width:100%;height:100%;"></div>
</template>
<script>
import echarts from 'echarts';
import 'echarts-gl';
import VueECharts from 'vue-echarts'
export default {
name: 'Echarts',
extends: VueECharts,
props: {
options: {
type: Object,
default() {
return {};
}
}
},
created() {
if (this.options) {
this.chartOptions = this.options;
}
},
mounted() {
this.initChart();
},
methods: {
initChart() {
if (this.chart) {
this.chart.clear();
} else {
this.chart = echarts.init(this.$refs.chartDom);
}
this.chart.setOption(this.chartOptions);
this.$emit('ready', this.chart, echarts);
}
}
};
</script>
这段代码中，将echarts封装为了一个Vue组件。该组件使用vue-echarts库的VueECharts对象实现了对ECharts的集成。
该组件接受一个options属性，用于设置echarts的配置项。在mounted()钩子函数中，使用echarts.init()方法初始化echarts，并在initChart()方法中通过setOption()方法设置options。
同时可以看到，当Echarts实例化后，组件会触发一个事件ready，可以用来传递Echarts的实例和echarts对象library。
步骤3：使用Echarts.vue组件
在其他组件中使用Echarts.vue组件，并传递options属性。
<template>
<div>
<Echarts :options="options" @ready="onReady" />
</div>
</template>
<script>
import Echarts from '@/components/Echarts.vue';
export default {
name: 'MyComponent',
components: {
Echarts
},
data() {
return {
options: {...}
};
},
methods: {
onReady(chart, echarts) {
console.log(chart);
console.log(echarts);
}
}
};
</script>
这段代码中，使用了Echarts组件，并传递了一个options属性。同时也可以看到，当Echarts组件实例化后，会触发一个事件ready，可以在onReady()函数中获取到Echarts的实例以及echarts对象。
示例1：简单柱状图
<template>
<div>
<Echarts :options="options" />
</div>
</template>
<script>
import Echarts from '@/components/Echarts.vue';
export default {
name: 'MyComponent',
components: {
Echarts
},
data() {
return {
options: {
title: {
text: '某地区蒸发量和降水量'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['蒸发量', '降水量']
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}
};
}
};
</script>
示例2：复杂组合图表
<template>
<div>
<Echarts :options="options" />
</div>
</template>
<script>
import Echarts from '@/components/Echarts.vue';
export default {
name: 'MyComponent',
components: {
Echarts
},
data() {
return {
options: {
title: {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['蒸发量', '降水量', '平均温度']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [
'周一',
'周二',
'周三',
'周四',
'周五',
'周六',
'周日'
]
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '降水量',
type: 'bar',
yAxisIndex: 0,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
markPoint: {
data: [
{ name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
{ name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: '最大值'
},
type: 'max',
name: '最高点'
}
]
]
}
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: '最高点'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
}
};
}
};
</script>
以上就是将echarts封装为Vue组件的完整攻略以及两个示例，如果还需要更加详细的使用说明可以查看vue-echarts的官方文档。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue之将echart封装为组件 - Python技术站
微信扫一扫 
支付宝扫一扫 