vue3中echarts使用俩个y轴

在Vue3中使用echarts实现双y轴的步骤如下：

1. 在`script`标签中引入echarts库，可以使用`import echarts from 'echarts';`语句进行引入。

2. 在`mounted`钩子函数中创建echarts实例对象，并将配置项设置给该实例对象。配置项包括标题组件、提示框组件、图例组件、工具箱组件、网格配置、x轴配置、y轴配置以及系列图标配置等。可以根据需要设置双y轴的相关配置项，例如在x轴配置中设置坐标轴类型为'category'，在y轴配置中设置第一个y轴为'value'类型，第二个y轴为'log'类型，通过设置`splitLine`参数实现双y轴的显示效果。

3. 处理数据方面，可以先找到当前echarts数据中的最大值和最小值，然后获取离最大或最小值最近的整数位，并进行等分。可以使用`Math.ceil()`和`Math.floor()`函数来处理最大最小值，然后根据需要进行刻度的设置。

综上所述，在Vue3中实现双y轴的步骤包括引入echarts库、设置echarts实例的配置项，以及处理数据中的最大最小值和刻度设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [echarts 折线图 设置y轴最小刻度_vue中引入echarts及基础配置详解](https://blog.csdn.net/weixin_39910043/article/details/110135139)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue-echarts 双Y轴保持Y轴分割线等分](https://blog.csdn.net/weixin_42623929/article/details/130742263)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]