2021-5-27 集成echarts5.1.1,增加示例

ZhiZDK · May 27, 2021 · 2e0ff05 · 2e0ff05
1 parent 10bce31
commit 2e0ff05
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/web/public/index.html b/web/public/index.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script src="<%= BASE_URL %>js/md5.js"></script>
     <script src="<%= BASE_URL %>js/session-storage.js"></script>
+    <script src="<%= BASE_URL %>js/echarts.min.js"></script>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/web/public/js/echarts.min.js b/web/public/js/echarts.min.js
diff --git a/web/src/components/the-welcome.vue b/web/src/components/the-welcome.vue
@@ -87,13 +87,21 @@
                 </a-card>
             </a-col>
         </a-row>
+        <br>
+        <a-row>
+            <a-col :span="24">
+                <div id="main" style="width: 100%; height: 300px"></div>
+            </a-col>
+        </a-row>
     </div>
 </template>
 
 <script lang="ts">
     import { defineComponent, ref, onMounted } from 'vue';
     import axios from 'axios';
 
+    declare let echarts: any;
+
     export default defineComponent({
         name: 'the-welcome',
         setup () {
@@ -117,10 +125,38 @@
                         statistic.value.todayViewIncreaseRateAbs = Math.abs(statistic.value.todayViewIncreaseRate);
                     }
                 });
+            };
+
+            const testEcharts = () => {
+                // 基于准备好的dom，初始化echarts实例
+                const myChart = echarts.init(document.getElementById('main'));
+
+                // 指定图表的配置项和数据
+                const option = {
+                    title: {
+                        text: 'ECharts 入门示例'
+                    },
+                    tooltip: {},
+                    legend: {
+                        data:['销量']
+                    },
+                    xAxis: {
+                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+                    },
+                    yAxis: {},
+                    series: [{
+                        name: '销量',
+                        type: 'bar',
+                        data: [5, 20, 36, 10, 10, 20]
+                    }]
+                };
+                // 使用刚指定的配置项和数据显示图表。
+                myChart.setOption(option);
             }
 
             onMounted(() => {
                 getStatistic();
+                testEcharts();
             });
 
             return {