diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index a3d7cc0500..6c65c75c77 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -327,7 +327,7 @@ public class ChartViewService {
             QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
             if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
                 datasourceRequest.setTable(dataTableInfoDTO.getTable());
-                if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
+                if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
                     datasourceRequest.setQuery(qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, customFilter, extFilterList));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
                     datasourceRequest.setQuery(qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extStack, ds));
@@ -339,7 +339,7 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, ds));
                 }
             } else if (StringUtils.equalsIgnoreCase(table.getType(), "sql")) {
-                if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
+                if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
                     datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(dataTableInfoDTO.getSql(), yAxis, customFilter, extFilterList));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
                     datasourceRequest.setQuery(qp.getSQLAsTmpStack(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extStack));
@@ -354,7 +354,7 @@ public class ChartViewService {
                 DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
                 List<DataSetTableUnionDTO> list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId());
                 String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
-                if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
+                if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
                     datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(sql, yAxis, customFilter, extFilterList));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
                     datasourceRequest.setQuery(qp.getSQLAsTmpStack(sql, xAxis, yAxis, customFilter, extFilterList, extStack));
@@ -386,7 +386,7 @@ public class ChartViewService {
             String tableName = "ds_" + table.getId().replaceAll("-", "_");
             datasourceRequest.setTable(tableName);
             QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
-            if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
+            if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
                 datasourceRequest.setQuery(qp.getSQLSummary(tableName, yAxis, customFilter, extFilterList));
             } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
                 datasourceRequest.setQuery(qp.getSQLStack(tableName, xAxis, yAxis, customFilter, extFilterList, extStack, ds));
diff --git a/frontend/package.json b/frontend/package.json
index 2e3cd54833..42f7c9c21f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@antv/g2plot": "^2.3.32",
     "@riophae/vue-treeselect": "0.4.0",
     "@tinymce/tinymce-vue": "^3.2.8",
     "axios": "^0.21.1",
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index ce19cc8b54..ef55f4673e 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -16,7 +16,8 @@
         {{ $t('chart.chart_error_tips') }}
       </div>
     </div>
-    <chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
+    <chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
+    <chart-component-g2 v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'g2'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
     <!--    <chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />-->
     <table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
     <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
@@ -43,9 +44,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 import { getToken, getLinkToken } from '@/utils/auth'
 import DrillPath from '@/views/chart/view/DrillPath'
 import { areaMapping } from '@/api/map/map'
+import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 export default {
   name: 'UserView',
-  components: { ChartComponent, TableNormal, LabelNormal, DrillPath },
+  components: { ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
     element: {
       type: Object,
@@ -434,6 +436,14 @@ export default {
           this.destroyTimeMachine()
         }, 200)
       }
+    },
+
+    renderComponent() {
+      if (this.chart.type === 'liquid') {
+        return 'g2'
+      } else {
+        return 'echarts'
+      }
     }
   }
 }
diff --git a/frontend/src/icons/svg/liquid.svg b/frontend/src/icons/svg/liquid.svg
new file mode 100644
index 0000000000..6cdd202223
--- /dev/null
+++ b/frontend/src/icons/svg/liquid.svg
@@ -0,0 +1 @@
+<svg t="1631072907294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3122" width="200" height="200"><path d="M512 51.2C257.504 51.2 51.2 257.504 51.2 512S257.504 972.8 512 972.8 972.8 766.496 972.8 512 766.496 51.2 512 51.2m0 42.624c230.592 0 418.176 187.584 418.176 418.176 0 230.592-187.584 418.176-418.176 418.176-230.592 0-418.176-187.584-418.176-418.176C93.824 281.408 281.408 93.824 512 93.824" p-id="3123"></path><path d="M757.92 598.88c-56.704 0-113.856-13.6-164.352-39.296-37.408-19.04-70.016-46.016-100.224-74.848-29.536-28.16-58.944-52.8-98.944-64.992-17.472-5.312-69.76-20.448-129.472 1.024a190.624 190.624 0 0 0-75.872 50.304A187.264 187.264 0 0 0 153.6 528.96c10.88 190.304 168.32 341.44 361.536 341.44 175.328 0 321.568-124.32 355.264-289.504a362.048 362.048 0 0 1-112.48 17.984" p-id="3124"></path></svg>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 55c74c162f..85d59e48c7 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -862,7 +862,20 @@ export default {
     yAxis_main: 'Main Vertical Axis',
     yAxis_ext: 'Ext Vertical Axis',
     total: 'Total',
-    items: 'Items'
+    items: 'Items',
+    chart_liquid: 'Liquid',
+    drag_block_progress: 'Progress',
+    liquid_max: 'End Value',
+    liquid_outline_border: 'Border Width',
+    liquid_outline_distance: 'Border Distance',
+    liquid_wave_length: 'Wave Length',
+    liquid_wave_count: 'Wave Count',
+    liquid_shape: 'Shape',
+    liquid_shape_circle: 'Circle',
+    liquid_shape_diamond: 'Diamond',
+    liquid_shape_triangle: 'Triangle',
+    liquid_shape_pin: 'Pin',
+    liquid_shape_rect: 'Rect'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 8a2b821c3e..c1cf4ab1a8 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -861,7 +861,20 @@ export default {
     yAxis_main: '主縱軸',
     yAxis_ext: '副縱軸',
     total: '共',
-    items: '條數據'
+    items: '條數據',
+    chart_liquid: '水波圖',
+    drag_block_progress: '進度指示',
+    liquid_max: '目標值',
+    liquid_outline_border: '邊框粗細',
+    liquid_outline_distance: '邊框間隔',
+    liquid_wave_length: '水波長度',
+    liquid_wave_count: '水波數量',
+    liquid_shape: '形狀',
+    liquid_shape_circle: '圓形',
+    liquid_shape_diamond: '菱形',
+    liquid_shape_triangle: '三角形',
+    liquid_shape_pin: '氣球',
+    liquid_shape_rect: '矩形'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 203ddc33ba..b20ce1c6e7 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -893,7 +893,20 @@ export default {
     yAxis_main: '主纵轴',
     yAxis_ext: '副纵轴',
     total: '共',
-    items: '条数据'
+    items: '条数据',
+    chart_liquid: '水波图',
+    drag_block_progress: '进度指示',
+    liquid_max: '目标值',
+    liquid_outline_border: '边框粗细',
+    liquid_outline_distance: '边框间隔',
+    liquid_wave_length: '水波长度',
+    liquid_wave_count: '水波数量',
+    liquid_shape: '形状',
+    liquid_shape_circle: '圆形',
+    liquid_shape_diamond: '菱形',
+    liquid_shape_triangle: '三角形',
+    liquid_shape_pin: '气球',
+    liquid_shape_rect: '矩形'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 707bfbb606..77fad0baed 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -42,7 +42,14 @@ export const DEFAULT_SIZE = {
   scatterSymbol: 'circle',
   scatterSymbolSize: 20,
   treemapWidth: 80,
-  treemapHeight: 80
+  treemapHeight: 80,
+  liquidMax: 100,
+  liquidSize: 80,
+  liquidOutlineBorder: 4,
+  liquidOutlineDistance: 8,
+  liquidWaveLength: 128,
+  liquidWaveCount: 3,
+  liquidShape: 'circle'
 }
 export const DEFAULT_LABEL = {
   show: false,
diff --git a/frontend/src/views/chart/chart/liquid/liquid.js b/frontend/src/views/chart/chart/liquid/liquid.js
new file mode 100644
index 0000000000..25a1561fdd
--- /dev/null
+++ b/frontend/src/views/chart/chart/liquid/liquid.js
@@ -0,0 +1,95 @@
+import { Liquid } from '@antv/g2plot'
+import { digToHex } from '@/views/chart/chart/util'
+import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
+
+export function baseLiquid(plot, container, chart) {
+  let value = 0
+  const colors = []
+  let max
+  let radius
+  let outlineBorder
+  let outlineDistance
+  let waveLength
+  let waveCount
+  let bgColor
+  let shape
+  let labelContent
+  if (chart.data) {
+    if (chart.data.series.length > 0) {
+      value = chart.data.series[0].data[0].value
+    }
+  }
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+      const alpha = digToHex(parseInt(c.alpha))
+      c.colors.forEach(ele => {
+        colors.push(ele.concat(alpha))
+      })
+    }
+    // size
+    if (customAttr.size) {
+      const size = JSON.parse(JSON.stringify(customAttr.size))
+      max = size.liquidMax ? size.liquidMax : DEFAULT_SIZE.liquidMax
+      radius = parseFloat((size.liquidSize ? size.liquidSize : DEFAULT_SIZE.liquidSize) / 100)
+      outlineBorder = parseInt(size.liquidOutlineBorder ? size.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder)
+      outlineDistance = parseInt(size.liquidOutlineDistance ? size.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance)
+      waveLength = parseInt(size.liquidWaveLength ? size.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength)
+      waveCount = parseInt(size.liquidWaveCount ? size.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount)
+      shape = size.liquidShape ? size.liquidShape : DEFAULT_SIZE.liquidShape
+    }
+    // label
+    if (customAttr.label) {
+      const label = JSON.parse(JSON.stringify(customAttr.label))
+      if (label.show) {
+        labelContent = {
+          style: ({ percent }) => ({
+            fontSize: parseInt(label.fontSize),
+            color: label.color
+          })
+        }
+      } else {
+        labelContent = false
+      }
+    }
+  }
+  let customStyle
+  if (chart.customStyle) {
+    customStyle = JSON.parse(chart.customStyle)
+    if (customStyle.background) {
+      bgColor = customStyle.background.color.concat(digToHex(parseInt(customStyle.background.alpha)))
+    }
+  }
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Liquid(container, {
+    theme: {
+      styleSheet: {
+        brandColor: colors[0],
+        paletteQualitative10: colors,
+        backgroundColor: bgColor
+      }
+    },
+    percent: (parseFloat(value) / parseFloat(max)),
+    radius: radius,
+    shape: shape,
+    outline: {
+      border: outlineBorder,
+      distance: outlineDistance
+    },
+    wave: {
+      length: waveLength,
+      count: waveCount
+    },
+    statistic: {
+      content: labelContent
+    }
+  })
+  plot.render()
+  return plot
+}
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index a075480b99..1bec7413d9 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -17,3 +17,12 @@ export function hexColorToRGBA(hex, alpha) {
     return 'rgb(0,0,0)'
   }
 }
+
+export function digToHex(dig) {
+  let prefix = ''
+  const num = parseInt(dig * 2.55)
+  if (num < 16) {
+    prefix = '0'
+  }
+  return prefix.concat(num.toString(16).toUpperCase())
+}
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
new file mode 100644
index 0000000000..089b33a618
--- /dev/null
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -0,0 +1,162 @@
+<template>
+  <div style="display: flex;">
+    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
+    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
+  </div>
+</template>
+
+<script>
+import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
+// import eventBus from '@/components/canvas/utils/eventBus'
+import { uuid } from 'vue-uuid'
+import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+
+export default {
+  name: 'ChartComponentG2',
+  components: { ViewTrackBar },
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Object,
+      required: false,
+      default: function() {
+        return {}
+      }
+    },
+    trackMenu: {
+      type: Array,
+      required: false,
+      default: function() {
+        return ['drill']
+      }
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      chartId: uuid.v1(),
+      showTrackBar: true,
+      trackBarStyle: {
+        position: 'absolute',
+        left: '0px',
+        top: '0px'
+      },
+      pointParam: null,
+
+      dynamicAreaCode: null,
+      borderRadius: '0px'
+    }
+  },
+
+  computed: {
+    trackBarStyleTime() {
+      return this.trackBarStyle
+    }
+  },
+  watch: {
+    chart: {
+      handler(newVal, oldVla) {
+        this.preDraw()
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+    this.preDraw()
+  },
+  methods: {
+    preDraw() {
+      // 基于准备好的dom，初始化echarts实例
+      // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
+      new Promise((resolve) => { resolve() }).then(() => {
+        //	此dom为echarts图标展示dom
+        // this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+        // if (!this.myChart) {
+        //   this.myChart = this.$echarts.init(document.getElementById(this.chartId))
+        // }
+        this.drawEcharts()
+
+        // this.myChart.off('click')
+        // this.myChart.on('click', function(param) {
+        //   that.pointParam = param
+        //   if (that.trackMenu.length < 2) { // 只有一个事件直接调用
+        //     that.trackClick(that.trackMenu[0])
+        //   } else { // 视图关联多个事件
+        //     that.trackBarStyle.left = param.event.offsetX + 'px'
+        //     that.trackBarStyle.top = (param.event.offsetY - 15) + 'px'
+        //     that.$refs.viewTrack.trackButtonClick()
+        //   }
+        // })
+      })
+    },
+    drawEcharts() {
+      const chart = this.chart
+      // type
+      if (chart.type === 'liquid') {
+        this.myChart = baseLiquid(this.myChart, this.chartId, chart)
+      }
+
+      this.setBackGroundBorder()
+      // console.log(JSON.stringify(chart_option))
+    },
+
+    // myEcharts(option) {
+    //   // 指定图表的配置项和数据
+    //   const chart = this.myChart
+    //   this.setBackGroundBorder()
+    //   setTimeout(chart.setOption(option, true), 500)
+    //   window.onresize = function() {
+    //     chart.resize()
+    //   }
+    // },
+    setBackGroundBorder() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
+    },
+    chartResize() {
+      // 指定图表的配置项和数据
+      // const chart = this.myChart
+      // chart.resize()
+    },
+    trackClick(trackAction) {
+      const param = this.pointParam
+      if (!param || !param.data || !param.data.dimensionList) {
+        // 地图提示没有关联字段 其他没有维度信息的 直接返回
+        if (this.chart.type === 'map') {
+          this.$warning(this.$t('panel.no_drill_field'))
+        }
+        return
+      }
+      const linkageParam = {
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList
+      }
+      switch (trackAction) {
+        case 'drill':
+          this.$emit('onChartClick', this.pointParam)
+          break
+        case 'linkage':
+          this.$store.commit('addViewTrackFilter', linkageParam)
+          break
+        default:
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 2ee0a55909..4801f322cc 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -17,12 +17,12 @@
           <el-form-item :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
           </el-form-item>
-          <el-form-item :label="$t('chart.label_position')" class="form-item">
+          <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
               <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item class="form-item">
+          <el-form-item v-show="chart.type && chart.type !== 'liquid'" class="form-item">
             <span slot="label">
               <span class="span-box">
                 <span>{{ $t('chart.content_formatter') }}</span>
@@ -126,7 +126,7 @@ export default {
     },
     init() {
       const arr = []
-      for (let i = 10; i <= 20; i = i + 2) {
+      for (let i = 10; i <= 40; i = i + 2) {
         arr.push({
           name: i + '',
           value: i + ''
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 63fdd1565f..b17076a604 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -218,6 +218,37 @@
           <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
+
+      <el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.liquid_shape')" class="form-item">
+          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in liquidShapeOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="1" :max="500" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="1" :max="10" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
     </el-col>
   </div>
 </template>
@@ -250,6 +281,13 @@ export default {
         { name: this.$t('chart.line_symbol_pin'), value: 'pin' },
         { name: this.$t('chart.line_symbol_arrow'), value: 'arrow' }
       ],
+      liquidShapeOptions: [
+        { name: this.$t('chart.liquid_shape_circle'), value: 'circle' },
+        { name: this.$t('chart.liquid_shape_diamond'), value: 'diamond' },
+        { name: this.$t('chart.liquid_shape_triangle'), value: 'triangle' },
+        { name: this.$t('chart.liquid_shape_pin'), value: 'pin' },
+        { name: this.$t('chart.liquid_shape_rect'), value: 'rect' }
+      ],
       fontSize: []
     }
   },
@@ -279,6 +317,14 @@ export default {
           this.sizeForm.treemapWidth = this.sizeForm.treemapWidth ? this.sizeForm.treemapWidth : 80
           this.sizeForm.treemapHeight = this.sizeForm.treemapHeight ? this.sizeForm.treemapHeight : 80
           this.sizeForm.radarSize = this.sizeForm.radarSize ? this.sizeForm.radarSize : 80
+
+          this.sizeForm.liquidShape = this.sizeForm.liquidShape ? this.sizeForm.liquidShape : DEFAULT_SIZE.liquidShape
+          this.sizeForm.liquidMax = this.sizeForm.liquidMax ? this.sizeForm.liquidMax : DEFAULT_SIZE.liquidMax
+          this.sizeForm.liquidSize = this.sizeForm.liquidSize ? this.sizeForm.liquidSize : DEFAULT_SIZE.liquidSize
+          this.sizeForm.liquidOutlineBorder = this.sizeForm.liquidOutlineBorder ? this.sizeForm.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder
+          this.sizeForm.liquidOutlineDistance = this.sizeForm.liquidOutlineDistance ? this.sizeForm.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance
+          this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
+          this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
         }
       }
     },
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 06e6f690fa..4297eaa7fa 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -33,7 +33,7 @@
       <el-row v-show="chart.type === 'table-info'" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
-          <span>{{ chart.data.tableRow.length }}</span>
+          <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
           {{ $t('chart.items') }}
         </span>
         <el-pagination
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index dc050febd8..caa8554b65 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -189,18 +189,23 @@
                             <svg-icon icon-class="radar" class="chart-icon" />
                           </span>
                         </el-radio>
+                        <el-radio value="liquid" label="liquid">
+                          <span :title="$t('chart.chart_liquid')">
+                            <svg-icon icon-class="liquid" class="chart-icon" />
+                          </span>
+                        </el-radio>
                         <el-radio value="gauge" label="gauge">
                           <span :title="$t('chart.chart_gauge')">
                             <svg-icon icon-class="gauge" class="chart-icon" />
                           </span>
                         </el-radio>
+                      </div>
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="pie" label="pie">
                           <span :title="$t('chart.chart_pie')">
                             <svg-icon icon-class="pie" class="chart-icon" />
                           </span>
                         </el-radio>
-                      </div>
-                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="pie-rose" label="pie-rose">
                           <span :title="$t('chart.chart_pie_rose')">
                             <svg-icon icon-class="pie-rose" class="chart-icon" />
@@ -217,8 +222,14 @@
                           </span>
                         </el-radio>
                         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                       </div>
+                      <!--                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">-->
+                      <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
+                      <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
+                      <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
+                      <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
+                      <!--                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
+                      <!--                      </div>-->
                     </el-radio-group>
                   </div>
                 </el-row>
@@ -254,7 +265,7 @@
                       />
                     </span>
                   </el-row>
-                  <el-row v-if="view.type !=='text' && view.type !== 'gauge'" class="padding-lr">
+                  <el-row v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'" class="padding-lr">
                     <span style="width: 80px;text-align: right;">
                       <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
                       <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')">{{ $t('chart.drag_block_type_axis') }}</span>
@@ -296,6 +307,7 @@
                       <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                       <span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
                       <span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
+                      <span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
                       /
                       <span>{{ $t('chart.quota') }}</span>
                     </span>
@@ -418,7 +430,7 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
-                  <el-row v-if="view.type && view.type !== 'treemap' && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('radar') && !view.type.includes('gauge')" class="padding-lr" style="margin-top: 6px;">
+                  <el-row v-if="view.type && view.type !== 'treemap' && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('radar') && !view.type.includes('gauge') && view.type !== 'liquid'" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.drill') }}</span>
                       /
@@ -471,7 +483,7 @@
                   <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="label" :title="$t('chart.label')">
                     <label-selector :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="tooltip" :title="$t('chart.tooltip')">
+                  <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid'" name="tooltip" :title="$t('chart.tooltip')">
                     <tooltip-selector :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
                   </el-collapse-item>
                 </el-collapse>
@@ -491,10 +503,10 @@
                   <el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
                     <split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
                   </el-collapse-item>
-                  <el-collapse-item name="title" :title="$t('chart.title')">
+                  <el-collapse-item v-show="view.type && view.type !== 'liquid'" name="title" :title="$t('chart.title')">
                     <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && chart.type !== 'treemap'" name="legend" :title="$t('chart.legend')">
+                  <el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && chart.type !== 'treemap' && view.type !== 'liquid'" name="legend" :title="$t('chart.legend')">
                     <legend-selector :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
                   </el-collapse-item>
                   <el-collapse-item name="background" :title="$t('chart.background')">
@@ -510,7 +522,8 @@
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
-            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
+            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
+            <chart-component-g2 v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'g2'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" />
             <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
             <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
             <div v-if="!httpRequest.status" class="chart-error-class">
@@ -670,9 +683,11 @@ import FieldEdit from '../../dataset/data/FieldEdit'
 import { areaMapping } from '@/api/map/map'
 import QuotaExtItem from '@/views/chart/components/drag-item/QuotaExtItem'
 import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
+import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 export default {
   name: 'ChartEdit',
   components: {
+    ChartComponentG2,
     YAxisExtSelector,
     QuotaExtItem,
     FilterItem,
@@ -1593,6 +1608,14 @@ export default {
           if (temp) return temp
         }
       }
+    },
+
+    renderComponent() {
+      if (this.chart.type === 'liquid') {
+        return 'g2'
+      } else {
+        return 'echarts'
+      }
     }
 
   }