diff --git a/src/components/dashboard/QualitySection.vue b/src/components/dashboard/QualitySection.vue index 0c98208..b11af81 100644 --- a/src/components/dashboard/QualitySection.vue +++ b/src/components/dashboard/QualitySection.vue @@ -38,7 +38,7 @@ - + @@ -107,17 +107,10 @@ const rankingChartOpts = { color: ['#1a3a5c'], dataLabel: true, legend: { show: false }, - padding: [0, 40, 0, 0], + padding: [0, 40, 0, 10], xAxis: { disableGrid: true, max: 100, axisLabel: { padding: [0, 0, 0, 10] } }, yAxis: { - disableGrid: true, axisLabel: { - padding: [0, 0, 0, 0], formatter: function (value) { - if (value.length > 10) { - return value.substring(0, 10) + '...' - } - return value - } - } + disableGrid: true }, extra: { bar: { @@ -139,7 +132,7 @@ const rankingChartData = reactive({ series: [{ name: '', data: [] }] }) -const ITEM_HEIGHT_PX = 30 +const ITEM_HEIGHT_PX = 44 const MAX_VISIBLE = 6 const rankingScrollHeight = computed(() => { const count = rankingChartData.categories.length || 1 @@ -202,7 +195,14 @@ async function loadQualityData() { const vb = parseFloat(b.passRate) || 0 return vb - va }) - const categories = sorted.map((item) => item.productName || '') + const categories = sorted.map((item) => { + const name = item.productName || '' + const match = name.match(/^(【[^】]*】)(.*)$/) + if (match) { + return match[1] + '\n' + match[2] + } + return name + }) const rateData = sorted.map((item) => { const v = parseFloat(item.passRate) return isNaN(v) ? 0 : Math.round(v * 100) / 100 diff --git a/src/components/qiun-data-charts/js_sdk/u-charts/u-charts.js b/src/components/qiun-data-charts/js_sdk/u-charts/u-charts.js index f78bde5..c9a046c 100644 --- a/src/components/qiun-data-charts/js_sdk/u-charts/u-charts.js +++ b/src/components/qiun-data-charts/js_sdk/u-charts/u-charts.js @@ -2006,7 +2006,15 @@ function calYAxisData(series, opts, config, context) { }; rangesFormatArr[i] = rangesArr[i].map(function(items,index) { items = yData.formatter(items,index,opts); - yAxisWidthArr[i].width = Math.max(yAxisWidthArr[i].width, measureText(items, yAxisFontSizes, context) + 5); + var itemWidth; + if (items.indexOf('\n') !== -1) { + itemWidth = Math.max.apply(null, items.split('\n').map(function(line) { + return measureText(line, yAxisFontSizes, context); + })); + } else { + itemWidth = measureText(items, yAxisFontSizes, context); + } + yAxisWidthArr[i].width = Math.max(yAxisWidthArr[i].width, itemWidth + 5); return items; }); let calibration = yData.calibration ? 4 * opts.pix : 0; @@ -2037,7 +2045,15 @@ function calYAxisData(series, opts, config, context) { var yAxisFontSize = opts.yAxis.fontSize * opts.pix || config.fontSize; rangesFormatArr[0] = rangesArr[0].map(function(item,index) { item = opts.yAxis.formatter(item,index,opts); - yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, measureText(item, yAxisFontSize, context) + 5); + var itemWidth; + if (item.indexOf('\n') !== -1) { + itemWidth = Math.max.apply(null, item.split('\n').map(function(line) { + return measureText(line, yAxisFontSize, context); + })); + } else { + itemWidth = measureText(item, yAxisFontSize, context); + } + yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, itemWidth + 5); return item; }); yAxisWidthArr[0].width += 3 * opts.pix; @@ -4583,7 +4599,19 @@ function drawXAxis(categories, opts, config, context) { context.beginPath(); context.setFontSize(xAxisFontSize); context.setFillStyle(opts.xAxis.fontColor || opts.fontColor); - context.fillText(String(xitem), xAxisPoints[index] + offset, startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix); + var xitemStr = String(xitem); + if (xitemStr.indexOf('\n') !== -1) { + var lines = xitemStr.split('\n'); + var lineHeight = opts.xAxis.lineHeight * opts.pix || xAxisFontSize * 1.2; + var totalHeight = lines.length * lineHeight; + var baseY = startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix - (totalHeight - lineHeight) / 2; + lines.forEach(function(line, lineIndex) { + var lineOffset = -measureText(line, xAxisFontSize, context) / 2; + context.fillText(line, xAxisPoints[index] + lineOffset, baseY + lineIndex * lineHeight); + }); + } else { + context.fillText(xitemStr, xAxisPoints[index] + offset, startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix); + } context.closePath(); context.stroke(); } @@ -4764,7 +4792,18 @@ function drawYAxis(series, opts, config, context) { context.setTextAlign('center'); tmpstrat = tStartLeft - yAxisWidth.width / 2 } - context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix); + var itemStr = String(item); + if (itemStr.indexOf('\n') !== -1) { + var lines = itemStr.split('\n'); + var lineHeight = yAxisFontSize * 1.2; + var totalHeight = lines.length * lineHeight; + var baseY = pos + yAxisFontSize / 2 - 3 * opts.pix - (totalHeight - lineHeight) / 2; + lines.forEach(function(line, lineIndex) { + context.fillText(line, tmpstrat, baseY + lineIndex * lineHeight); + }); + } else { + context.fillText(itemStr, tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix); + } } else if (yAxisWidth.position == 'right') { //画刻度线 @@ -4786,7 +4825,18 @@ function drawYAxis(series, opts, config, context) { context.setTextAlign('center'); tmpstrat = tStartRight + yAxisWidth.width / 2 } - context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix); + var itemStr = String(item); + if (itemStr.indexOf('\n') !== -1) { + var lines = itemStr.split('\n'); + var lineHeight = yAxisFontSize * 1.2; + var totalHeight = lines.length * lineHeight; + var baseY = pos + yAxisFontSize / 2 - 3 * opts.pix - (totalHeight - lineHeight) / 2; + lines.forEach(function(line, lineIndex) { + context.fillText(line, tmpstrat, baseY + lineIndex * lineHeight); + }); + } else { + context.fillText(itemStr, tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix); + } } else if (yAxisWidth.position == 'center') { //画刻度线 if (yData.calibration == true) { @@ -4808,7 +4858,18 @@ function drawYAxis(series, opts, config, context) { context.setTextAlign('center'); tmpstrat = tStartCenter - yAxisWidth.width / 2 } - context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix); + var itemStr = String(item); + if (itemStr.indexOf('\n') !== -1) { + var lines = itemStr.split('\n'); + var lineHeight = yAxisFontSize * 1.2; + var totalHeight = lines.length * lineHeight; + var baseY = pos + yAxisFontSize / 2 - 3 * opts.pix - (totalHeight - lineHeight) / 2; + lines.forEach(function(line, lineIndex) { + context.fillText(line, tmpstrat, baseY + lineIndex * lineHeight); + }); + } else { + context.fillText(itemStr, tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix); + } } context.closePath(); context.stroke();