gjus

package.json

@@ -27,6 +27,7 @@
     "classnames": "^2.3.1",
     "clean-deep": "^3.4.0",
     "dayjs": "^1.10.7",
+    "echarts": "^5.3.3",
     "html-to-image": "^1.9.0",
     "html2canvas": "^1.4.1",
     "loaders.css": "^0.1.2",
@@ -41,6 +42,7 @@
     "vconsole": "^3.14.6",
     "vue": "^3.2.26",
     "vue-cropper": "^1.0.3",
+    "vue-echarts": "^6.2.3",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"
   },

src/teacher/income-consus/index.tsx

@@ -1,9 +1,65 @@
 import { Cell, Col, Row } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
+// import { use } from 'echarts/core'
+// import { CanvasRenderer } from 'echarts/renderers'
+// import { PieChart } from 'echarts/charts'
+// import {
+//   TitleComponent,
+//   TooltipComponent,
+//   LegendComponent
+// } from 'echarts/components'
+// import VChart, { THEME_KEY } from 'vue-echarts'
 
 export default defineComponent({
   name: 'IncomeConsus',
+  data() {
+    return {
+      options: {
+        title: {
+          text: 'Traffic Sources',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: [
+            'Direct',
+            'Email',
+            'Ad Networks',
+            'Video Ads',
+            'Search Engines'
+          ]
+        },
+        series: [
+          {
+            name: 'Traffic Sources',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [
+              { value: 335, name: 'Direct' },
+              { value: 310, name: 'Email' },
+              { value: 234, name: 'Ad Networks' },
+              { value: 135, name: 'Video Ads' },
+              { value: 1548, name: 'Search Engines' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
   render() {
     return (
       <div class={styles.incomeConsus}>
@@ -50,6 +106,8 @@ export default defineComponent({
           </Row>
         </div>
 
+        <VChart option={this.options} />
+
         <div class={styles.incomeTitle}>
           <i></i>收入结构
         </div>