水波图样式更新

examples/liquid/basic/demo/basic.js

@@ -10,7 +10,7 @@ const liquidPlot = new Liquid(document.getElementById('container'), {
   height: 400,
   min: 0,
   max: 10000,
-  value: 6640,
+  value: 4500,
   showValue: true,
 });
 liquidPlot.render();

src/plots/bar/component/label/bar-label.ts

@@ -106,12 +106,12 @@ export class BarLabels extends ElementLabels {
       const reflect = this._mappingColor(colorBand, gray);
       label.attr('fill', reflect);
       label.attr('fill', reflect);
-      if(reflect !=='black'){
-        label.attr('stroke',null);
-        label.attr('lineWidth',0);
-      }else{
-        label.attr("stroke","white");
-        label.attr("lineWidth",2);
+      if (reflect !== 'black') {
+        label.attr('stroke', null);
+        label.attr('lineWidth', 0);
+      } else {
+        label.attr('stroke', 'white');
+        label.attr('lineWidth', 2);
       }
     } else if (labelRange.maxY < shapeRange.minY) {
       label.attr('fill', 'black');

src/plots/bar/layer.ts

@@ -88,10 +88,10 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
         position: 'left',
         offset: 8,
         adjustColor: true,
-        style:{
+        style: {
           stroke: null,
-          lineWidth: 0
-        }
+          lineWidth: 0,
+        },
       },
       legend: {
         visible: true,

src/plots/column/component/label/column-label.ts

@@ -104,12 +104,12 @@ export class ColumnLabels extends ElementLabels {
       ];
       const reflect = this._mappingColor(colorBand, gray);
       label.attr('fill', reflect);
-      if(reflect !=='black'){
-        label.attr('stroke',null);
-        label.attr('lineWidth',0);
-      }else{
-        label.attr("stroke","white");
-        label.attr("lineWidth",2);
+      if (reflect !== 'black') {
+        label.attr('stroke', null);
+        label.attr('lineWidth', 0);
+      } else {
+        label.attr('stroke', 'white');
+        label.attr('lineWidth', 2);
       }
     } else if (labelRange.maxY < shapeRange.minY) {
       label.attr('fill', 'black');

src/plots/column/layer.ts

@@ -75,7 +75,7 @@ export default class BaseColumnLayer<T extends ColumnLayerConfig = ColumnLayerCo
         visible: false,
         position: 'top',
         adjustColor: true,
-        offset: 4
+        offset: 4,
       },
       legend: {
         visible: true,

src/plots/liquid/geometry/shape/liquid.ts

@@ -204,6 +204,7 @@ function addWaterWave(x, y, level, waveCount, colors, group, clip, radius) {
         path: getWaterWavePath(radius, bbox.minY + height * level, width / 4, 0, width / 64, x, y),
         fill: colors[i],
         clip,
+        opacity: 0.8,
       },
     });
     // FIXME wave animation error in svg
@@ -257,7 +258,7 @@ registerShape('interval', 'liquid-fill-gauge', {
       attrs: _.mix(getLineAttrs(cfg), {
         x: cp.x,
         y: cp.y,
-        r: radius + radius / 8,
+        r: radius,
       }),
     });
   },

src/plots/liquid/layer.ts

@@ -9,7 +9,7 @@ import './geometry/shape/liquid';
 import './theme';
 
 interface LiquidStyle {
-  color?: string;
+  color?: string | string[];
   fontColor?: string;
   fontOpacity?: number;
   fontSize?: number;
@@ -67,9 +67,9 @@ export default class LiquidLayer extends ViewLayer<LiquidLayerConfig> {
   protected getStyleMix(valueText) {
     const { liquidStyle = {} } = this.options;
     const { width, height } = this;
-    const size = Math.min(width, height) / 1.2 - Object.assign({ borderWidth: 10 }, liquidStyle).borderWidth;
+    const size = Math.min(width, height) / 1.2 - Object.assign({ borderWidth: 50 }, liquidStyle).borderWidth;
     const defaultStyle = Object.assign({}, this.theme, {
-      fontSize: this.autoFontSize(size, valueText),
+      fontSize: this.autoFontSize(size, valueText, 1.5),
       size,
     });
     return Object.assign(defaultStyle, liquidStyle);
@@ -142,19 +142,25 @@ export default class LiquidLayer extends ViewLayer<LiquidLayerConfig> {
 
     const { text, styleMix } = this.options;
     const annotationConfigs = [];
+    const adjustStyle = this.adjustStyle();
     const textAnnotation = {
       type: 'text',
       content: text,
       top: true,
-      position: ['50%', '50%'],
-      style: {
-        fill: styleMix.fontColor,
-        opacity: styleMix.fontOpacity,
-        fontSize: styleMix.fontSize,
-        textAlign: 'center',
-      },
+      position: ['50%', '55%'],
+      style: _.deepMix(
+        {},
+        {
+          fill: styleMix.fontColor,
+          opacity: styleMix.fontOpacity,
+          fontSize: styleMix.fontSize,
+          textAlign: 'center',
+        },
+        adjustStyle
+      ),
     };
     annotationConfigs.push(textAnnotation);
+
     this.setConfig('annotations', annotationConfigs);
   }
 
@@ -178,11 +184,29 @@ export default class LiquidLayer extends ViewLayer<LiquidLayerConfig> {
     return typeof value === 'number' ? format(value) : '--';
   }
 
-  private autoFontSize(space, text) {
-    const fontSizeBySpace = space / 4;
-    const fontSizeByText = (space / text.length) * 1.5;
+  private autoFontSize(space, text, ratio) {
+    const fontSizeBySpace = space / 5;
+    const fontSizeByText = (space / text.length) * ratio;
     return Math.min(fontSizeBySpace, fontSizeByText);
   }
+
+  private adjustStyle() {
+    const { max, min, value } = this.options;
+    const percent = (value - min) / (max - min);
+    if (percent > 0.3 && percent < 0.6) {
+      return {
+        stroke: 'white',
+        lineWidth: 2,
+      };
+    } else if (percent >= 0.6) {
+      return {
+        fill: 'white',
+        shadowBlur: 6,
+        shadowColor: 'rgba(0, 0, 0, .4)',
+      };
+    }
+    return {};
+  }
 }
 
 registerPlotType('liquid', LiquidLayer);

src/plots/liquid/theme.ts

@@ -1,9 +1,9 @@
 import { registerTheme } from '../../theme';
 
 registerTheme('liquid', {
-  color: '#3B76FF',
-  borderWidth: 10,
-  borderOpacity: 0.2,
+  color: '#6a99f9',
+  borderWidth: 4,
+  borderOpacity: 1,
   fontColor: '#233F7E',
   fontOpacity: 1,
 });