Vue3组件库打包指南，一次生成esm、esm-bundle、commonjs、umd四种格式

最新推荐文章于 2025-05-25 15:30:00 发布

原创最新推荐文章于 2025-05-25 15:30:00 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

本文档主要介绍如何使用Vue3构建组件库，并导出esm、esm-bundle、commonjs、umd四种格式。内容涵盖双Y轴配置、加载效果、无数据占位处理和标签单位添加等Echarts高级用法。同时提供了一份前端大厂面试宝典，包含HTML到TCP协议、Vue和React等多个技术领域的201道面试题解析。

echarts的基础用法就不讲了，官网上有很多demo，复制粘贴就能跑。这里主要整理一下笔者在公司中的常用配置。

1.双Y轴

当你的数据出现多条折线，而有的线条的数据很大，有的线条的数据很小，如果都统一放在一条Y轴上显示数据，则数据量小的会非常贴近X轴，这样就看不出数据的变化趋势，此时可以将数据分别展示，数据量大的在一边展示，数据量小的在另一边展示。

只需要配置好options.yAxis，然后在options.series中，给每个数据配置yAxisIndex即可，0是左边，1是右边。

options = {series: [{data: [...],type: "line",yAxisIndex: 0,},{data: [...],type: "line",yAxisIndex: 1,},...],yAxis: [{type: 'value',name: '',axisLabel: {formatter: '{value}',},alignTicks: true,axisLine: {show: true,},},{type: 'value',name: '',axisLabel: {formatter: '{value}',},alignTicks: true,axisLine: {show: true,},},],
}

2.loading效果

echarts自带了loading，在数据加载时可以调用showLoading()，取消加载时可以用hideLoading()。

3.no-data占位

echarts没有提供什么好的no-data占位，只能用title魔改。当没有数据的时候，首先是手动清空X轴和Y轴，然后再添加title；而当有数据的时候，删除delete title。

options = {title: {text: '此时间段暂无数据',textStyle: {color: 'black',fontWeight: 'normal',fontSize: 25,},left: '45%',top: '30%',},
};

4.标签带单位

echarts的默认标签是没有带单位的，它也没有提供比较好的配置方法。但是echarts允许你自定义标签的html，此时可以在formatter的html里面添加单位。

配置如下，根据自己的项目自行更改：

option = {tooltip:{formatter: function (params) {const list: string[] = [];for (let i = 0; i < params.length; i++) {list.push(`<div style="width:250px"><i style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${params[i].color}; margin-right: 5px;"></i><span >${params[i].seriesName}</span><span style="float: right; font-weight: 800;">${params[i].data}${mapUnit[params[i].seriesName] ?? ''}</span></div>`);}return `<div><div style="text-align: center; font-weight: 800; margin-bottom: 10px;">${params[0].axisValue}</div>${list.join('')}</div>`;},}
}