文本分析饼状图

src/views/Textanalysis/index.vue

@@ -226,38 +226,59 @@
           <div class="right_main">
             <div style="display: flex">
               <div class="right_main_top">
-                <div title="采用TTR公式衡量文本丰富度，音节丰富度指不同音节数量与总数量的比值。">
-                  <span
-                    >音节丰富度
-                    <span style="margin-left: 5px">
-                      {{ (difficulty.pinyinDifficulty * 1).toFixed(2) }}
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="采用TTR公式衡量文本丰富度，音节丰富度指不同音节数量与总数量的比值。"
+                  placement="bottom"
+                >
+                  <div>
+                    <span
+                      >音节丰富度
+                      <span style="margin-left: 5px">
+                        {{ (difficulty.pinyinDifficulty * 1).toFixed(2) }}
+                      </span>
                     </span>
-                  </span>
-                  <span class="line">|</span>
-                  <span>{{ base.pinyinCount }} / {{ base.pinyinTextCount }}</span>
-                </div>
+                    <span class="line">|</span>
+                    <span>{{ base.pinyinCount }} / {{ base.pinyinTextCount }}</span>
+                  </div></el-tooltip
+                >
                 <div class="twoline"></div>
-                <div title="采用TTR公式衡量文本丰富度，汉字丰富度指不同汉字数量与总数量的比值。">
-                  <span
-                    >汉字丰富度
-                    <span style="margin-left: 5px">
-                      {{ (difficulty.wordDifficulty * 1).toFixed(2) }}
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="采用TTR公式衡量文本丰富度，汉字丰富度指不同汉字数量与总数量的比值。"
+                  placement="bottom"
+                >
+                  <div>
+                    <span
+                      >汉字丰富度
+                      <span style="margin-left: 5px">
+                        {{ (difficulty.wordDifficulty * 1).toFixed(2) }}
+                      </span>
                     </span>
-                  </span>
-                  <span class="line">|</span>
-                  <span>{{ base.wordCount }} / {{ base.wordTextCount }}</span>
-                </div>
+                    <span class="line">|</span>
+                    <span>{{ base.wordCount }} / {{ base.wordTextCount }}</span>
+                  </div>
+                </el-tooltip>
                 <div class="twoline"></div>
-                <div title="采用TTR公式衡量文本丰富度，词汇丰富度指不同词汇数量与总数量的比值。">
-                  <span
-                    >词汇丰富度
-                    <span style="margin-left: 5px">
-                      {{ (difficulty.vocabularyDifficulty * 1).toFixed(2) }}
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="采用TTR公式衡量文本丰富度，词汇丰富度指不同词汇数量与总数量的比值。"
+                  placement="bottom"
+                >
+                  <div>
+                    <span
+                      >词汇丰富度
+                      <span style="margin-left: 5px">
+                        {{ (difficulty.vocabularyDifficulty * 1).toFixed(2) }}
+                      </span>
                     </span>
-                  </span>
-                  <span class="line">|</span>
-                  <span>{{ base.vocabularyCount }} / {{ base.vocabularyTextCount }}</span>
-                </div>
+                    <span class="line">|</span>
+                    <span>{{ base.vocabularyCount }} / {{ base.vocabularyTextCount }}</span>
+                  </div>
+                </el-tooltip>
               </div>
               <span class="edit-btn" @click="editArticle()"><i class="el-icon-edit"></i>修改文本</span>
             </div>
@@ -1400,7 +1421,7 @@ export default {
         let newnode = document.createElement('div');
         newnode.id = 'main_echarts';
         newnode.style.width = '342px';
-        newnode.style.height = '256px';
+        newnode.style.height = '310px';
         newnode.style.margin = '0 auto';
 
         let qianNode = document.getElementById('distributionOperation');
@@ -1497,6 +1518,9 @@ export default {
           });
           option = {
             color: this.xifen ? color2 : color1,
+            tooltip: {
+              trigger: 'item',
+            },
             xAxis: {
               show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
               axisTick: {
@@ -1517,14 +1541,17 @@ export default {
                 radius: ['20%', '50%'],
                 data: newdata,
                 label: {
-                  fontSize: 8,
+                  fontSize: 12,
                 },
                 itemStyle: {
                   borderColor: '#f5f5f5',
-                  borderWidth: 5,
+                  borderWidth: 2,
                 },
               },
             ],
+            grid: {
+              top: 'middle',
+            },
           };
         } else if (type === '柱状图') {
           let that = this;
@@ -1563,7 +1590,7 @@ export default {
             grid: {
               left: 20,
               right: 20,
-              bottom: 0,
+              bottom: 20,
               containLabel: true,
             },
             series: [
@@ -1619,7 +1646,7 @@ export default {
             grid: {
               left: 20,
               right: 20,
-              bottom: 0,
+              bottom: 20,
               containLabel: true,
             },
 
@@ -1670,6 +1697,9 @@ export default {
             radar: {
               indicator: leidaList,
               radius: '50%',
+              axisName: {
+                color: '#5f5f5',
+              },
             },
             series: buildSeries(value),
           };
@@ -1705,6 +1735,7 @@ export default {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    fontSize: 12,
                   },
                 },
               },
@@ -2323,7 +2354,6 @@ export default {
           position: relative;
           width: 352px;
           height: 374px;
-          padding-top: 24px;
           margin: 0 auto;
           margin-top: 24px;
           background: #f5f5f5;