admin

12_vuecli/mediaapp/src/views/mine/MineScore.vue

@@ -8,31 +8,65 @@
         @click-left="$router.go(-1)"
       />
     </div>
-    <div id="map" ref="baidumap">我的成绩 </div>
+    <div class="echarts-content" ref="echarts"></div>
   </div>
 </template>
 <style scoped>
-    .nav-content{
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 1000;
-    }
+.echarts-content {
+  height: 60vh;
+}
+.nav-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
 </style>
 <script>
+import * as echarts from "echarts";
 export default {
+  methods: {
+    creatEcharts() {
+      // 获取dom
+      let oEcharts = this.$refs.echarts;
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(oEcharts);
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: "本学期成绩统计",
+        },
+        tooltip: {},
+        xAxis: {
+          data: ["高数", "英语", "大物", "C语言", "网络", "操作系统"],
+          axisLabel: {
+            interval: 0,
+            rotate: 30,
+          },
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "成绩",
+            type: "bar",
+            data: [80, 90, 96, 100, 70, 80],
+            label: {
+              show: true,
+              position: "inside",
+            },
+          },
+        ],
+      });
+    },
+  },
   created() {
     this.$emit("changeNav", false);
-   
   },
   mounted() {
-    //  let oMap = document.getElementById("map");
-    // console.log(oMap);
-    let oMap = this.$refs.baidumap;
-    console.log(oMap);
+    this.creatEcharts();
   },
-  beforeDestroy(){
+  beforeDestroy() {
     this.$emit("changeNav", true);
   },
 };