From 88e8cf1cd7a02d5745d58ead0ff0631e4c228c89 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 4 Jun 2021 17:27:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/view/ChartEdit.vue | 104 ++++++++++++--------
 1 file changed, 65 insertions(+), 39 deletions(-)

diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index bb32a871f1..a75f698825 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -101,49 +101,75 @@
                 @change="save(true,'chart')"
               >
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                  <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>
+                  <el-radio value="table-normal" label="table-normal">
+                    <span :title="$t('chart.chart_table_normal')">
+                      <svg-icon icon-class="table-normal" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="text" label="text">
+                    <span :title="$t('chart.chart_card')">
+                      <svg-icon icon-class="text" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="bar" label="bar">
+                    <span :title="$t('chart.chart_bar')">
+                      <svg-icon icon-class="bar" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="bar-stack" label="bar-stack">
+                    <span :title="$t('chart.chart_bar_stack')">
+                      <svg-icon icon-class="bar-stack" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="bar-horizontal" label="bar-horizontal">
+                    <span :title="$t('chart.chart_bar_horizontal')">
+                      <svg-icon icon-class="bar-horizontal" 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-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>
+                  <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
+                    <span :title="$t('chart.chart_bar_stack_horizontal')">
+                      <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="line" label="line">
+                    <span :title="$t('chart.chart_line')">
+                      <svg-icon icon-class="line" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="line-stack" label="line-stack">
+                    <span :title="$t('chart.chart_line_stack')">
+                      <svg-icon icon-class="line-stack" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="pie" label="pie">
+                    <span :title="$t('chart.chart_pie')">
+                      <svg-icon icon-class="pie" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="pie-rose" label="pie-rose">
+                    <span :title="$t('chart.chart_pie_rose')">
+                      <svg-icon icon-class="pie-rose" 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-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="funnel" label="funnel">
+                    <span :title="$t('chart.chart_funnel')">
+                      <svg-icon icon-class="funnel" class="chart-icon" />
+                    </span>
+                  </el-radio>
+                  <el-radio value="radar" label="radar">
+                    <span :title="$t('chart.chart_radar')">
+                      <svg-icon icon-class="radar" 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>
                   <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>