style：产品合格率排行-label换行展示

src/components/dashboard/QualitySection.vue

@@ -38,7 +38,7 @@
       </view>
       <scroll-view class="ranking-scroll" scroll-y :style="{ height: rankingScrollHeight }">
         <view :style="{ height: rankingChartHeight }">
-          <qiun-data-charts type="bar" :chartData="rankingChartData" :canvas2d="false" :opts="rankingChartOpts" />
+          <qiun-data-charts type="bar" :chartData="rankingChartData" :canvas2d="true" :opts="rankingChartOpts" />
         </view>
       </scroll-view>
     </view>
@@ -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

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();