nzwl2020

在现在开发的项目中, ECharts 已成为不可或缺的可视化工具，通常我们会将 ECharts 封装为组件以便重复使用，但随着项目规模扩大，图表的使用频率增加，代码重复和维护成本也随之上升，甚至影响开

作为一名前端er，数据可视化是日常工作中不可或缺的一部分。ECharts 凭借其强大的功能和丰富的图表类型，一直是我的首选。 最近，我尝试用 Vue3 结合 ECharts 实现了一些炫酷的立体柱状图

关键点在于获取当前实例。按需引入文件引入main.js，通过app.config.globalproperties挂载到全局，并通过getCurrentInstance得到实例。

因为 ECharts 的使用场景及其广阔，并且定制化的场景比较多，所以就不封装可以复用的组件了，在我看来，echarts封装更好用就行了

项目中经常用到echarts，不做封装直接拿来使用也行，但不可避免要写很多重复的配置代码，封装稍不注意又会过度封装，丢失了扩展性和可读性。始终没有找到一个好的实践，偶然看到一篇文章，给了灵感。找到了一

前言 在数据可视化领域，ECharts无疑是前端开发者的首选工具之一。随着Vue3和TypeScript的普及，如何优雅地将ECharts集成到现代前端项目中成为了一个值得探讨的话题。本文将带你从零开

如果需要复杂的图表样式，echarts 自带的 series 类型无法满足，那么就可以使用 custom 类型，这时就需要通过 canvas 手动绘制图表的形状了。

解决办法 1. xAxis.axisLabel 属性 如果x轴的文字如果太长会受到遮挡，这个时候可以用grid属性解决。 解决方法 2. 调用formatter文字竖直显示 当文字不是特别长的情况下可设置文字自动换行，调用formatter回调函数实现。 试一下两个字换行。如下…

没有废话，直接上（链接）代码。爬坑无数，干货满满 开始操作😏 vue3项目默认在vite.config.ts文件中进行配置/自定义的vite文件 guthub源代码地址：https://github.