本文详细介绍如何在Vue项目中将ECharts二次封装为通用组件。通过定义_id、_chartData等Props实现数据驱动，利用watch监听数据变化触发重绘，支持折线图、柱状图及饼图等多种类型，帮助开发者快速集成图表功能。
Vue封装ECharts组件教程
前言
本文主要介绍在Vue.js环境中，如何将ECharts封装为可复用的组件，以便开发者能够便捷地调用。以下内容供参考学习，具体实现细节如下文所述。
封装背景与目标
说明
在开发项目中，为了更直观地展示数据，通常会使用图表控件。提到图表控件，ECharts作为开源项目是首选之一。然而，与iview、element-ui等组件库相比，ECharts的使用流程较为繁琐，需要额外的处理步骤。为了简化开发流程，本文对ECharts进行了二次封装。
控件演示
组件演示与使用
组件概要
控件使用
- 概要
- 该方案基于ECharts进行二次封装，核心逻辑由数据驱动。
- 完整的控件源码位于src/components/charts目录下。
组件文档与Props配置
文档
props
| 属性 | 说明 | 类型 |
|---|---|---|
| _id | 图表唯一标识，当id重复将会报错 | String |
| _titleText | 图表标题 | String |
| _xText | x轴描述 | String |
| _yText | y轴描述 | String |
| _chartData | 图表数据 | Array |
| _type | 图表类型，提供三种(LineAndBar/LineOrBar/Pie) |
调用示例
<chart
:_id="'testCharts'"
:_titleText="'访问量统计'"
:_xText="'类别'"
:_yText="'总访问量'"
:_chartData="chartData"
:_type="'Pie'"></chart>
//测试数据样例 [["类别1",10],["类别2",20]]实现原理
调用示例
DOM创建
<template>
<div :id="_id" class="chart"></div>
</template>绘制逻辑
实现方式
function drawPie(chartData,id,titleText,xText,yText) {
var chart = echarts.init(document.getElementById(id))
var xAxisData = chartData.map(function (item) {return item[0]})
var pieData = []
chartData.forEach((v,i)=>{
pieData.push({
name:v[0],
value:v[1]
})
})
chart.setOption({
title : {
text: titleText,
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: xAxisData
},
series : [
{
name: xText,
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}数据监听与重绘
创建一个待渲染的dom
watch:{
_chartData(val){
switch (this._type){
case "LineAndBar":
drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
break
case "LineOrBar":
drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
break
case "Pie":
drawPie(val,this._id,this._titleText,this._xText,this._yText);
break
default:
drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
break
}
}
},
mounted() {
switch (this._type){
case "LineAndBar":
drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
case "LineOrBar":
drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
case "Pie":
drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
default:
drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
}
}总结
绘制函数