本文主要介绍了在vue项目中封装echarts的步骤，以帮助大家更好地理解和使用vue。有兴趣的朋友可以理解。

你为什么需要包装电子艺术品

每个开发人员在制作图表时都需要从头到尾写一个完整的选项配置，这是非常多余的

在同一个项目中，各种图表设计非常相似甚至相同，不需要一直重复工作

一些开发人员可能会忘记考虑echarts更新数据的特性和窗口缩放的适应性。这会导致数据更新echart视图，但不会更新它，并且窗口缩放会导致echart图形变形

我希望这个电子艺术组件能被设计成什么

业务数据和样式配置数据是分开的，所以我只需要传入业务数据

它的大小完全由用户决定

不会因为缩放而出现变形问题，但是可以很好的适应

有时候一个图表的风格可能会有点不一样，希望自己保持配置风格的灵活性

无论传入什么数据，视图都可以正确更新

如果我传入的数据是空的，它可以显示为空状态

关于常用构件结构的建议

当你把它写成一个公共组件的时候，我希望应该是这样的：把单机的配置表分离成一个文件，公开一个必要的vue单个文件，并携带一个README描述文档。当然，文档需要有关于你写的组件的用法示例和参考意义描述，这在大型项目中非常重要。

Vue单文件代码

echart_pie的完整代码如下：

模板

div class='chart'/div

/模板

脚本

从“lodash”导入{ merge }；

从“echart”导入echart；

从“”导入{ BASIC_OPTION }。/default _ option '；

从导入{ COLOR_ARRAY }./color '；

从“element-resize-detector”导入ResizeListener

导出默认值{

名称： '图表'，

props: {

seriesData: {

类型：数组，

required: true，

default: ()=[]

},

extraOption: {

类型：对象，

default: ()=({})

}

},

data() {

返回{

chart: null

};

},

watch: {

seriesData: {

deep: true，

Handl唐山网站排名er() {

this . UpdateChartView()；

}

}

},

已安装(){

this.chart=echart.init(this。$ El)；

this . UpdateChartView()；

window . addeventlistener(' resize '，this . handlewindowresize)；

this . AddChartResizeListener()；

},

beforeDestroy() {

window . removeeventlistener(' resize '，this . handlewindowresize)；