图表

src/views/subject-echarts/index.module.less

@@ -51,6 +51,24 @@
         }
     }
 }
+.headLabelWrap{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    font-size: 10px;
+    .headLabel{
+        margin: 0 6px;
+        display: flex;
+        align-items: center;
+    }
+    .headLabelDot{
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        margin-right: 3px;
+    }
+}
 
 .content {
     display: flex;

src/views/subject-echarts/index.tsx

@@ -48,25 +48,29 @@ export default defineComponent({
           color: '#FF8057',
           borderColor: 'rgba(255,128,87,0.5)',
           text: '达标率',
-          select: true
+          select: true,
+          key: 'practiceRate'
         },
         {
           color: '#2FC58D',
           borderColor: 'rgba(47,197,141,0.5)',
           text: '达标',
-          select: true
+          select: true,
+          key: 'passNum'
         },
         {
           color: '#4A99FF',
           borderColor: 'rgba(74,153,255,0.5)',
           text: '未达标',
-          select: true
+          select: true,
+          key: 'noPassNum'
         },
         {
           color: '#9884BA',
           borderColor: 'rgba(152,132,186,0.5)',
           text: '非会员',
-          select: true
+          select: true,
+          key: 'noMemberNum'
         }
       ]
     })
@@ -132,10 +136,12 @@ export default defineComponent({
           showContent: false,
           axisPointer: {
             type: 'line',
+            snap: false,
             lineStyle: {
-              width: 40,
+              width: 45,
               opacity: 0.5,
-              cap: 'square'
+              cap: 'butt',
+              join: 'miter'
             }
           }
         },
@@ -147,10 +153,10 @@ export default defineComponent({
           containLabel: true
         },
         legend: {
-          type: 'scroll',
-          right: 12,
-          itemGap: 0,
-          itemWidth: 2,
+          type: 'plain',
+          align: 'auto',
+          itemGap: 10,
+          itemWidth: 6,
           itemStyle: {
             opacity: 0
           },
@@ -164,6 +170,9 @@ export default defineComponent({
         },
         xAxis: {
           type: 'category',
+          axisLine:{
+            show: false
+          },
           axisLabel: {
             interval: 0,
             color: '#333',
@@ -180,26 +189,50 @@ export default defineComponent({
             type: 'value',
             position: 'left',
             axisLine: {
-              show: true,
+              show: false,
               lineStyle: {
                 color: '#999'
               }
             },
+            splitLine:{
+              show: true, // 是否显示y轴分割线
+              lineStyle: {
+                color: ['rgba(249, 234, 220, 1)'], // 分隔线颜色。
+              }
+            },
+            interval: 100,
+            min: 0,
+            max: 500,
             axisLabel: {
-              formatter: '{value}'
+              formatter: function(value: number, index: number) {
+                console.log(value, index)
+                return value + ''
+              }
             }
           },
           {
             type: 'value',
             position: 'right',
+            splitLine:{
+              show: true, // 是否显示y轴分割线
+              lineStyle: {
+                color: ['rgba(249, 234, 220, 1)'], // 分隔线颜色。
+              }
+            },
             axisLine: {
-              show: true,
+              show: false,
               lineStyle: {
                 color: '#999'
               }
             },
+            interval: 20,
+            min: 0,
+            max: 100,
             axisLabel: {
-              formatter: '{value} %'
+              formatter: function(value: number, index: number) {
+                console.log(value, index)
+                return value + '%'
+              }
             }
           }
         ],
@@ -249,6 +282,16 @@ export default defineComponent({
     onBeforeUnmount(() => {
       removeListenerMessage('setAccomanyEcharts', handleInit)
     })
+    const goto = () => {
+      const url = location.origin + location.pathname + `#/exercise-record`
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url: url,
+          orientation: 1
+        }
+      })
+    }
     return () => (
       <div class={styles.subjectEcharts}>
         <div class={[styles.container, styles.ensemble]}>
@@ -259,7 +302,7 @@ export default defineComponent({
             </div>
           </div>
 
-          <div class={styles.content}>
+          <div class={styles.content} onClick={() => goto()}>
             <CircleProgress
               value={activeData.sum.practiceRate}
               size={80}
@@ -313,6 +356,16 @@ export default defineComponent({
               ))}
             </div>
           </div>
+          <div class={styles.headLabelWrap}>
+            {activeData.colors.map((c, cIndex) => {
+              return (
+                <div class={styles.headLabel} style={{display: c.select && activeData.sum[c.key] ? '' : 'none'}}>
+                  <div class={styles.headLabelDot} style={{background: c.color, color: c.color}}></div>
+                  <div style={{color: c.color}}>{activeData.sum[c.key]}{cIndex === 0 ? '%' : '人'}</div>
+                </div>
+              )
+            })}
+          </div>
 
           <div id="subjectEcharts" class={styles.echartsMain}></div>
           {!activeData.practiceThisWeeks.length && <div class={styles.emtry}>暂无练习记录</div>}
@@ -334,7 +387,7 @@ export default defineComponent({
                   return (
                     <div class={styles.item}>
                       <div class={styles.itemNum}>
-                        <span style={{ color: c.color }}>{item.practiceRate}</span>
+                        <span style={{ color: c.color }}>{item[c.key]}</span>
                       </div>
                       <div class={styles.itemTitle}>
                         {c.text}