charts committer

lwg649 · Jan 23, 2022 · f683aab · f683aab
1 parent 3390336
commit f683aab
Show file tree

Hide file tree

Showing 7 changed files with 412 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/echarts-learn/1-line.ts b/echarts-learn/1-line.ts
@@ -0,0 +1,84 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 折线图
+ */
+
+import * as echarts from 'echarts/core';
+import {
+    LineChart,
+    LineSeriesOption
+} from 'echarts/charts';
+import {
+    TitleComponent,
+    TitleComponentOption,
+    TooltipComponent,
+    TooltipComponentOption,
+    GridComponent,
+    GridComponentOption,
+    TransformComponent,
+    DatasetComponent,
+    DatasetComponentOption
+} from 'echarts/components';
+import {
+    LabelLayout,
+    UniversalTransition
+} from 'echarts/features';
+import {
+    CanvasRenderer
+} from 'echarts/renderers';
+
+(function () {
+    let rootEl = document.querySelector('.sy-app') as HTMLElement;
+    if (!rootEl) {
+        return;
+    }
+
+    echarts.use([
+        TitleComponent,
+        TooltipComponent,
+        GridComponent,
+        DatasetComponent,
+        TransformComponent,
+        LineChart,
+        LabelLayout,
+        UniversalTransition,
+        CanvasRenderer
+    ]);
+
+    type SYLineOption = echarts.ComposeOption<
+        |LineSeriesOption
+        |TitleComponentOption
+        |TooltipComponentOption
+        |GridComponentOption
+        |DatasetComponentOption
+    >;
+
+    const option: SYLineOption = {
+        title: {
+            text: '折线图 Line'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [150, 230, 224, 218, 135, 147, 260],
+                type: 'line'
+            },
+            {
+                data: [10, 23, 120, 300, 90, 190, 260],
+                type: 'line'
+            }
+        ],
+        tooltip: {
+            show: true
+        }
+    };
+
+    let echart = echarts.init(rootEl);
+    echart.setOption(option);
+}());
diff --git a/echarts-learn/README.md b/echarts-learn/README.md
@@ -0,0 +1 @@
+### 成为echarts committer 心路历程
diff --git a/echarts-learn/index.css b/echarts-learn/index.css
@@ -0,0 +1,13 @@
+body {
+    background-color: #f5f5f5;
+    margin: 0;
+}
+
+.sy-app {
+    width: 90%;
+    margin: 0 auto;
+    padding: 20px;
+    height: 600px;
+    overflow: hidden;
+    background-color: #fff;
+}
diff --git a/echarts-learn/index.html b/echarts-learn/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./index.css">
+    <title>Learn-echarts</title>
+</head>
+<body>
+    <!-- <h1>和素燕一起学前端</h1> -->
+    <div class="sy-app" id='sy-app'></div>
+    <script src="./1-line.ts" type="module"></script>
+</body>
+</html>
diff --git a/echarts-learn/package-lock.json b/echarts-learn/package-lock.json