react封装echarts,vue项目引入echarts
这篇文章主要介绍了在某视频剪辑软件项目中封装展示的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
为什么需要封装echarts
每个开发者在制作图表时都需要从头到尾书写一遍完整的选择权配置，十分冗余
在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作
可能有一些开发者忘记考虑展示更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了展示视图却没有更新，窗口缩放引起展示图形变形问题
我希望这个echarts组件能设计成什么样
业务数据和样式配置数据分离，我只需要传入业务数据就行了
它的大小要完全由使用者决定
不会因为缩放出现变形问题，而是能很好地自适应
有时候某个图表的样式可能有点不一样，希望能保留自己配置样式的灵活性
无论传入什么数据都能正确地更新视图
如果我传入的数据为空，能展示一个空状态
公共组件结构建议
当你把它书写为一个公共组件时，我我希望它应该是这样：将单独机械的配置表独立成一份文件，暴露一个必要的某视频剪辑软件单文件，同时携带一份自述文件说明文档，当然，文档里面需要有关于你写的组件的使用示例和入参含义说明，这在大型项目中非常重要。
vue单文件代码
埃沙特馅饼完整代码如下：
模板
div class=chart/div
/模板
脚本
从"洛达什"导入{合并}；
从“电子海图”导入e图；
从导入{基本选项} ./default _ option ；
从导入{颜色阵列}./color ；
从"元素-调整大小-检测器"导入ResizeListener
导出默认值{
名称：图表，
道具：{
系列数据：{
类型：数组，
必填：真，
默认值：()=[]
},
额外选项：{
类型：对象，
默认值：()=({})
}
},
data() {
返回{
图表：空
};
},
观察：{
系列数据：{
深：真的，
处理程序(){
这个。updatechartview()；
}
}
},
已安装(){
this.chart=echart.init(this .$ El)；
这个。updatechartview()；
窗户。addevent侦听器( resize ，this。handlewindowresize)；
这个。addchartsizelistener()；
},
销毁前(){
窗户。removeeventlistener( resize ，this。handlewindowresize)；
},
方法：{
/**
* 将业务数据加入到基础样式配置中
* @返回{对象}完整的统计图配置
*/
assembedadatoption(){
const formatter=name={
常量合计=this。系列数据。reduce((ACC，cur)=acc cur.value，0)；
常量数据=this。系列数据。find(item=item。name===name) { }；
常数百分比=数据值
？` $ {数学。圆((数据。值/总计)* 100)} % `
: 0%;
返回" { a $ { name } } { b $ { percent } } "；
};
返回合并（
{},
基本选项，
{颜色：颜色阵列}
{
图例：{ formatter }，
系列：[{ data: this.seriesData }]
},
这个。额外的选项
);
},
/**
* 对图表元素尺寸进行监听，当发生变化时同步更新统计图视图
*/
addchartsizelistener(){
const instance=ResizeListener({
策略："滚动",
卡罗纳德：没错
});
instance.listenTo(this .$el，()={
如果(!this .图表)返回；
这个。图表。resize()；
});
},
/**
* 更新统计图视图
*/
updateChartView() {
如果(!this .图表)返回；
const full选项=this。assembled atooption()；
这个。图表。setoption(全选项，真)；
},
/**
* 当窗口缩放时，echart动态调整自身大小
*/
handleWindowResize() {
如果(!this .图表)返回；
这个。图表。resize()；
}
}
};
/脚本
style lang=less 范围。图表{
宽度：100%;
身高：100%;
}
/风格
指数完整代码如下：
模板
van-empty v-if=isSeriesEmpty /
图表-饼图v-else v-bind=$props /
/模板
脚本
从"洛达什"导入{ isEmpty }；
从导入图表/echart _ pie。vue ；
导出默认值{
姓名：“EchartPie”，
组件：{ ChartPie }，
道具：ChartPie.props，
计算值：{
isSeriesEmpty() {
返回(
isEmpty(this . series data) this . series data . every(item=！项目.值)
);
}
}
};
/脚本
关于源码的说明
在源代码中，我使用了lodash的一个公共函数merge，这意味着递归地将源对象本身和继承的可枚举属性合并到目标对象中。的后续源对象属性会覆盖同名的先前属性。
我有幸喜欢的另一个功能是iSompty。当我的传入业务数据为空时，比如空数组[]、未定义、null，就会被认为是无数据的情况。此时，我们将显示一个空组件，它可能由背景图像组成；
当绑定到一个特定的DOM元素时，我没有使用querySelector选择器来选择一个类或Math.random生成的id，因为它们都不是绝对可靠的。我直接使用了与当前vue示例相关联的根DOM元素$el。
我监控窗口大小的变化，并添加相应的事件处理函数——echarts的resize方法，这样e charts的图形就不会变形。
将对应DOM的宽度和高度设置为100%，这样它的大小完全由用户提供的容器控制。
setOption方法的第二个参数指示传入的新选项是否不会与以前的旧选项合并。默认值为false，即合并。显然，这是行不通的。我们需要每个业务配置完全独立。
命名很有语义，一看就懂。
保留您需要单独配置一些自定义样式的灵活性，即extraOption。
default_option.js应该包括哪些内容
一般情况下，暴露一个基本配置BASIC_OPTION就够了。
元素调整检测器是做什么的？
这是一个监视DOM元素大小变化的插件。我们已经监控了窗口缩放，但是有时它的父容器的大小会动态变化。
我们监控父容器的宽度。当父容器的大小改变时，echart可以调用自己的resize方法来保持视图正常。
当然，这并不适用于tab tab的情况。在tab中，父容器从display:none到拥有实际clientWidth可能是在注册resizeDetector之前完成的，所以开始监听父容器调整大小可能为时已晚。
这种情况很容易出现在选项卡tab中：
它看起来很滑稽，只是有点大。要解决这个问题，最有效的方法就是在切换tab时通过ref手动获取echart实例，手动调用resize方法，这是最安全有效的。
组件使用示例
模板
div class=echart-pie-wrap
echart-pie:series-data= dataList :extra-option= extra option /
/div
/模板
脚本
从“@/components/e charts/e chart _ pie”导入EchartPie
导出默认值{
组件：{ EchartPie }，
data() {
返回{
数据列表：[
{
名称：西瓜，
价值：20
},
{
名称：“橙色”，
数值：13
},
{
名称：“杨桃”，
价值：33
}
],
额外选项：{
颜色：[ #fe883a ， #2d90d1 ， #f75981 ， #90e2a9]
}
}
}
}
/脚本
style lang=less 范围。echart-wrapper {
宽度：300px
高度：300px
边距：10px自动；
}
/风格
效果图
当数据正常时，效果如下
没有数据时，效果如下
关于灵活性
这里提供的包只是一个大概的想法。在实际项目中，可能会和这里有偏差。软件开发没有银弹，很适合我的项目，可能不适合你详细阅读这篇文章。但是思路差不多，可以针对它做一些调整。
以上是vue项目中封装echarts的步骤细节。更多关于在vue项目中封装echarts的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。