优化

src/views/subject-echarts/component/CircleProgress.module.less

@@ -22,9 +22,6 @@
     width: 100%;
     text-align: center;
 }
-.countType{
-    transform: scaleX(0.7);
-}
 .des{
     position: absolute;
     left: 0;

src/views/subject-echarts/component/CircleProgress.tsx

@@ -40,6 +40,14 @@ export default defineComponent({
         default: '总达标率'
     }
   },
+  watch:{
+    value(value) {
+      this.now = 0
+      this.$nextTick(() => {
+        this.run()
+      })
+    }
+  },
   computed: {
     percentage() {
       return this.value

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

@@ -1,5 +1,6 @@
 .subjectEcharts {
     padding: 12px 12px 30px 12px;
+    font-family: 'DINA';
 }
 
 .container {

src/views/subject-echarts/index.tsx

@@ -24,8 +24,7 @@ const symbolData: any = {
   type: 'line',
   symbol: 'circle',
   symbolSize: 6,
-  triggerLineEvent: true,
-  stack: 'Total'
+  triggerLineEvent: true
 }
 export default defineComponent({
   name: 'subject-echarts',
@@ -81,53 +80,11 @@ export default defineComponent({
     const handleInit = (data: any) => {
       const { content } = data
       if (!content) return
-      if (myChart){
-        myChart.clear()
+      if (myChart) {
+        myChart.dispose()
       }
       activeData.sum = content.sum || {}
-      activeData.practiceThisWeeks =
-        content.practiceThisWeeks
-        // .concat(
-        //   ...[
-        //     {
-        //       memberNum: 1,
-        //       noMemberNum: 10,
-        //       noPassNum: 12,
-        //       passNum: 30,
-        //       practiceRate: 20,
-        //       subjectName: '单簧管',
-        //       trainingNum: 0
-        //     },
-        //     {
-        //       memberNum: 1,
-        //       noMemberNum: 20,
-        //       noPassNum: 31,
-        //       passNum: 10,
-        //       practiceRate: 30,
-        //       subjectName: '萨克斯',
-        //       trainingNum: 0
-        //     },
-        //     {
-        //       memberNum: 1,
-        //       noMemberNum: 10,
-        //       noPassNum: 16,
-        //       passNum: 40,
-        //       practiceRate: 20,
-        //       subjectName: '小号',
-        //       trainingNum: 0
-        //     },
-        //     {
-        //       memberNum: 1,
-        //       noMemberNum: 10,
-        //       noPassNum: 16,
-        //       passNum: 40,
-        //       practiceRate: 20,
-        //       subjectName: '小号',
-        //       trainingNum: 0
-        //     }
-        //   ]
-        // ) 
-        || []
+      activeData.practiceThisWeeks = content.practiceThisWeeks || []
       const chartDom = document.getElementById('subjectEcharts')!
       myChart = echarts.init(chartDom)
       const option: EChartsOption = {
@@ -136,13 +93,11 @@ export default defineComponent({
           showContent: false,
           axisPointer: {
             type: 'line',
-            snap: false,
             lineStyle: {
-              width: 45,
+              width: 30,
+              type: 'solid',
               opacity: 0.5,
-              cap: 'butt',
-              join: 'miter'
-            }
+            },
           }
         },
         grid: {
@@ -170,7 +125,7 @@ export default defineComponent({
         },
         xAxis: {
           type: 'category',
-          axisLine:{
+          axisLine: {
             show: false
           },
           axisLabel: {
@@ -179,9 +134,10 @@ export default defineComponent({
             fontSize: 9
           },
           axisTick: {
+            alignWithLabel: true,
             show: false
           },
-          boundaryGap: false,
+          // boundaryGap: false,
           data: subjects.value
         },
         yAxis: [
@@ -194,28 +150,22 @@ export default defineComponent({
                 color: '#999'
               }
             },
-            splitLine:{
+            splitLine: {
               show: true, // 是否显示y轴分割线
               lineStyle: {
-                color: ['rgba(249, 234, 220, 1)'], // 分隔线颜色。
+                color: ['rgba(249, 234, 220, 1)'] // 分隔线颜色。
               }
             },
-            interval: 100,
             min: 0,
-            max: 500,
-            axisLabel: {
-              formatter: function(value: number, index: number) {
-                return value + ''
-              }
-            }
+            splitNumber: 5
           },
           {
             type: 'value',
             position: 'right',
-            splitLine:{
+            splitLine: {
               show: true, // 是否显示y轴分割线
               lineStyle: {
-                color: ['rgba(249, 234, 220, 1)'], // 分隔线颜色。
+                color: ['rgba(249, 234, 220, 1)'] // 分隔线颜色。
               }
             },
             axisLine: {
@@ -227,8 +177,9 @@ export default defineComponent({
             interval: 20,
             min: 0,
             max: 100,
+            splitNumber: 5,
             axisLabel: {
-              formatter: function(value: number, index: number) {
+              formatter: function (value: number, index: number) {
                 return value + '%'
               }
             }
@@ -240,19 +191,22 @@ export default defineComponent({
               name: activeData.colors[index].text,
               color: activeData.colors[index].color,
               ...symbolData,
-              yAxisIndex: index === 0 ? 1 : 0,
+              // yAxisIndex: index === 0 ? 1 : 0,
               data: activeData.practiceThisWeeks.map((n) => n[key])
             }
           }
         )
       }
-
+      let maxNum = Math.max(...(option.series as any[]).map((n) => n.data).flat())
+      let minNum = Math.min(...(option.series as any[]).map((n) => n.data).flat())
+      maxNum = Math.ceil(maxNum / 9.5) * 10
+      minNum = Math.floor(minNum / 12) * 10
+      ;(option.yAxis as any[])[0].interval = Math.ceil(Math.ceil(maxNum) / 5)
+      ;(option.yAxis as any[])[0].max = Math.ceil(Math.ceil(maxNum) / 5) * 5
       option && myChart.setOption(option)
       myChart.on('highlight', function (params: any) {
-        // console.log("🚀 ~ params:", params)
         activeData.index = params.batch[0].dataIndex
       })
-      // console.log('🚀 ~ myChart:', myChart)
     }
     const handleAction = (index: number) => {
       activeData.index = index
@@ -270,8 +224,33 @@ export default defineComponent({
       })
       item.select = !item.select
     }
+    const handleMock = () => {
+      const resulst = {
+        sum: {
+          noMemberNum: Math.floor(Math.random() * 1000),
+          noPassNum: Math.floor(Math.random() * 1000),
+          passNum: Math.floor(Math.random() * 1000),
+          practiceRate: Math.ceil(Math.random() * 100)
+        },
+        practiceThisWeeks: new Array(Math.ceil(Math.random() * 9)).fill(1).map((n, i) => {
+          return {
+            /** 声部名称 */
+          subjectName: '声部' + (i + 1),
+          /**达标率 */
+          practiceRate: Math.ceil(Math.random() * 100),
+          /** 达标人数 */
+          passNum: Math.floor(Math.random() * 1000),
+          /** 未达标人数 */
+          noPassNum: Math.floor(Math.random() * 1000),
+          /** 非会员 */
+          noMemberNum: Math.floor(Math.random() * 1000)
+          }
+        })
+      }
+      handleInit({ content: resulst })
+    }
     onMounted(() => {
-      handleInit({ content: { practiceThisWeeks: [], sum: {} } })
+      handleMock()
       listenerMessage('setAccomanyEcharts', handleInit)
       postMessage({
         api: 'setAccomanyEcharts'
@@ -282,7 +261,7 @@ export default defineComponent({
     })
     const goto = () => {
       const url = location.origin + location.pathname + `#/exercise-record`
-      console.log("🚀 ~ url:", url)
+      console.log('🚀 ~ url:', url)
       postMessage({
         api: 'openWebView',
         content: {
@@ -295,7 +274,10 @@ export default defineComponent({
       <div class={styles.subjectEcharts}>
         <div class={[styles.container, styles.ensemble]}>
           <div class={styles.head}>
-            <div class={styles.headLeft} onClick={() => handleInit({ content: { practiceThisWeeks: [], sum: {} } })}>
+            <div
+              class={styles.headLeft}
+              onClick={() => handleMock()}
+            >
               <img class={styles.icon} src={iconEnsemble} />
               <div>总体情况</div>
             </div>
@@ -303,11 +285,10 @@ export default defineComponent({
 
           <div class={styles.content} onClick={() => goto()}>
             <CircleProgress
-              value={activeData.sum.practiceRate}
+              value={Number(activeData.sum.practiceRate)}
               size={80}
               color="#FF8057"
               strokeWidth={6}
-              duration={3000}
             />
             <div class={styles.items}>
               <div class={styles.item}>
@@ -358,9 +339,15 @@ export default defineComponent({
           <div class={styles.headLabelWrap}>
             {activeData.colors.map((c, cIndex) => {
               return (
-                <div class={styles.headLabel} style={{display: c.select ? '' : 'none'}}>
-                  <div class={styles.headLabelDot} style={{background: c.color, color: c.color}}></div>
-                  <div style={{color: c.color}}>{activeData.sum[c.key] || 0}{cIndex === 0 ? '%' : '人'}</div>
+                <div class={styles.headLabel} style={{ display: c.select ? '' : 'none' }}>
+                  <div
+                    class={styles.headLabelDot}
+                    style={{ background: c.color, color: c.color }}
+                  ></div>
+                  <div style={{ color: c.color }}>
+                    {activeData.sum[c.key] || 0}
+                    {cIndex === 0 ? '%' : '人'}
+                  </div>
                 </div>
               )
             })}
@@ -386,7 +373,10 @@ export default defineComponent({
                   return (
                     <div class={styles.item}>
                       <div class={styles.itemNum}>
-                        <span style={{ color: c.color }}>{item[c.key]}</span>
+                        <span style={{ color: c.color }}>
+                          {item[c.key]}
+                          {index === 0 ? '%' : ''}
+                        </span>
                       </div>
                       <div class={styles.itemTitle}>
                         {c.text}