eCharts双坐标轴，实现刻度一致

遇到的问题：eCharts使用双y轴时，经常出现双线的情况

需要实现单线

实现方法：添加yAxis刻度的最小值和最大值及间隔即可

yAxis: [{type: 'value',// 左侧的第一个y轴同步数据分割的min: 0,max: intervalNum1Y * 5,interval: intervalNum1Y,},{type: 'value',// 第二个y轴同步数据分割的min: intervalNum1Min,max: intervalNum1Min + intervalNum1 * 5,interval: intervalNum1,},
],

min和max的值需要提前从数据源里面计算出，实际操作时取刻度的取整方法如下：

// 双坐标。 向上取整十，整百，整千，整万ceilNumber(number) {let bite = 0if (number < 10) {return 10}while (number >= 10) {number /= 10bite += 1}return Math.ceil(number) * Math.pow(10, bite)},

附：项目中的实际页面，无参考价值，个人存档

<template><a-card :bordered="false"><div class="top-title">Chart-Revenue</div><a-divider /><div class="total-wrap"><!-- chartRevenue 当月 CSC 各客户实际收入 --><div class="chart-line total-ob"><div class="left-table" style="margin-top:-15px;"><div class="m-b5-5"><span> {{ $t('proCost.commonMoneyUnitK') }} </span></div><a-tablerowKey="item":columns="columnsCSC":dataSource="dataSourceCSC":pagination="false"  :loading="loading"borderedsize="small":scroll="{ x: true }"/></div><!-- 第一个柱状图的数据， 堆叠图1 --><div class="chart1 chart-outer"><div id="RevenueChart" style="height: 500px; width: 600px; margin-left: 50px"></div></div></div><div class="chart-line month-csc"><!-- 第二个柱状图的数据，长的柱状图 --><div class="chart2 chart-outer2"><div id="RevenueChart2" style="height: 500px; width: 900px"></div></div><div v-show="customerNum > 6" class="chart2 chart-outer2"><div id="RevenueChart22" style="height: 500px; width: 1000px"></div></div></div><!-- chartRevenue 当月 SDD 客户实际收入 --><div class="chart-line month-sdd"><div class="left-table"><div class="m-b5-5"><span> {{ $t('proCost.commonMoneyUnitK') }} </span></div><a-tablerowKey="item":columns="columnsCSC1":dataSource="dataSourceCSC1":pagination="false"  :loading="loading"borderedsize="small":scroll="{ x: true }"/></div><!-- 第三个柱状图的数据， 堆叠图2 --><div class="chart3 chart-outer"><div id="RevenueChart3" style="height: 500px; width: 600px; margin-left: 50px"></div></div></div><!-- chartRevenue 当月 SET 客户实际收入 --><div class="m-b5-5"><span> {{ $t('proCost.commonMoneyUnitK') }} </span></div><div class="chart-line month-set"><div class="left-table"><a-tablerowKey="item":columns="columnsCSC2":dataSource="dataSourceCSC2":pagination="false"  :loading="loading"borderedsize="small":scroll="{ x: true }"/></div><!-- 第四个柱状图的数据，堆叠图3 --><div class="chart4 chart-outer"><div id="RevenueChart4" style="height: 500px; width: 600px; margin-left: 50px"></div></div></div><!-- chartRevenue 全年客户实际收入 --><!-- <div class="m-b5-5"><span> {{ $t('proCost.commonMoneyUnitK') }} </span></div> --><div class="chart-line total-csc"><div class="left-table"><a-tablerowKey="item":columns="columnsCSC3":dataSource="dataSourceCSC3":pagination="false"  :loading="loading"borderedsize="small":scroll="{ x: true }"/></div></div><div class="chart-line total-csc"><!-- 第五个柱状图的数据，长的柱状图 --><div class="chart5 chart-outer2"><div id="RevenueChart5" style="height: 500px; width: 900px; margin-left: 50px"></div></div><div v-show="customerNumYear > 6" class="chart5 chart-outer2"><div id="RevenueChart55" style="height: 500px; width: 1000px; margin-left: 50px"></div></div></div><!-- chartRevenue 全年客户实际收入-瀑布图 --><div class="chart-line total-waterfall chart-outer"><div id="RevenueWaterFall" style="height: 500px; width: 1200px"></div></div></div></a-card>
</template><script>
import { ActChartRevneue } from '@/api/api'
export default {components: {},name: 'ChartRenvenue',data() {return {loading:false,// 表格类数据dataSourceCSC: [], //第一个表格数据dataSourceCSC1: [], //第二个表格数据dataSourceCSC2: [], //第三个表格数据dataSourceCSC3: [], //第四个表格数据// echarts类数据// 表头的动态月份monthName: '',customerNum: '',customerNumYear: '',// 双坐标轴的参数MinMonth: '', //双坐标，右侧的y轴最小值StepMonth: '', //双坐标，右侧的y轴分隔长度StepMonthY: '', //双坐标，左侧y轴的最大值MinYear: '', //双坐标，全年右侧的y轴最小值StepYear: '', //双坐标，全年右侧的y轴最小值StepYearY: '', //双坐标，全年右侧的y轴最小值}},watch: {// 监听store财年的改变,实时加载数据'$store.state.fiscalYear'() {this.getData()},},mounted() {this.getData()},methods: {// 初始化，接口数据赋值getData() {this.loading =trueActChartRevneue({fy: this.$store.getters.fiscalYear,}).then((res) => {if (res.code == 200 && res.result) {// console.log('大接口：' + res.result.month)this.monthName = res.result.month// 当月的三个表格数据this.dataSourceCSC = res.result.revenueMonth.CSCthis.dataSourceCSC1 = res.result.revenueMonth.SDDthis.dataSourceCSC2 = res.result.revenueMonth.SET// 全年的表格数据this.dataSourceCSC3 = res.result.revenueYear.CSC// 以上页面表格数据结束，以下页面图表数据开始// 瀑布图的数据this.RevenueCharts6(res.result.waterfall)// 第一,三，四个 echarts 堆叠图 res.result.stackedMonth.CSCthis.chartsStack(res.result.stackedMonth.CSC, 'RevenueChart')this.chartsStack(res.result.stackedMonth.SDD, 'RevenueChart3')this.chartsStack(res.result.stackedMonth.SET, 'RevenueChart4')// 第二，五个柱形图数据渲染。先分割数组再渲染// 先计算双坐标的数值this.calculateMonthMinMax(res.result)this.calculateYearMinMax(res.result)// this.transDataList(res.result.stackedMonth.CSC,'month')// this.transDataList(res.result.stackedYear.CSC,'year')} else {this.monthName = ''// 当月的三个表格数据this.dataSourceCSC = []this.dataSourceCSC1 = []this.dataSourceCSC2 = []// 全年的表格数据this.dataSourceCSC3 = []// 瀑布图的数据this.RevenueCharts6(null)// 第一,三，四个 echarts 堆叠图 res.result.stackedMonth.CSCthis.chartsStack(null, 'RevenueChart')this.chartsStack(null, 'RevenueChart3')this.chartsStack(null, 'RevenueChart4')// 第二，五个柱形图数据渲染this.chartsBar(null, 'RevenueChart2')this.chartsBar(null, 'RevenueChart5')this.chartsBar(null, 'RevenueChart22')this.chartsBar(null, 'RevenueChart55')}})this.loading = false},calculateMonthMinMax(res) {let a1 = res.stackedMonth.CSC[0].obDifflet a2 = res.stackedMonth.CSC[0].fctDifflet aa = a1.concat(a2)let MinMonth = Math.min.apply(null, aa)let MaxMonth = Math.max.apply(null, aa)var distance = this.ceilNumber(Number(MaxMonth) - Number(MinMonth))var step = this.ceilNumber((Number(distance) / 5) * 5)this.MinMonth = this.ceilNumber(MinMonth) - distancethis.StepMonth = steplet y1 = res.stackedMonth.CSC[0].oblet y2 = res.stackedMonth.CSC[0].fctlet y3 = res.stackedMonth.CSC[0].actlet yy = y1.concat(y2, y3)let MaxMonthY = Math.max.apply(null, yy)var distanceY = MaxMonthYvar stepY = this.ceilNumber(Number(distanceY) / 5)this.StepMonthY = stepYthis.transDataList(res.stackedMonth.CSC, 'month')},calculateYearMinMax(res) {// 右侧的y轴的计算let a1 = res.stackedYear.CSC[0].obDifflet a2 = res.stackedYear.CSC[0].fctDifflet aa = a1.concat(a2)let MinYear = Math.min.apply(null, aa)let MaxYear = Math.max.apply(null, aa)var distance = this.ceilNumber(Number(MaxYear) - Number(MinYear))var step = this.ceilNumber((Number(distance) / 5) * 5)this.MinYear = this.ceilNumber(MinYear) - distancethis.StepYear = step// 左侧都是从0 开始的最小值默认是0let y1 = res.stackedYear.CSC[0].oblet y2 = res.stackedYear.CSC[0].fctlet y3 = res.stackedYear.CSC[0].actlet yy = y1.concat(y2, y3)let MaxYearY = Math.max.apply(null, yy)var distanceY = MaxYearYvar stepY = this.ceilNumber(Number(distanceY) / 5)this.StepYearY = stepYthis.transDataList(res.stackedYear.CSC, 'year')},// 分割数组的前6位一组,剩余第二组transDataList(res, contain) {if (res[0].type.length > 6) {// 超过6个数组，分割成两个柱状图let res1 = []let objOneFirst = {}let objOneSecond = {}objOneFirst['title'] = res[0].titlelet arrTypeOne = []let arrActOne = []let arrFctOne = []let arrFctDiffOne = []let arrObOne = []let arrObDiffOne = []for (let i = 0; i < 6; i++) {let key = res[0].type[i]arrTypeOne.push(key)arrActOne.push(res[0].act[i])arrFctOne.push(res[0].fct[i])arrFctDiffOne.push(res[0].fctDiff[i])arrObOne.push(res[0].ob[i])arrObDiffOne.push(res[0].obDiff[i])objOneSecond[key] = res[1][key]}objOneFirst['type'] = arrTypeOneobjOneFirst['act'] = arrActOneobjOneFirst['fct'] = arrFctOneobjOneFirst['fctDiff'] = arrFctDiffOneobjOneFirst['ob'] = arrObOneobjOneFirst['obDiff'] = arrObDiffOneres1.push(objOneFirst)res1.push(objOneSecond)// console.log(res1)// 第二个数组let res2 = []let objTwoFirst = {}let objTwoSecond = {}objTwoFirst['title'] = res[0].titlelet arrTypeTwo = []let arrActTwo = []let arrFctTwo = []let arrFctDiffTwo = []let arrObTwo = []let arrObDiffTwo = []for (let j = 6; j < res[0].type.length; j++) {let key = res[0].type[j]arrTypeTwo.push(key)arrActTwo.push(res[0].act[j])arrFctTwo.push(res[0].fct[j])arrFctDiffTwo.push(res[0].fctDiff[j])arrObTwo.push(res[0].ob[j])arrObDiffTwo.push(res[0].obDiff[j])objTwoSecond[key] = res[1][key]}objTwoFirst['type'] = arrTypeTwoobjTwoFirst['act'] = arrActTwoobjTwoFirst['fct'] = arrFctTwoobjTwoFirst['fctDiff'] = arrFctDiffTwoobjTwoFirst['ob'] = arrObTwoobjTwoFirst['obDiff'] = arrObDiffTwores2.push(objTwoFirst)res2.push(objTwoSecond)// console.log(res2)if (contain == 'month') {this.customerNum = res[0].type.length //客户数量的参数，第二张chart的id确定是否显示this.chartsBar(res1, 'RevenueChart2')// 动态设置第二个柱形图的宽度document.getElementById('RevenueChart22').style.width = 60 + 140 * (this.customerNum - 6) + 'px'this.chartsBar(res2, 'RevenueChart22')} else {this.customerNumYear = res[0].type.length //客户数量的参数，第二张chart的id确定是否显示this.chartsBar(res1, 'RevenueChart5')// 动态设置第二个柱形图的宽度document.getElementById('RevenueChart55').style.width = 60 + 140 * (this.customerNumYear - 6) + 'px'this.chartsBar(res2, 'RevenueChart55')}} else {// 不超过6个数组，原样显示if (contain == 'month') {this.customerNum = ''this.chartsBar(res, 'RevenueChart2')} else {this.customerNumYear = ''this.chartsBar(res, 'RevenueChart5')}}},//获取通用类 堆叠图渲染数据，res 结构一致。 chart1,3,4chartsStack(res, idName) {let option = {//设置公共option参数title: {text: '', //图表标题},color: ['#4bacc6','#ffff00','#00b050','#b3a2c7','#ff33cc','#92d050','#d99694','#ff99ff','#f5bc8d','#c4bd97','#93cddd','#ff7a00','#FAC090','#B3A2C7','#C3D69B',], // 色块颜色值tooltip: {// show: true,trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'},textStyle: {align: 'left',},formatter: (param, ticket, callback) => {var str = ''for (const item of param) {item.seriesName && (str += item.marker + ' ' + item.seriesName + '：' + item.value + '<br>')}return str},},legend: {data: [], //数据标题left: '82%',top: '10%',},// 此处的grid是左侧柱状图线条部分grid: {left: '1%',right: '8%',top: '9%',bottom: '1%',width: '80%',containLabel: true,},xAxis: {data: [],},yAxis: {type: 'value',},series: [], // 此处series数据循环}// 有数据时才执行if (res == '' || res == null) {// 无数据时就置空图形option.legend.data = [] // 这个是色块的参数option.xAxis.data = [] // 这个是堆叠总数的参数option.series = []} else {// res 动态的后台数据。 idName charts渲染时的idoption.legend.data = res[0].type ? res[0].type : '' // 这个是色块的参数option.xAxis.data = res[0].title ? res[0].title : '' // 这个是堆叠总数的参数for (let i = res[0].type.length - 1; i > -1; i--) {// 根据legend中色块的顺序，逐个获取数据中的此key的let key = res[0].type[i] //第i个legend对应的客户名let objSeries = {name: key,type: 'bar',stack: '总量',barWidth: 50,label: {// show: true,color: 'black',formatter: function (params) {if (params.value == '0' || params.value == null) {return ''} else {if (params.value < 200) {return ''} else {return parseFloat(params.value).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2,})}}},},data: res[1][key], //后台接口中，此客户名下的返回数据 [xx,xx,xx]}option.series.push(objSeries)}let numSeries = {// 最后一个顶部的total总值系列定义name: '',type: 'bar',data: [0, 0, 0],color: 'red',stack: '总量',barWidth: 50,label: {show: true,position: 'top',color: 'black',fontWeight: 'bold',formatter: function getSum(params) {let matchVal = res[0].Total[params.dataIndex] // 已知 res[0].Total，依次将后台返回的total值数组赋给顶部数值标签let temp = ''if (matchVal == undefined) {temp = 0.0} else {temp = parseFloat(matchVal).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2,})}// return '{name|' + temp + '}'return temp},rich: {name: {color: '#000',fontWeight: 'bold',//  borderColor:'red',//  borderWidth:'2px',//  borderBottomWidth:'2px',padding: [5, 5, 5, 5],},},},}option.series.push(numSeries)}let myChart = this.$echarts.init(document.getElementById(idName))myChart.setOption(option, true)},//通用柱形图渲染数据，res 结构需一致。 chart2，5chartsBar(res, idName) {if (res == '' || res == null) {// 无数据时就置空图形res = [{Total: '',act: '',fct: '',fctDiff: '',ob: '',obDiff: '',title: '',type: '',},{},]}// 先计算双坐标轴的数值if (idName == 'RevenueChart5' || idName == 'RevenueChart55') {// 年的柱状var intervalNum1 = this.StepYearvar intervalNum1Min = this.MinYearvar intervalNum1Y = this.StepYearY} else {// 月份的柱状图var intervalNum1 = this.StepMonthvar intervalNum1Min = this.MinMonthvar intervalNum1Y = this.StepMonthY}// res 动态的后台数据。 idName charts渲染时的idlet option = {//设置公共option参数title: {text: 'CSC Monthly Revenue', //图表标题left: 'center',},color: ['#558ed5', '#8eb4e3', '#c6d9f1'], // 色块颜色值tooltip: {show: false,trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'},},legend: {data: res[0].title, //数据标题// data: ['OB','ACT','FCT Prev.','ACT vs. OB','ACT vs. FCT Prev.'] , //数据标题bottom: '0%',},grid: {bottom: '5%',left: '0%',top: '8%',width: '100%',containLabel: true,},xAxis: [{type: 'category',// axisTick: { show: true },data: res[0].type,},{type: 'category',data: res[0].type,show: false,},],yAxis: [{type: 'value',// 左侧的第一个y轴同步数据分割的min: 0,max: intervalNum1Y * 5,interval: intervalNum1Y,},{type: 'value',// 第二个y轴同步数据分割的min: intervalNum1Min,max: intervalNum1Min + intervalNum1 * 5,interval: intervalNum1,},],series: [], // 此处series数据循环}for (let i = 0; i < res[0].title.length; i++) {// 根据legend中色块的顺序，逐个获取数据中的此key的let key = res[0].title[i] //第i个legend对应的客户名let objSeries = {name: key,type: 'bar',barWidth: 30,barGap: '30%', //同系列三个的间距barCategoryGap: '20%', //系列间的间距// stack: '总量',label: {show: true,position: 'top',color: '#333',fontWeight: '',},emphasis: {focus: 'series',},data: [], //后台接口中，此客户名下的返回数据 [xx,xx,xx]}// 根据title的名字获取数据if (key == 'OB') {objSeries.data = res[0].ob} else if (key == 'ACT' || key == 'FCT') {objSeries.data = res[0].actobjSeries.label.fontWeight = 'bold'} else {objSeries.data = res[0].fct}option.series.push(objSeries)}// 第一个折线图的点let objSeriesLineOb = {name: 'ACT vs. OB',xAxisIndex: 1,yAxisIndex: 1,id: 'line1',name: 'lineL',type: 'line',symbolOffset: [-40, 0],itemStyle: {normal: {color: '#558ed5',lineStyle: {width: '',// color:'red',type: 'solid', //'dashed'虚线 'solid'实线},},},label: {show: true,color: '#fff',fontWeight: 'bold',formatter: function (params) {if (params.value < 0) {return '{name|' + params.value + '}'} else {return params.value}},rich: {name: {color: 'red',fontWeight: 'bold',},},// formatter: function (params) {//   return params.value == undefined ? '0.00'//     : parseFloat(params.value).toLocaleString(undefined, {//         minimumFractionDigits: 2,//         maximumFractionDigits: 2,//       })// },},data: res[0].obDiff, //后台接口中，此客户名下的返回数据 [xx,xx,xx]}option.series.push(objSeriesLineOb)// 第二个折线图的点let objSeriesLineFct = {name: 'ACT vs. FCT Prev.',xAxisIndex: 1,yAxisIndex: 1,name: 'lineL2',type: 'line',symbolOffset: [40, 0],itemStyle: {normal: {color: '#c6d9f1', //折现点的颜色lineStyle: {width: '',type: 'solid', //'dashed'虚线 'solid'实线// offset: '50%',},},},label: {show: true,color: '#000',fontWeight: 'bold',formatter: function (params) {if (params.value < 0) {return '{name|' + params.value + '}'} else {return params.value}},rich: {name: {color: 'red',fontWeight: 'bold',},},// formatter: function (params) {//   return params.value == undefined ? '0.00'//     : parseFloat(params.value).toLocaleString(undefined, {//         minimumFractionDigits: 2,//         maximumFractionDigits: 2,//       })// },},data: res[0].fctDiff, //后台接口中，此客户名下的返回数据 [xx,xx,xx]}option.series.push(objSeriesLineFct)//==============================================if (idName == 'RevenueChart5' || idName == 'RevenueChart55') {//全年的柱状要修改标题option.title.text = 'CSC ' + this.$store.getters.fiscalYear + ' Total Revenue'}let myChart = this.$echarts.init(document.getElementById(idName))myChart.setOption(option, true)},// 双坐标。 向上取整十，整百，整千，整万ceilNumber(number) {let bite = 0if (number < 10) {return 10}while (number >= 10) {number /= 10bite += 1}return Math.ceil(number) * Math.pow(10, bite)},//获取第6个瀑布图的数据RevenueCharts6(res) {// 增加了空数据的echarts处理if (res == '' || res == null) {res = []res.negative = []res.positive = []res.title = []res.total = []}let myChart = this.$echarts.init(document.getElementById('RevenueWaterFall'))let colorLinearBlue = new this.$echarts.graphic.LinearGradient(1,0,0,0, // 这四个是设置渐变方向的[{ offset: 0, color: '#14B6F1' }, //柱图渐变色{ offset: 0.4, color: '#edf9fe' }, //柱图渐变色{ offset: 0.5, color: '#FEFFFF' }, //柱图渐变色{ offset: 0.6, color: '#edf9fe' }, //柱图渐变色{ offset: 1, color: '#14B6F1' }, //柱图渐变色])let colorLinearRed = new this.$echarts.graphic.LinearGradient(1,0,0,0,// 这四个是设置渐变方向的[{ offset: 0, color: '#b71a1a' }, //柱图渐变色{ offset: 0.4, color: '#f7eaea' }, //柱图渐变色{ offset: 0.5, color: '#FEFFFF' }, //柱图渐变色{ offset: 0.6, color: '#f7eaea' }, //柱图渐变色{ offset: 1, color: '#b71a1a' }, //柱图渐变色])myChart.setOption({title: {text: 'CSC TTL Revenue OB vs FCT vs FCT Prev.',left: 'center',top: '20px',},tooltip: {show: false,trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'line', // 默认为直线，可选为：'line' | 'shadow'},formatter: function (params) {var tarif (params[1].value !== null) {tar = params[1] + 'aa'} else {tar = params[0] + 'bb'}return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value},},// legend: {//   data: ['增加', '减少'],//   right: '1%',// },grid: {left: '1%',right: '5%',bottom: '3%',containLabel: true,},xAxis: {type: 'category',splitLine: { show: false },axisLabel: {// interval: 0, //显示所有X轴信息rotate: 40, //倾斜度 -90 至 90 默认为0// margin: 15, //设置标签与x 轴得距离textStyle: {// fontWeight: 'bolder',color: '#333',},},data: res.title,},yAxis: {type: 'value',axisLabel: {margin: 10, // 清除默认间距},// nameTextStyle: {// Width: '150px',// },},series: [{// 辅助-总量name: '辅助',type: 'bar',stack: '总量',label: {show: false,},itemStyle: {color: 'rgba(0,0,0,0)',},emphasis: {itemStyle: {color: 'rgba(0,0,0,0)',},},data: res.total,},{// 总量-增加name: '增加',type: 'bar',stack: '总量',label: {//设置柱子上的数字的 标签的文字show: true,position: 'inside',// position: 'inside',textStyle: {color: '#000',// fontWeight: 'bolder',},formatter: function (params) {let aa = ''if (params.value == undefined) {aa = 0.0} else {aa = parseFloat(params.value).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2,})}if (params.name == 'OB' || params.name == 'FCT' || params.name == 'FCT Prev.') {return '{name|' + aa + '}'} else {return '{name1|' + aa + '}'}},rich: {name: {color: '#000',fontSize: 15,fontWeight: 'bold',},name1: {color: '#000',},},},itemStyle: {//设置柱子的通用颜色样式// normal: {//   color: '#37c1f3',// },color: function (params) {if (params.name == 'OB') {return '#4F81BD'} else if (params.name == 'ACT' || params.name == 'FCT') {return '#9BBB59'} else if (params.name == 'FCT Prev.') {return '#8064A2'} else {return colorLinearBlue}},},data: res.positive,},{// 总量-减少name: '减少',type: 'bar',stack: '总量',label: {//设置柱子上的数字的show: true,position: 'inside',textStyle: {color: 'red', // 减少的显示红色// fontWeight: 'bolder',},formatter: function (params) {let aa = parseFloat(params.value).toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2,})return params.value == undefined ? '0.00' : '-' + aa},},itemStyle: {normal: {// color: '#b71a1a',color: colorLinearRed,},label: {show: true,// position : 'top',formatter: '{c}',textStyle: {color: 'purple',},},},data: res.negative,},],})},},computed: {columnsCSC: function () {return [{title: 'Rev.',align: 'center',children: [{title: this.monthName,dataIndex: 'customerName',align: 'center',},],},{title: 'CSC Monthly Revenue',children: [{title: 'OB',align: 'center',dataIndex: 'ob',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'ACT',align: 'center',dataIndex: 'act',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'FCT Prev.',align: 'center',dataIndex: 'fct',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-ACT vs. OB',align: 'center',dataIndex: 'obDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-ACT vs. FCT Prev.',align: 'center',dataIndex: 'fctDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},],},]},columnsCSC1: function () {return [{title: 'Rev.',align: 'center',children: [{title: this.monthName,dataIndex: 'customerName',align: 'center',},],},{title: 'SDD Monthly Revenue',children: [{title: 'OB',align: 'center',dataIndex: 'ob',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'ACT',align: 'center',dataIndex: 'act',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'FCT Prev.',align: 'center',dataIndex: 'fct',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-ACT vs. OB',align: 'center',dataIndex: 'obDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-ACT vs. FCT Prev.',align: 'center',dataIndex: 'fctDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},],},]},columnsCSC2: function () {return [{title: 'Rev.',align: 'center',children: [{title: this.monthName,dataIndex: 'customerName',align: 'center',},],},{title: 'SET Monthly Revenue',children: [{title: 'OB',align: 'center',dataIndex: 'ob',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'ACT',align: 'center',dataIndex: 'act',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'FCT Prev.',align: 'center',dataIndex: 'fct',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-ACT vs. OB',align: 'center',dataIndex: 'obDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-ACT vs. FCT Prev.',align: 'center',dataIndex: 'fctDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},],},]},columnsCSC3: function () {return [{title: 'Rev.',align: 'center',children: [{// title: this.monthName,dataIndex: 'customerName',align: 'center',},],},{title: 'CSC ' + this.$store.getters.fiscalYear + ' Total Revenue',children: [{title: 'OB',align: 'center',dataIndex: 'ob',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'FCT',align: 'center',dataIndex: 'act',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'FCT Prev.',align: 'center',dataIndex: 'fct',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-FCT vs. OB',align: 'center',dataIndex: 'obDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},{title: 'Diff-FCT vs. FCT Prev.',align: 'center',dataIndex: 'fctDiff',customRender: function (text) {return text == undefined? '0.00': parseFloat(text).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })},},],},]},},
}
</script><style lang="less" scoped>
@import '~@assets/less/common.less';.m-b20 {// margin-bottom: 15px;margin-top: 10px;margin-bottom: -40px;
}.chart-line {display: flex;width: 100%;flex-direction: row;flex-wrap: wrap;margin-bottom: 60px;
}
.chart-outer {min-width: 60%;overflow-x: auto;flex: 1;text-align: center;
}
.chart-outer2 {// min-width: 50%;overflow-x: auto;// flex: 1;text-align: center;
}
.left-table {// margin-top: 55px;width: 40%;min-width: 500px;margin-bottom: 30px;
}
</style>

eCharts双坐标轴，实现刻度一致相关推荐

Echarts双Y轴刻度分割线对不齐问题
# Echarts双Y轴刻度分割线对不齐问题 > [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA) # ...
echarts双坐标轴数据错乱问题
在实际开发过程中遇到一个问题,后台返回的数据是没有问题的,但是展示的时候图表数据对应不上以下是错误的效果图后来找到了原因,是series 数据中yAxisIndex 没有对应上导致的 echart ...
实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
echarts双y轴实现（解决刻度线不对齐）
echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
【echarts双y轴：左右轴数据分开设置最大值（解决刻度线不对齐】
echarts双y轴数值差距太大(解决刻度线不对齐) 关键代码: min: 0,//最小值 max: set_max(maxb),//最大值 interval: set_max(maxb) / 5, ...
Echarts时间坐标轴刻度的改进和优化
问题介绍: Echarts插件的坐标轴类型主要分为时间(time).数值(value).对数(log).类目(category)四大类,当采用二维的直角坐标系时,一般x轴通过采用类目轴,而y轴通常采用 ...
echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值
echarts 柱状图隐藏x.y轴的内容,隐藏x,y轴坐标轴.刻度线.隐藏x.y轴坐标轴的数值 1.隐藏x轴坐标轴,在xAxis下使用axisLine属性为false,相反显示则是true axisL ...
坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果 ts版本(2021/3/10补充) 结语前言因实习的公司是做大数据的,而我的工作刚好又是需要绘制一些数据图表的.绘制图表有许多现成的 ...
ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...

eCharts双坐标轴，实现刻度一致

eCharts双坐标轴，实现刻度一致相关推荐

最新文章

热门文章