diff --git a/backend/src/main/java/io/dataease/base/domain/ChartView.java b/backend/src/main/java/io/dataease/base/domain/ChartView.java
index 2bb2de365e..f8e662c1d5 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartView.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartView.java
@@ -1,31 +1,28 @@
 package io.dataease.base.domain;
 
 import java.io.Serializable;
-
-import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
 @Data
 public class ChartView implements Serializable {
-    @ApiModelProperty("ID")
     private String id;
-    @ApiModelProperty("名称")
+
     private String name;
-    @ApiModelProperty("场景ID")
+
     private String sceneId;
-    @ApiModelProperty("表ID")
+
     private String tableId;
-    @ApiModelProperty("类型")
+
     private String type;
-    @ApiModelProperty("标题")
+
     private String title;
-    @ApiModelProperty("创建者")
+
     private String createBy;
-    @ApiModelProperty("创建时间")
+
     private Long createTime;
-    @ApiModelProperty("更新时间")
+
     private Long updateTime;
-    @ApiModelProperty("样式优先级")
+
     private String stylePriority;
 
     private static final long serialVersionUID = 1L;
diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java b/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
index 5ac886681d..61779e0cdd 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
@@ -15,15 +15,17 @@ public class ChartViewWithBLOBs extends ChartView implements Serializable {
     private String xAxis;
     @ApiModelProperty("y轴")
     private String yAxis;
+    @ApiModelProperty("副y轴")
+    private String yAxisExt;
     @ApiModelProperty("堆叠")
     private String extStack;
     @ApiModelProperty("气泡")
     private String extBubble;
-    @ApiModelProperty("客户端属性")
+    @ApiModelProperty("图形属性")
     private String customAttr;
-    @ApiModelProperty("客户端样式")
+    @ApiModelProperty("组件样式")
     private String customStyle;
-    @ApiModelProperty("客户端过滤条件")
+    @ApiModelProperty("过滤条件")
     private String customFilter;
     @ApiModelProperty("下钻字段")
     private String drillFields;
diff --git a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
index 10137408e3..72b2eaaca0 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
@@ -16,6 +16,7 @@
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs">
     <result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
     <result column="y_axis" jdbcType="LONGVARCHAR" property="yAxis" />
+    <result column="y_axis_ext" jdbcType="LONGVARCHAR" property="yAxisExt" />
     <result column="ext_stack" jdbcType="LONGVARCHAR" property="extStack" />
     <result column="ext_bubble" jdbcType="LONGVARCHAR" property="extBubble" />
     <result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" />
@@ -87,7 +88,7 @@
     style_priority
   </sql>
   <sql id="Blob_Column_List">
-    x_axis, y_axis, ext_stack, ext_bubble, custom_attr, custom_style, custom_filter, 
+    x_axis, y_axis, y_axis_ext, ext_stack, ext_bubble, custom_attr, custom_style, custom_filter, 
     drill_fields, snapshot
   </sql>
   <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
@@ -143,16 +144,16 @@
       table_id, `type`, title, 
       create_by, create_time, update_time, 
       style_priority, x_axis, y_axis, 
-      ext_stack, ext_bubble, custom_attr, 
-      custom_style, custom_filter, drill_fields, 
-      snapshot)
+      y_axis_ext, ext_stack, ext_bubble, 
+      custom_attr, custom_style, custom_filter, 
+      drill_fields, snapshot)
     values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR}, 
       #{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR}, 
       #{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, 
       #{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR}, 
-      #{extStack,jdbcType=LONGVARCHAR}, #{extBubble,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, 
-      #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}, #{drillFields,jdbcType=LONGVARCHAR}, 
-      #{snapshot,jdbcType=LONGVARCHAR})
+      #{yAxisExt,jdbcType=LONGVARCHAR}, #{extStack,jdbcType=LONGVARCHAR}, #{extBubble,jdbcType=LONGVARCHAR}, 
+      #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}, 
+      #{drillFields,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
     insert into chart_view
@@ -193,6 +194,9 @@
       <if test="yAxis != null">
         y_axis,
       </if>
+      <if test="yAxisExt != null">
+        y_axis_ext,
+      </if>
       <if test="extStack != null">
         ext_stack,
       </if>
@@ -252,6 +256,9 @@
       <if test="yAxis != null">
         #{yAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="yAxisExt != null">
+        #{yAxisExt,jdbcType=LONGVARCHAR},
+      </if>
       <if test="extStack != null">
         #{extStack,jdbcType=LONGVARCHAR},
       </if>
@@ -320,6 +327,9 @@
       <if test="record.yAxis != null">
         y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="record.yAxisExt != null">
+        y_axis_ext = #{record.yAxisExt,jdbcType=LONGVARCHAR},
+      </if>
       <if test="record.extStack != null">
         ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
       </if>
@@ -360,6 +370,7 @@
       style_priority = #{record.stylePriority,jdbcType=VARCHAR},
       x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
+      y_axis_ext = #{record.yAxisExt,jdbcType=LONGVARCHAR},
       ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
       ext_bubble = #{record.extBubble,jdbcType=LONGVARCHAR},
       custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
@@ -423,6 +434,9 @@
       <if test="yAxis != null">
         y_axis = #{yAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="yAxisExt != null">
+        y_axis_ext = #{yAxisExt,jdbcType=LONGVARCHAR},
+      </if>
       <if test="extStack != null">
         ext_stack = #{extStack,jdbcType=LONGVARCHAR},
       </if>
@@ -460,6 +474,7 @@
       style_priority = #{stylePriority,jdbcType=VARCHAR},
       x_axis = #{xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{yAxis,jdbcType=LONGVARCHAR},
+      y_axis_ext = #{yAxisExt,jdbcType=LONGVARCHAR},
       ext_stack = #{extStack,jdbcType=LONGVARCHAR},
       ext_bubble = #{extBubble,jdbcType=LONGVARCHAR},
       custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
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 92be6a7ef0..a3d7cc0500 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -184,6 +184,11 @@ public class ChartViewService {
         }.getType());
         List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
+        if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
+            List<ChartViewFieldDTO> yAxisExt = new Gson().fromJson(view.getYAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+            }.getType());
+            yAxis.addAll(yAxisExt);
+        }
         List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
         List<ChartViewFieldDTO> extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
diff --git a/backend/src/main/resources/db/migration/V26__de1.3.sql b/backend/src/main/resources/db/migration/V26__de1.3.sql
index df2cdc0db9..5d3dc9d161 100644
--- a/backend/src/main/resources/db/migration/V26__de1.3.sql
+++ b/backend/src/main/resources/db/migration/V26__de1.3.sql
@@ -51,3 +51,5 @@ CREATE TABLE `panel_pdf_template` (
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
+ALTER TABLE `chart_view` ADD COLUMN `y_axis_ext` LONGTEXT COMMENT '副轴' AFTER `y_axis`;
+UPDATE `chart_view` SET `y_axis_ext` = '[]';
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index 2368a2540f..d1fa9176c7 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -64,7 +64,7 @@
 
         <!--要生成的数据库表 -->
 
-        <table tableName="panel_pdf_template"/>
+        <table tableName="chart_view"/>
 <!--        <table tableName="sys_dict_item"/>-->
 <!--        <table tableName="dataset_table_field"/>-->
 <!--        <table tableName="v_chart">-->
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index dcacf8cb94..0922a804d4 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -856,7 +856,11 @@ export default {
     axis_value_max: 'Max',
     axis_value_split: 'Split',
     axis_auto: 'Auto',
-    table_info_switch: 'Switch detail table will clear dimensions'
+    table_info_switch: 'Switch detail table will clear dimensions',
+    drag_block_value_axis_main: 'Main Axis Value',
+    drag_block_value_axis_ext: 'Ext Axis Value',
+    yAxis_main: 'Main Axis',
+    yAxis_ext: 'Ext Axis'
   },
   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 212ea86cdf..662b612ad3 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -855,7 +855,11 @@ export default {
     axis_value_max: '最大值',
     axis_value_split: '間隔',
     axis_auto: '自動',
-    table_info_switch: '明細表切換將清空維度'
+    table_info_switch: '明細表切換將清空維度',
+    drag_block_value_axis_main: '主軸值',
+    drag_block_value_axis_ext: '副軸值',
+    yAxis_main: '主軸',
+    yAxis_ext: '副軸'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 458e68456f..b41423b932 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -855,7 +855,11 @@ export default {
     axis_value_max: '最大值',
     axis_value_split: '间隔',
     axis_auto: '自动',
-    table_info_switch: '明细表切换将清空维度'
+    table_info_switch: '明细表切换将清空维度',
+    drag_block_value_axis_main: '主轴值',
+    drag_block_value_axis_ext: '副轴值',
+    yAxis_main: '主轴',
+    yAxis_ext: '副轴'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index f7b06e566c..707bfbb606 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -145,6 +145,36 @@ export const DEFAULT_YAXIS_STYLE = {
     split: null
   }
 }
+export const DEFAULT_YAXIS_EXT_STYLE = {
+  show: true,
+  position: 'right',
+  name: '',
+  nameTextStyle: {
+    color: '#333333',
+    fontSize: 12
+  },
+  axisLabel: {
+    show: true,
+    color: '#333333',
+    fontSize: '12',
+    rotate: 0,
+    formatter: '{value}'
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
+  },
+  axisValue: {
+    auto: true,
+    min: null,
+    max: null,
+    split: null
+  }
+}
 export const DEFAULT_BACKGROUND_COLOR = {
   color: '#ffffff',
   alpha: 0
@@ -586,6 +616,7 @@ export const BASE_CHART_STRING = {
     legend: DEFAULT_LEGEND_STYLE,
     xAxis: DEFAULT_XAXIS_STYLE,
     yAxis: DEFAULT_YAXIS_STYLE,
+    yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
     background: DEFAULT_BACKGROUND_COLOR
   }),
   customFilter: '[]'
@@ -609,6 +640,7 @@ export const BASE_CHART = {
     legend: DEFAULT_LEGEND_STYLE,
     xAxis: DEFAULT_XAXIS_STYLE,
     yAxis: DEFAULT_YAXIS_STYLE,
+    yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
     background: DEFAULT_BACKGROUND_COLOR
   },
   customFilter: []
@@ -771,9 +803,14 @@ export const BASE_MIX = {
   xAxis: {
     data: []
   },
-  yAxis: {
-    type: 'value'
-  },
+  yAxis: [
+    {
+      type: 'value'
+    },
+    {
+      type: 'value'
+    }
+  ],
   series: [],
   dataZoom: [
     {
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 806310913d..853ee3cbab 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -78,7 +78,7 @@ export function componentStyle(chart_option, chart) {
         }
       }
     }
-    if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type === 'chart-mix')) {
+    if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter'))) {
       chart_option.yAxis.show = customStyle.yAxis.show
       chart_option.yAxis.position = customStyle.yAxis.position
       chart_option.yAxis.name = customStyle.yAxis.name
@@ -105,6 +105,60 @@ export function componentStyle(chart_option, chart) {
         }
       }
     }
+    if (customStyle.yAxis && chart.type === 'chart-mix') {
+      chart_option.yAxis[0].show = customStyle.yAxis.show
+      chart_option.yAxis[0].position = customStyle.yAxis.position
+      chart_option.yAxis[0].name = customStyle.yAxis.name
+      chart_option.yAxis[0].axisLabel = customStyle.yAxis.axisLabel
+      chart_option.yAxis[0].splitLine = customStyle.yAxis.splitLine
+      chart_option.yAxis[0].nameTextStyle = customStyle.yAxis.nameTextStyle
+
+      chart_option.yAxis[0].axisLabel.showMaxLabel = true
+      chart_option.yAxis[0].axisLabel.showMinLabel = true
+
+      if (!customStyle.yAxis.show) {
+        chart_option.yAxis[0].axisLabel.show = false
+      }
+
+      // 轴值设置
+      delete chart_option.yAxis[0].min
+      delete chart_option.yAxis[0].max
+      delete chart_option.yAxis[0].split
+      if (!chart.type.includes('horizontal')) {
+        if (customStyle.yAxis.axisValue && !customStyle.yAxis.axisValue.auto) {
+          customStyle.yAxis.axisValue.min && (chart_option.yAxis[0].min = parseFloat(customStyle.yAxis.axisValue.min))
+          customStyle.yAxis.axisValue.max && (chart_option.yAxis[0].max = parseFloat(customStyle.yAxis.axisValue.max))
+          customStyle.yAxis.axisValue.split && (chart_option.yAxis[0].interval = parseFloat(customStyle.yAxis.axisValue.split))
+        }
+      }
+
+      // axis ext
+      chart_option.yAxis[1].show = customStyle.yAxisExt.show
+      chart_option.yAxis[1].position = customStyle.yAxisExt.position
+      chart_option.yAxis[1].name = customStyle.yAxisExt.name
+      chart_option.yAxis[1].axisLabel = customStyle.yAxisExt.axisLabel
+      chart_option.yAxis[1].splitLine = customStyle.yAxisExt.splitLine
+      chart_option.yAxis[1].nameTextStyle = customStyle.yAxisExt.nameTextStyle
+
+      chart_option.yAxis[1].axisLabel.showMaxLabel = true
+      chart_option.yAxis[1].axisLabel.showMinLabel = true
+
+      if (!customStyle.yAxisExt.show) {
+        chart_option.yAxis[1].axisLabel.show = false
+      }
+
+      // 轴值设置
+      delete chart_option.yAxis[1].min
+      delete chart_option.yAxis[1].max
+      delete chart_option.yAxis[1].split
+      if (!chart.type.includes('horizontal')) {
+        if (customStyle.yAxisExt.axisValue && !customStyle.yAxisExt.axisValue.auto) {
+          customStyle.yAxisExt.axisValue.min && (chart_option.yAxis[1].min = parseFloat(customStyle.yAxisExt.axisValue.min))
+          customStyle.yAxisExt.axisValue.max && (chart_option.yAxis[1].max = parseFloat(customStyle.yAxisExt.axisValue.max))
+          customStyle.yAxisExt.axisValue.split && (chart_option.yAxis[1].interval = parseFloat(customStyle.yAxisExt.axisValue.split))
+        }
+      }
+    }
     if (customStyle.split && chart.type.includes('radar')) {
       chart_option.radar.name = customStyle.split.name
       chart_option.radar.splitNumber = customStyle.split.splitNumber
diff --git a/frontend/src/views/chart/chart/mix/mix.js b/frontend/src/views/chart/chart/mix/mix.js
index 493f304679..51d6e8b7ec 100644
--- a/frontend/src/views/chart/chart/mix/mix.js
+++ b/frontend/src/views/chart/chart/mix/mix.js
@@ -4,6 +4,7 @@ import { componentStyle } from '../common/common'
 export function baseMixOption(chart_option, chart) {
   // 处理shape attr
   let customAttr = {}
+  const yAxis = JSON.parse(chart.yaxis)
   if (chart.customAttr) {
     customAttr = JSON.parse(chart.customAttr)
     if (customAttr.color) {
@@ -68,6 +69,7 @@ export function baseMixOption(chart_option, chart) {
         y.label = customAttr.label
       }
       chart_option.legend.data.push(y.name)
+      i >= yAxis.length ? (y.yAxisIndex = 1) : (y.yAxisIndex = 0)
       chart_option.series.push(y)
     }
   }
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
new file mode 100644
index 0000000000..80050de243
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
@@ -0,0 +1,220 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="axisForm.show">
+          <el-form-item :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <span v-show="chart.type && !chart.type.includes('horizontal')">
+            <el-divider />
+            <el-form-item class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.axis_value') }}</span>
+                  <el-tooltip class="item" effect="dark" placement="bottom">
+                    <div slot="content">
+                      最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
+                      <br>
+                      请确保填写数值能正确计算，否则将无法正常显示轴值。
+                    </div>
+                    <i class="el-icon-info" style="cursor: pointer;" />
+                  </el-tooltip>
+                </span>
+              </span>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="!axisForm.axisValue.auto">
+              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
+                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
+                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_value_split')" class="form-item">
+                <el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
+              </el-form-item>
+            </span>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.splitLine.show">
+            <el-form-item :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_type')" class="form-item">
+              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
+                <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
+                <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
+                <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.axisLabel.show">
+            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.content_formatter')" class="form-item">
+            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'YAxisExtSelector',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
+      isSetting: false,
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        // if (!chart.customStyle.yAxisExt) {
+        //   chart.customStyle.yAxisExt = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE))
+        // }
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.yAxisExt) {
+          this.axisForm = customStyle.yAxisExt
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.nameTextStyle))
+          }
+          if (!this.axisForm.axisValue) {
+            this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeYAxisStyle() {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onChangeYAxisForm', this.axisForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
new file mode 100644
index 0000000000..2ec9104734
--- /dev/null
+++ b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
@@ -0,0 +1,284 @@
+<template>
+  <span>
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+      <span style="float: left">
+        <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+        <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+        <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+        <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+        <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'bar'" icon-class="bar" class-name="field-icon-sort" />
+        <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'line'" icon-class="line" class-name="field-icon-sort" />
+        <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'scatter'" icon-class="scatter" class-name="field-icon-sort" />
+        <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+        <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+      </span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+    </el-tag>
+    <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+          <span style="float: left">
+            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'bar'" icon-class="bar" class-name="field-icon-sort" />
+            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'line'" icon-class="line" class-name="field-icon-sort" />
+            <svg-icon v-if="chart.type ==='chart-mix' && item.chartType === 'scatter'" icon-class="scatter" class-name="field-icon-sort" />
+            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+          </span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-show="chart.type ==='chart-mix'">
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="switchChartType">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-s-data" />
+                  <span>{{ $t('chart.chart_type') }}</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeSwitch('bar')">{{ $t('chart.chart_bar') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSwitch('line')">{{ $t('chart.chart_line') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSwitch('scatter')">{{ $t('chart.chart_scatter') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item v-show="chart.type !== 'table-info'" :divided="chart.type === 'chart-mix'">
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-notebook-2" />
+                  <span>{{ $t('chart.summary') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.summary) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-if="item.id === 'count' || item.deType === 0 || item.deType === 1" :command="beforeSummary('count')">{{ $t('chart.count') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('stddev_pop')">{{ $t('chart.stddev_pop') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('var_pop')">{{ $t('chart.var_pop') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <!-- 快速计算先隐藏-->
+          <!--          <el-dropdown-item v-if="item.id !== 'count'">-->
+          <!--            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">-->
+          <!--              <span class="el-dropdown-link inner-dropdown-menu">-->
+          <!--                <span>-->
+          <!--                  <i class="el-icon-s-grid" />-->
+          <!--                  <span>{{ $t('chart.quick_calc') }}</span>-->
+          <!--                  <span class="summary-span-item">(无)</span>-->
+          <!--                </span>-->
+          <!--                <i class="el-icon-arrow-right el-icon&#45;&#45;right" />-->
+          <!--              </span>-->
+          <!--              <el-dropdown-menu slot="dropdown">-->
+          <!--                <el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item>-->
+          <!--              </el-dropdown-menu>-->
+          <!--            </el-dropdown>-->
+          <!--          </el-dropdown-item>-->
+          <el-dropdown-item :divided="chart.type !== 'table-info'">
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-sort" />
+                  <span>{{ $t('chart.sort') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.sort) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
+            <span>{{ $t('chart.filter') }}...</span>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+            <span>{{ $t('chart.show_name_set') }}</span>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+            <span>{{ $t('chart.delete') }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'QuotaExtItem',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'rename':
+          this.showRename()
+          break
+        case 'remove':
+          this.removeItem()
+          break
+        case 'filter':
+          this.editFilter()
+          break
+        default:
+          break
+      }
+    },
+    beforeClickItem(type) {
+      return {
+        type: type
+      }
+    },
+
+    summary(param) {
+      // console.log(param)
+      this.item.summary = param.type
+      this.$emit('onQuotaItemChange', this.item)
+    },
+    beforeSummary(type) {
+      return {
+        type: type
+      }
+    },
+
+    switchChartType(param) {
+      // console.log(param)
+      this.item.chartType = param.type
+      this.$emit('onQuotaItemChange', this.item)
+    },
+    beforeSwitch(type) {
+      return {
+        type: type
+      }
+    },
+
+    quickCalc(param) {
+
+    },
+    beforeQuickCalc(type) {
+      return {
+        type: type
+      }
+    },
+
+    sort(param) {
+      // console.log(param)
+      this.item.sort = param.type
+      this.$emit('onQuotaItemChange', this.item)
+    },
+    beforeSort(type) {
+      return {
+        type: type
+      }
+    },
+    showRename() {
+      this.item.index = this.index
+      this.item.renameType = 'quotaExt'
+      this.$emit('onNameEdit', this.item)
+    },
+    removeItem() {
+      this.item.index = this.index
+      this.item.removeType = 'quotaExt'
+      this.$emit('onQuotaItemRemove', this.item)
+    },
+    editFilter() {
+      this.item.index = this.index
+      this.item.filterType = 'quotaExt'
+      this.$emit('editItemFilter', this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: flex;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    width: 159px;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+  .summary-span-item{
+    margin-left: 4px;
+    color: #878d9f;
+  }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;
+    position: absolute;
+    right: 30px;
+  }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
+
+  .item-span-style{
+    display: inline-block;
+    width: 70px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index 314c52aec2..dbf6e00916 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -220,10 +220,12 @@ export default {
     },
     removeItem() {
       this.item.index = this.index
+      this.item.removeType = 'quota'
       this.$emit('onQuotaItemRemove', this.item)
     },
     editFilter() {
       this.item.index = this.index
+      this.item.filterType = 'quota'
       this.$emit('editItemFilter', this.item)
     }
   }
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 3ecc6f7020..3dccf80703 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -17,7 +17,7 @@
     >
       <ux-table-column
         v-for="field in fields"
-        :key="field.dataeaseName"
+        :key="Math.random()"
         :field="field.dataeaseName"
         :resizable="true"
         sortable
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 8cf053eaf8..e4aead51a2 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -327,6 +327,7 @@ import {
   DEFAULT_TOOLTIP,
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
+  DEFAULT_YAXIS_EXT_STYLE,
   DEFAULT_BACKGROUND_COLOR,
   DEFAULT_SPLIT
 } from '../chart/chart'
@@ -739,11 +740,13 @@ export default {
         legend: DEFAULT_LEGEND_STYLE,
         xAxis: DEFAULT_XAXIS_STYLE,
         yAxis: DEFAULT_YAXIS_STYLE,
+        yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
         background: DEFAULT_BACKGROUND_COLOR,
         split: DEFAULT_SPLIT
       })
       view.xaxis = JSON.stringify([])
       view.yaxis = JSON.stringify([])
+      view.yaxisExt = JSON.stringify([])
       view.extStack = JSON.stringify([])
       view.customFilter = JSON.stringify([])
       view.drillFields = JSON.stringify([])
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index cedd46a86e..eb4cf6d252 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -287,7 +287,7 @@
                   <el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
                     <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_value_axis') }}</span>
+                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter'))">{{ $t('chart.drag_block_value_axis') }}</span>
                       <span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
                       <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
                       <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
@@ -295,6 +295,7 @@
                       <span v-else-if="view.type && view.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
                       <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>{{ $t('chart.quota') }}</span>
                     </span>
@@ -316,6 +317,30 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
+                  <el-row v-if="view.type && view.type === 'chart-mix'" class="padding-lr" style="margin-top: 6px;">
+                    <span style="width: 80px;text-align: right;">
+                      <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
+                      /
+                      <span>{{ $t('chart.quota') }}</span>
+                    </span>
+                    <draggable
+                      v-model="view.yaxisExt"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      group="drag"
+                      animation="300"
+                      :move="onMove"
+                      class="drag-block-style"
+                      @add="addYaxisExt"
+                      @update="save(true)"
+                    >
+                      <transition-group class="draggable-group">
+                        <quota-ext-item v-for="(item,index) in view.yaxisExt" :key="item.id" :param="param" :index="index" :item="item" :chart="chart" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
+                      </transition-group>
+                    </draggable>
+                    <div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
+                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                    </div>
+                  </el-row>
                   <el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.stack_item') }}</span>
@@ -457,9 +482,12 @@
                   <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')" name="xAxis" :title="$t('chart.xAxis')">
                     <x-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')" name="yAxis" :title="$t('chart.yAxis')">
+                  <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')" name="yAxis" :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')">
                     <y-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
                   </el-collapse-item>
+                  <el-collapse-item v-show="view.type && view.type === 'chart-mix'" name="yAxisExt" :title="$t('chart.yAxis_ext')">
+                    <y-axis-ext-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisExtForm" />
+                  </el-collapse-item>
                   <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>
@@ -619,7 +647,8 @@ import {
   DEFAULT_TOOLTIP,
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
-  DEFAULT_SPLIT
+  DEFAULT_SPLIT,
+  DEFAULT_YAXIS_EXT_STYLE
 } from '../chart/chart'
 import ColorSelector from '../components/shape-attr/ColorSelector'
 import SizeSelector from '../components/shape-attr/SizeSelector'
@@ -639,9 +668,13 @@ import LabelNormal from '../components/normal/LabelNormal'
 import TableSelector from './TableSelector'
 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'
 export default {
   name: 'ChartEdit',
   components: {
+    YAxisExtSelector,
+    QuotaExtItem,
     FilterItem,
     FieldEdit,
     SplitSelector,
@@ -686,6 +719,7 @@ export default {
       view: {
         xaxis: [],
         yaxis: [],
+        yaxisExt: [],
         extStack: [],
         drillFields: [],
         extBubble: [],
@@ -703,6 +737,7 @@ export default {
           legend: DEFAULT_LEGEND_STYLE,
           xAxis: DEFAULT_XAXIS_STYLE,
           yAxis: DEFAULT_YAXIS_STYLE,
+          yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
           background: DEFAULT_BACKGROUND_COLOR,
           split: DEFAULT_SPLIT
         },
@@ -878,6 +913,26 @@ export default {
           ele.filter = []
         }
       })
+      if (view.type === 'chart-mix') {
+        view.yaxisExt.forEach(function(ele) {
+          if (!ele.chartType) {
+            ele.chartType = 'bar'
+          }
+          if (!ele.summary || ele.summary === '') {
+            if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
+              ele.summary = 'count'
+            } else {
+              ele.summary = 'sum'
+            }
+          }
+          if (!ele.sort || ele.sort === '') {
+            ele.sort = 'none'
+          }
+          if (!ele.filter) {
+            ele.filter = []
+          }
+        })
+      }
       view.extStack.forEach(function(ele) {
         if (!ele.sort || ele.sort === '') {
           ele.sort = 'none'
@@ -924,6 +979,7 @@ export default {
       })
       view.xaxis = JSON.stringify(view.xaxis)
       view.yaxis = JSON.stringify(view.yaxis)
+      view.yaxisExt = JSON.stringify(view.yaxisExt)
       view.customAttr = JSON.stringify(view.customAttr)
       view.customStyle = JSON.stringify(view.customStyle)
       view.customFilter = JSON.stringify(view.customFilter)
@@ -970,6 +1026,7 @@ export default {
           this.view = JSON.parse(JSON.stringify(response.data))
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+          this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
           this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
           this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
           this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
@@ -1009,6 +1066,7 @@ export default {
           this.view = JSON.parse(JSON.stringify(response.data))
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+          this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
           this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
           this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
           this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
@@ -1058,7 +1116,11 @@ export default {
     },
 
     quotaItemRemove(item) {
-      this.view.yaxis.splice(item.index, 1)
+      if (item.removeType === 'quota') {
+        this.view.yaxis.splice(item.index, 1)
+      } else if (item.removeType === 'quotaExt') {
+        this.view.yaxisExt.splice(item.index, 1)
+      }
       this.save(true)
     },
 
@@ -1103,6 +1165,11 @@ export default {
       this.save()
     },
 
+    onChangeYAxisExtForm(val) {
+      this.view.customStyle.yAxisExt = val
+      this.save()
+    },
+
     onChangeBackgroundForm(val) {
       this.view.customStyle.background = val
       this.save()
@@ -1156,7 +1223,11 @@ export default {
           return
         }
       }
-      this.view.yaxis[this.quotaItem.index].filter = this.quotaItem.filter
+      if (this.quotaItem.filterType === 'quota') {
+        this.view.yaxis[this.quotaItem.index].filter = this.quotaItem.filter
+      } else if (this.quotaItem.filterType === 'quotaExt') {
+        this.view.yaxisExt[this.quotaItem.index].filter = this.quotaItem.filter
+      }
       this.save(true)
       this.closeQuotaFilter()
     },
@@ -1201,6 +1272,8 @@ export default {
             this.view.yaxis[this.itemForm.index].name = this.itemForm.name
           } else if (this.itemForm.renameType === 'dimension') {
             this.view.xaxis[this.itemForm.index].name = this.itemForm.name
+          } else if (this.itemForm.renameType === 'quotaExt') {
+            this.view.yaxisExt[this.itemForm.index].name = this.itemForm.name
           }
           this.save(true)
           this.closeRename()
@@ -1325,6 +1398,14 @@ export default {
       this.dragMoveDuplicate(this.view.yaxis, e)
       this.save(true)
     },
+    addYaxisExt(e) {
+      if (this.view.type === 'map' && this.view.yaxisExt.length > 1) {
+        this.view.yaxisExt = [this.view.yaxisExt[0]]
+      }
+      this.dragCheckType(this.view.yaxisExt, 'q')
+      this.dragMoveDuplicate(this.view.yaxisExt, e)
+      this.save(true)
+    },
     moveToDimension(e) {
       this.dragCheckType(this.dimensionData, 'd')
       this.dragMoveDuplicate(this.dimensionData, e)