在vue项目中封装e�ãȣ��ts的步骤-互联网品牌圈oem365

在vue项目中封装e�ãȣ��ts的步骤

　互联网品牌圈关注到在vue项目中封装e�ãȣ��ts的步骤

这篇文章主要介绍了在vue项目中封装echarts的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下

为什么需要封装echarts

每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余

在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作

可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题

我希望这个echarts组件能设计成什么样

业务数据和样式配置数据分离，我只需要传入业务数据就行了

它的大小要完全由使用者决定

不会因为缩放出现变形问题，而是能很好地自适应

有时候某个图表的样式可能有点不一样，希望能保留自己配置样式的灵活性

无论传入什么数据都能正确地更新视图

如果我传入的数据为空，能展示一个空状态

公共组件结构建议

当你把它书写为一个公共组件时，我我希望它应该是这样：将单独机械的配置表独立成一份文件，暴露一个必要的vue单文件，同时携带一份README说明文档，当然，文档里面需要有关于你写的组件的使用示例和入参含义说明，这在大型项目中非常重要。

vue单文件代码

echart_pie完整代码如下：

export default { name: 'ChartPie', props: { seriesData: { type: Array, required: true, default: () => [] }, extraOption: { type: Object, default: () => ({}) } }, data() { return { chart: null }; }, watch: { seriesData: { deep: true, handler() { this.updateChartView(); } } }, mounted() { this.chart = echart.init(this.$el); this.updateChartView(); window.addEventListener('resize', this.handleWindowResize); this.addChartResizeListener(); }, beforeDestroy() { window.removeEventListener('resize', this.handleWindowResize); }, methods: { /** * 将业务数据加入到基础样式配置中 * @returns {Object} 完整的echart配置 */ assembleDataToOption() { const formatter = name => { const total = this.seriesData.reduce((acc, cur) => acc + cur.value, 0); const data = this.seriesData.find(item => item.name === name) || {}; const percent = data.value ? `${Math.round((data.value / total) * 100)}%` : '0%';

return `{a|${name}}{b|${percent}}`; };

return merge( {}, BASIC_OPTION, { color: COLOR_ARRAY }, { legend: { formatter }, series: [{ data: this.seriesData }] }, this.extraOption ); },

/** * 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 */ addChartResizeListener() { const instance = ResizeListener({ strategy: 'scroll', callOnAdd: true });

instance.listenTo(this.$el, () => { if (!this.chart) return; this.chart.resize(); }); },

/** * 更新echart视图 */ updateChartView() { if (!this.chart) return;

const fullOption = this.assembleDataToOption(); this.chart.setOption(fullOption, true); },

/** * 当窗口缩放时，echart动态调整自身大小 */ handleWindowResize() { if (!this.chart) return; this.chart.resize(); } }};</script>

index完整代码如下：

export default { name: 'EchartPie', components: { ChartPie }, props: ChartPie.props, computed: { isSeriesEmpty() { return ( isEmpty(this.seriesData) || this.seriesData.every(item => !item.value) ); } }};</script>

关于源码的说明

在源码中，我用到了lodash的一个公共函数merge,它表示递归合并来源对象自身和继承的可枚举属性到目标对象。后续的来源对象属性会覆盖之前同名的属性

另外一个有幸被我宠幸的函数是isEmpty，当我传入的业务数据为空时，比如空数组[]、undefined、null时，都会被认为这是一个无数据的情况，这时候我们就展示一个空状态的组件，它可能由一张背景图构成；

在绑定到具体的DOM元素时，我没有用querySelector选择器去选择一个类或者是用Math.random生成的id，因为这两者都不是绝对可靠的，我直接使用当前vue示例关联的根DOM 元素$el

我监听窗口大小的变化，并为这种情况添加对应的事件处理函数--echarts自带的resize方法，使echarts图形不会变形

将对应DOM的宽高设为100%，让其大小完全由使用者提供的容器控制

setOption方法的第二个参数表示传入的新option是否不与之前的旧option进行合并，默认居然是false，即合并。这显然不行，我们需要每次的业务配置都是完全独立的

命名非常语义化，一看就懂

保留了自己需要单独配置一些定制样式的灵活性，即extraOption

default_option.js应该包括哪些内容

正常情况下暴露一个基础配置BASIC_OPTION就可以了

element-resize-detector是干啥的？

这是一个用于监听DOM元素尺寸变化的插件。我们已经对窗口缩放做了监听，但是有时候其父级容器的大小也会动态改变的。

我们对父级容器的宽度进行监听，当父级容器的尺寸发生变化时，echart能调用自身的resize方法，保持视图正常。

当然，这个不适用于tab选项卡的情况，在tab选项卡中，父级容器从display:none到有实际的clientWidth，可能会比注册一个resizeDetector先完成，所以等开始监听父级容器resize的时候，可能为时已晚。

在tab选项卡中很容易出现这种场景：

看起来非常的逗，只有一点点大。解决这个问题，最有效的方法还是在切换选项卡时手动去通过ref获取echart实例，并手动调用resize方法，这是最安全的，也是最有效的。

组件使用示例

export default{ components: { EchartPie }, data() { return { dataList: [ { name: "西瓜", value: 20 }, { name: "橘子", value: 13 }, { name: "杨桃", value: 33 } ], extraOption: { color: [ '#fe883a', '#2d90d1','#f75981', '#90e2a9'] } } }}

</script>

效果图

当数据正常时，效果如下

当无数据时，效果如下

关于灵活性

这里面提供的封装只是一种大概的思路，实际项目中，可能会与这里出现偏差。软件开发没有银弹可言，非常适合我这个项目的，可能在细节上不太适合看这篇文章的你。但是思路是类似的，可以对照着做一些调整。

以上就是在vue项目中封装echarts的步骤的详细内容，更多关于vue项目中封装echarts的资料请关注脚本之家其它相关文章！

来源：脚本之家

链接：https://www.jb51.net/article/202900.htm

上一篇: Vue简单实现前端权限控制的示例返回下一篇:域名被污染解决方法及DNS污染清洗方法

软文发布平台资讯中心