11-8 集成 ECharts，并增加一个使用示例

src/main/java/io/github/yubincloud/fairywiki/service/EbookSnapshotService.java

@@ -5,7 +5,6 @@ import io.github.yubincloud.fairywiki.mapper.EbookSnapshotMapperCustom;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
-import java.util.ArrayList;
 import java.util.List;
 
 @Service

web/package.json

@@ -13,6 +13,7 @@
     "@ant-design/icons-vue": "^6.0.1",
     "ant-design-vue": "^2.0.0-rc.3",
     "axios": "^0.21.0",
+    "echarts": "^5.1.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0",

web/src/components/the-welcome.vue

@@ -87,12 +87,48 @@
         </a-card>
       </a-col>
     </a-row>
+    <br>
+    <a-row>
+      <a-col :span="24">
+        <div id="chart" 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';
+import * as echarts from 'echarts/core';
+import {
+  BarChart,
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart,
+  LineSeriesOption
+} from 'echarts/charts';
+import {
+  TitleComponent,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  GridComponent,
+  GridComponentOption,
+  TooltipComponent
+} from 'echarts/components';
+import {
+  CanvasRenderer
+} from 'echarts/renderers';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<
+    BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption
+    >;
+
+// 注册必须的组件
+echarts.use(
+    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
+);
+
 
 export default defineComponent({
   name: 'the-welcome',
@@ -122,8 +158,28 @@ export default defineComponent({
       });
     };
 
+    const testEcharts = () => {
+      const chart = echarts.init(document.getElementById('chart') as HTMLCanvasElement);
+      chart.setOption({
+        title: {
+          text: 'ECharts 入门示例'
+        },
+        tooltip: {},
+        xAxis: {
+          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        },
+        yAxis: {},
+        series: [{
+          name: '销量',
+          type: 'bar',
+          data: [5, 20, 36, 10, 10, 20]
+        }]
+      });
+    }
+
     onMounted(() => {
       getStatistic();
+      testEcharts();
     });
 
     return {