前言

近期开发遇到双Y轴的折线图需求，遇到了一些问题，在这里记录分享（附完整option代码，基于vue-echarts）

1.双Y轴自定义Y轴显示样式(加 ‘%’和正常显示)
2.双Y轴鼠标划入自定义样式
3.双Y轴刻度线对齐效果

附图：

一、echatrs双Y轴案例

1.双Y轴自定义Y轴显示样式(加 ‘%’或正常显示)

代码如下（示例）：

axisLabel: {show: true,interval: 'auto',//居中显示formatter: (value) => {if (this.contrastDimensionDataA.contrastDimension == 3 || this.contrastDimensionDataA.contrastDimension == 6 || this.contrastDimensionDataA.contrastDimension == 10) return value + '%'else return value}
},

axisLabel 的 formatter函数根据条件判断返回样式显示(具体的参数可以在formatter中执行打印看看数据)

2.双Y轴鼠标划入自定义样式

代码如下（示例）：

 tooltip: {trigger: 'axis',formatter: (params) => {let date = params[0].axisValuelet name1 = params[0].seriesNamelet name2 = params[1].seriesNamelet value1 = (name1 == '成交ROI' || name1 == '下单ROI' || name1 == '点击率') ? params[0].value + '%' : this.$pubTool.formatDigit(params[0].value)let value2 = (name2 == '成交ROI' || name2 == '下单ROI' || name2 == '点击率') ? params[1].value + '%' :this.$pubTool.formatDigit(params[1].value)let str = `${date}</br> <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#E6A23C"></span> ${name1}： <span style="font-weight:700">${value1}</span></br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#409EFF"></span> ${name2}： <span style="font-weight:700">${value2}</span>`return str}},

同上，tooltip中的formatter函数控制返回显示。

3.双Y轴刻度线对齐效果

代码如下（示例）：

     {min: 0,splitNumber: 5,interval: Math.ceil(Math.ceil(Math.max(...seriesDataA)) / 5),max: Math.ceil(Math.ceil(Math.max(...seriesDataA)) / 5) * 5,name: this.contrastDimensionDataA.contrastDimensionValue,type: 'value',axisLabel: {show: true,interval: 'auto',//居中显示formatter: (value) => {if (this.contrastDimensionDataA.contrastDimension == 3 || this.contrastDimensionDataA.contrastDimension == 6 || this.contrastDimensionDataA.contrastDimension == 10) return value + '%'else return value}},},

max：一定是大于或等于数据最大值，计算找出数据中最大值向上取整
min：最小值；
splitNumber设置分割的段数，必须一致；
interval：强制设置坐标轴分割间隔，控制两边刻度比例一样才能保持刻度线对齐；

完整option代码

 //获取数据趋势OptiongetDataTrendOption(optionData) {//optionData为调用接口获取的数据if (optionData == []) return nulllet xAxisData = [];let seriesDataA = [];let seriesDataB = [];//获取X轴数据optionData.dimensionAData.forEach((item) => {xAxisData.push(item.dataDate)seriesDataA.push(item.countResult)})optionData.dimensionBData.forEach((item) => {seriesDataB.push(item.countResult)})let option = {tooltip: {trigger: 'axis',formatter: (params) => {let date = params[0].axisValuelet name1 = params[0].seriesNamelet name2 = params[1].seriesNamelet value1 = (name1 == '成交ROI' || name1 == '下单ROI' || name1 == '点击率') ? params[0].value + '%' : this.$pubTool.formatDigit(params[0].value)let value2 = (name2 == '成交ROI' || name2 == '下单ROI' || name2 == '点击率') ? params[1].value + '%' : this.$pubTool.formatDigit(params[1].value)let str = `${date}</br>   <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#E6A23C"></span> ${name1}： <span style="font-weight:700">${value1}</span></br>   <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#409EFF"></span> ${name2}： <span style="font-weight:700">${value2}</span>`return str}},xAxis: {type: 'category',data: xAxisData},yAxis: [{min: 0,splitNumber: 5,interval: Math.ceil(Math.ceil(Math.max(...seriesDataA)) / 5),max: Math.ceil(Math.ceil(Math.max(...seriesDataA)) / 5) * 5,name: this.contrastDimensionDataA.contrastDimensionValue,type: 'value',axisLabel: {show: true,interval: 'auto',//居中显示formatter: (value) => {if (this.contrastDimensionDataA.contrastDimension == 3 || this.contrastDimensionDataA.contrastDimension == 6 || this.contrastDimensionDataA.contrastDimension == 10) return value + '%'else return value}},},{min: 0,splitNumber: 5,interval: Math.ceil(Math.ceil(Math.max(...seriesDataB)) / 5),max: Math.ceil(Math.ceil(Math.max(...seriesDataB)) / 5) * 5,name: this.contrastDimensionDataB.contrastDimensionValue,type: 'value',axisLabel: {show: true,interval: 'auto',//居中显示formatter: (value) => {if (this.contrastDimensionDataB.contrastDimension == 3 || this.contrastDimensionDataB.contrastDimension == 6 || this.contrastDimensionDataB.contrastDimension == 10) return value + '%'else return value}},}],grid: {left: '1%',right: '1%',bottom: '3%',containLabel: true},series: [{color: '#E6A23C',name: this.contrastDimensionDataA.contrastDimensionValue,data: seriesDataA,type: 'line',yAxisIndex: 0},{color: '#409EFF',name: this.contrastDimensionDataB.contrastDimensionValue,data: seriesDataB,type: 'line',yAxisIndex: 1}]}this.option = option},

Echarts双Y轴图表处理相关推荐

echarts分享(四):双y轴图表刻度均匀分布问题
今天分享一个小问题,内容不多. 双y轴图表中,为了图表的美观,经常会隐藏一侧的y轴刻度线,仅显示一侧的刻度线.那么问题就来了,两个y轴的数据数值大小不同,常常会导致刻度线的刻度分布不均匀,该如何解决呢 ...
总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
echarts双Y轴（简单明了）
本文主要实现echarts双Y轴,并在此过程中解决: 实现echarts双Y轴 echarts双Y轴左右刻度线一致图例分布显示坐标轴刻度标签数值取整 X/Y轴名称的分布坐标轴刻度标签数值以某一值 ...
Echarts双Y轴刻度分割线对不齐问题
# Echarts双Y轴刻度分割线对不齐问题 > [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA) # ...
实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
echarts双y轴实现（解决刻度线不对齐）
echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
【echarts双y轴：左右轴数据分开设置最大值（解决刻度线不对齐】
echarts双y轴数值差距太大(解决刻度线不对齐) 关键代码: min: 0,//最小值 max: set_max(maxb),//最大值 interval: set_max(maxb) / 5, ...
Echarts双Y轴，右侧Y轴标签不显示
先说一下如何实现双y轴,echarts中有个控制y轴的属性叫yAxis,这个属性可以是对象也可以是数组.当我们只设置一个Y轴时,它为对象:当我们要设置多个Y轴时,它是个数组.所以我们要设置双y轴,它就 ...

Echarts双Y轴图表处理

前言

一、echatrs双Y轴案例

1.双Y轴自定义Y轴显示样式(加 ‘%’或正常显示)

2.双Y轴鼠标划入自定义样式

3.双Y轴刻度线对齐效果

完整option代码

Echarts双Y轴图表处理相关推荐

最新文章

热门文章