feat(视图):图表类型鼠标放上后，显示提示

frontend/src/lang/en.js

@@ -679,7 +679,20 @@ export default {
     title_limit: 'Title cannot be greater than 50 characters',
     filter_condition: 'Filter Condition',
     filter_field_can_null: 'Filter field must choose',
-    preview_100_data: 'Preview 100 rows'
+    preview_100_data: 'Preview 100 rows',
+    chart_table_normal: 'Detail Table',
+    chart_card: 'KPI Card',
+    chart_bar: 'Base Bar',
+    chart_bar_stack: 'Stack Bar',
+    chart_bar_horizontal: 'Horizontal Bar',
+    chart_bar_stack_horizontal: 'Stack Horizontal Bar',
+    chart_line: 'Base Line',
+    chart_line_stack: 'Stack Line',
+    chart_pie: 'Pie',
+    chart_pie_rose: 'Rose Pie',
+    chart_funnel: 'Funnel',
+    chart_radar: 'Radar',
+    chart_gauge: 'Gauge'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -679,7 +679,20 @@ export default {
     title_limit: '標題不能大於50個字符',
     filter_condition: '過濾條件',
     filter_field_can_null: '過濾字段必填',
-    preview_100_data: '預覽前100條記錄'
+    preview_100_data: '預覽前100條記錄',
+    chart_table_normal: '明細表',
+    chart_card: '指標卡',
+    chart_bar: '基礎柱狀圖',
+    chart_bar_stack: '堆疊柱狀圖',
+    chart_bar_horizontal: '橫向柱狀圖',
+    chart_bar_stack_horizontal: '橫向堆疊柱狀圖',
+    chart_line: '基礎折線圖',
+    chart_line_stack: '堆疊折線圖',
+    chart_pie: '餅圖',
+    chart_pie_rose: '南丁格爾玫瑰圖',
+    chart_funnel: '漏鬥圖',
+    chart_radar: '雷達圖',
+    chart_gauge: '儀表盤'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -679,7 +679,20 @@ export default {
     title_limit: '标题不能大于50个字符',
     filter_condition: '过滤条件',
     filter_field_can_null: '过滤字段必填',
-    preview_100_data: '预览前100条记录'
+    preview_100_data: '预览前100条记录',
+    chart_table_normal: '明细表',
+    chart_card: '指标卡',
+    chart_bar: '基础柱状图',
+    chart_bar_stack: '堆叠柱状图',
+    chart_bar_horizontal: '横向柱状图',
+    chart_bar_stack_horizontal: '横向堆叠柱状图',
+    chart_line: '基础折线图',
+    chart_line_stack: '堆叠折线图',
+    chart_pie: '饼图',
+    chart_pie_rose: '南丁格尔玫瑰图',
+    chart_funnel: '漏斗图',
+    chart_radar: '雷达图',
+    chart_gauge: '仪表盘'
   },
   dataset: {
     sheet_warn: '有多个Sheet页，默认抽取第一个',

frontend/src/views/chart/view/ChartEdit.vue

@@ -101,24 +101,49 @@
                 @change="save(true,'chart')"
               >
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                  <el-radio value="table-normal" label="table-normal"><svg-icon icon-class="table-normal" class="chart-icon" /></el-radio>
-                  <el-radio value="text" label="text"><svg-icon icon-class="text" class="chart-icon" /></el-radio>
-                  <el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
-                  <el-radio value="bar-stack" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
-                  <el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_table_normal')" placement="bottom">
+                    <el-radio value="table-normal" label="table-normal"><svg-icon icon-class="table-normal" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_card')" placement="bottom">
+                    <el-radio value="text" label="text"><svg-icon icon-class="text" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_bar')" placement="bottom">
+                    <el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_bar_stack')" placement="bottom">
+                    <el-radio value="bar-stack" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_bar_horizontal')" placement="bottom">
+                    <el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
+                  </el-tooltip>
                 </div>
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                  <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
-                  <el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
-                  <el-radio value="line-stack" label="line-stack"><svg-icon icon-class="line-stack" class="chart-icon" /></el-radio>
-                  <el-radio value="pie" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
-                  <el-radio value="pie-rose" label="pie-rose"><svg-icon icon-class="pie-rose" class="chart-icon" /></el-radio>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_bar_stack_horizontal')" placement="bottom">
+                    <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_line')" placement="bottom">
+                    <el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_line_stack')" placement="bottom">
+                    <el-radio value="line-stack" label="line-stack"><svg-icon icon-class="line-stack" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_pie')" placement="bottom">
+                    <el-radio value="pie" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_pie_rose')" placement="bottom">
+                    <el-radio value="pie-rose" label="pie-rose"><svg-icon icon-class="pie-rose" class="chart-icon" /></el-radio>
+                  </el-tooltip>
                 </div>
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                  <el-radio value="funnel" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
-                  <el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
-                  <el-radio value="gauge" label="gauge"><svg-icon icon-class="gauge" class="chart-icon" /></el-radio>
-                  <!--                  <el-radio value="scatter" label="scatter"><svg-icon icon-class="scatter" class="chart-icon" /></el-radio>-->
+                  <el-tooltip effect="dark" :content="$t('chart.chart_funnel')" placement="bottom">
+                    <el-radio value="funnel" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_radar')" placement="bottom">
+                    <el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
+                  </el-tooltip>
+                  <el-tooltip effect="dark" :content="$t('chart.chart_gauge')" placement="bottom">
+                    <el-radio value="gauge" label="gauge"><svg-icon icon-class="gauge" class="chart-icon" /></el-radio>
+                  </el-tooltip>
                   <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>