1、处理函数
/*** @Description 刻度最大值* @date 2023-08-30* @param {any} isNaN(maxValue/1* @returns {any}*/
export const getYAxisMax = (maxValue): number => {if (isNaN(maxValue / 1) || maxValue / 1 < 10) {return 10;}const max: any = Math.ceil(maxValue) + '';const itemValue: any = Math.ceil(max / 5) + '';const mins = Math.ceil(itemValue / Math.pow(10, itemValue.length - 1));const item: any = mins * Math.pow(10, itemValue.length - 1) + '';// item 需要是5的整数倍const res = Math.ceil(item / 5) * 5 * 5;return res;
};
2、完整的options
export const getOption= (chartData) => {const color: string[] = ['#C1EEFC', '#92B8E5', '#2AB84A'];const intervalMax = getYAxisMax(Math.max.apply(null, chartData.oKCellCountData));return {color,tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999',},},},legend: {data: ['总电芯', 'OK电芯数', '工序良率'],icon: 'circle',},grid: {left: '5%',right: '5%',top: 50,bottom: 40,},xAxis: [{type: 'category',data: chartData.xAxisData,axisPointer: {type: 'shadow',},axisLabel: {rotate: 20, // 顺时针旋转 30 度},},],yAxis: [{type: 'value',name: '数量(个)',// min: 0,// max: 250,axisLabel: {formatter: '{value}',},interval: intervalMax / 5,max: intervalMax,},{type: 'value',name: '良率(%)',min: 0,max: 100,axisLabel: {formatter: '{value}',},},],series: [{name: '总电芯',type: 'bar',barWidth: 12, // 设置柱子的宽度itemStyle: {borderRadius: [10, 10, 0, 0], // 设置单个数值},tooltip: {valueFormatter: function (value) {return value + '个';},},data: chartData.totalCellsData,},{name: 'OK电芯数',type: 'bar',barWidth: 12, // 设置柱子的宽度itemStyle: {borderRadius: [10, 10, 0, 0], // 设置单个数值},tooltip: {valueFormatter: function (value) {return value + '个';},},data: chartData.oKCellCountData,},{name: '工序良率',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + '%';},},data: chartData.processYieldData,},],};
};