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,
},
],
};
};