折线图

f2f6de90 · 晓彤 · 53de8e36 · f2f6de90 · 53de8e36 · f2f6de90
Commit f2f6de90 authored Aug 23, 2021 by 晓彤
6 changed files
--- a/.DS_Store
+++ b/.DS_Store
--- a/README.md
+++ b/README.md
-# svg_chart
-基于svg的简单chart组件
\ No newline at end of file
--- a/chart/chart.css
+++ b/chart/chart.css
+body {
+  /* display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; */
+  margin: 0px;
+}
+#global-svg {
+  background-color: #ffffff;
+  /* max-width: 1000px; */
+  /* border: 1px solid red; */
+}
+#global-svg .path-g-container {
+  --stroke-length: 0;
+}
+#global-svg .line {
+  stroke-dasharray: var(--stroke-length);
+  stroke-dashoffset: var(--stroke-length);
+  /* animation-delay: .3s; */
+}
+.x-text, .y-text {
+  font-family: Helvetica;
+  animation: .5s fade-in ease-in-out;
+  animation-fill-mode: forwards;
+}
+.value-text {
+  font-size: 3px;
+}
+/* 线动画线 */
+@keyframes animate-line {
+  from {
+    stroke-dashoffset: var(--stroke-length)
+  }
+  to {
+    stroke-dashoffset: 0
+  }
+}
+@keyframes animate-line-bg {
+  from {
+    fill: 'url(#line-bg-1)';
+  }
+  to {
+    fill: 'url(#line-bg-1)'
+  }
+}
+#global-svg .line-1 {
+  /* fill: transparent; */
+}
+#global-svg.animate .line {
+  animation: 3s animate-line linear;
+  animation-fill-mode: forwards;
+}
+#global-svg.animate .line-1 {
+  /* animation: 3s animate-line-bg linear;
+  animation-fill-mode: forwards; */
+}
+/* 控制圆点动画效果 */
+@keyframes zoom-in {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* 圆点动画 */
+#global-svg .point {
+  opacity: 0;
+  position: relative;
+}
+#global-svg .point::after {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  /* background-color: red; */
+}
+#global-svg.animate .point {
+  animation: .5s fade-in ease-in-out, .5s zoom-in ease-in-out;
+  animation-fill-mode: forwards;
+  animation-delay: var(--delay);
+}
+/* 数值动画 */
+#global-svg .value-text {
+  opacity: 0;
+}
+#global-svg.animate .value-text {
+  animation: .5s fade-in ease-in-out;
+  animation-fill-mode: forwards;
+  animation-delay: var(--delay);
+}
+.loading {
+  font-size: 5px;
+  color: #999;
+  transition: .25s opacity ease-in-outl
+}
+#global-svg.animate .loading {
+  opacity: 0;
+}
+#global-svg .hover-circle, .hover-line {
+  opacity: 0;
+}
--- a/chart/chart.js
+++ b/chart/chart.js
--- a/chart/chart.md
+++ b/chart/chart.md
+## 引入chart
+通过标签方式直接引入创建好的chart
+```
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <!-- 引入 charts 文件 -->
+    <script src="chart.js"></script>
+</head>
+</html>
+```
+## 绘制图表
+在绘图前我们需要为 chart 准备一个具备高宽的 DOM 容器
+```
+<body>
+	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 必须为数字 -->
+	<div id = 'main' width = '425' height = '236'></div>
+</body>
+```
+然后就可以通过chart.init 方法初始化一个chart 实例并通过 setOption 方法生成一个折线图。下面完整代码
+```
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="./chart/chart.css">
+  </head>
+  <body>
+    <div id="main" style="width: 600px;height:400px;"></div>
+  </body>
+  <script type="text/javascript" src = './chart/chart.js'></script>
+  <script type="text/javascript">
+  	// 基于准备好的dom,初始化chart实例
+    var myChart = chart.init(document.getElementById('main'));
+    // 指定图表的配置项和数据
+    var option = {
+    animateTime: 3, // 折线图动画时间
+     // x轴配置信息
+	 xAxis: {
+		data: ['Mon','Tue','Wed','Thu','Fri','Sat', 'Sun'],
+		font: {
+		 fontSize: 4,
+		 color: 'rgba(40,40,40,0.3)',
+		 hoverFontColor: 'rgba(40,40,40,1)', // 鼠标hover时，字体颜色
+		},
+    outpadding: 10, // x轴距离页面左右上下之间间距
+    inpadding: 5, // 折线图距离线段的左右之间间距
+	 },
+  	 yAxis: {
+	    font: {
+	      fontSize: 4,
+	      color: 'rgba(40,40,40,0.3)'
+	    },
+	    yLineColor: '#F6F6F6',  // y轴线段颜色
+	    min: 0, // 最小值
+	    max: 1, // 最大值
+	    totalLine: 5, // 需要线段数量
+      padding: 10, // y轴之间间距
+    },
+    series: [
+        {
+          type: 'line',  // chart的类型 line: 折线图
+          smooth: true, // 是否是平滑曲线
+          data: [0.9,0.4,0.7,0.9,0.26,1,0.54],
+          normalStyle: { // 折线图常规样式
+            linestroke: '#953C96',  // 折线图线段颜色
+            circlestroke: '#953C96',  // 折线图点颜色
+            pathBgColor: '#953C96', // 非必填项，如果没有这个参数，说明不需要折线阴影
+          },
+          hoverStyle: {  // 折线hover时配置
+            circlestroke: '#DFC4DF',  // 点外侧颜色
+            linestroke: '#f6f6f6' // 折线图hover时，竖线颜色
+          }
+        },
+        {
+          type: 'line',
+          smooth: true, // 是否是平滑曲线
+          data: [0.8,0.1,0.7,1,0.26,0.3,0.9],
+          normalStyle: {
+            linestroke: '#2A9BC5',
+            circlestroke: '#2A9BC5',
+            pathBgColor: '#2A9BC5'
+          },
+          hoverStyle: {
+            circlestroke: '#87CEFA',
+            linestroke: '#f6f6f6'
+          }
+        }
+      ]
+    }
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+  </script>
+</html>
+```
--- a/line_demo.html
+++ b/line_demo.html
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>折线demo</title>
+    <link rel="stylesheet" href="./chart/chart.css">
+  </head>
+  <body>
+    <div style = 'width:100%;height:400px;'>
+      <div id = 'tongchart' width = '425' height = '236'></div>
+      <!-- <div id = 'tongchart' width = '425' height = '236' style = 'width:425px;height:236px;'></div> -->
+    </div>
+  </body>
+  <script type="text/javascript" src = './chart/chart.js'></script>
+  <script type="text/javascript">
+    let _width = document.body.clientWidth;
+    console.log(_width, '----');
+    // document.querySelector('#tongchart').setAttribute('width', _width);
+    var myChart = chart.init(document.getElementById('tongchart'));
+    var option = {
+      animateTime: 3,
+      xAxis: {
+        data: ['Mon','Tue','Wed','Thu','Fri','Sat', 'Sun'],
+        font: {
+          fontSize: 12,
+          color: 'rgba(40,40,40,0.3)',
+          hoverFontColor: 'rgba(40,40,40,1)'
+        },
+        outpadding: 10,
+        inpadding: 10,
+      },
+      yAxis: {
+        font: {
+          fontSize: 12,
+          color: 'rgba(40,40,40,0.3)'
+        },
+        yLineColor: '#F6F6F6', // '#F6F6F6',
+        min: 0,
+        max: 1,
+        totalLine: 5,
+        padding: 15
+      },
+      series: [
+        {
+          type: 'line',
+          smooth: true, // 是否是平滑曲线
+          data: [1,0.4,0.7,0.9,0.26,1,0.54],
+          normalStyle: {
+            linestroke: '#953C96',
+            circlestroke: '#953C96',
+            pathBgColor: '#953C96', // 非必填项，如果没有这个参数，说明不需要折线阴影
+          },
+          hoverStyle: {
+            circlestroke: '#DFC4DF',
+            linestroke: '#f6f6f6', // '#f6f6f6'
+          }
+        },
+        {
+          type: 'line',
+          smooth: true, // 是否是平滑曲线
+          data: [0.8,0.1,0.7,1,0.26,0.3,0.9],
+          normalStyle: {
+            linestroke: '#2A9BC5',
+            circlestroke: '#2A9BC5',
+            pathBgColor: '#2A9BC5'
+          },
+          hoverStyle: {
+            circlestroke: '#87CEFA',
+            linestroke: '#f6f6f6'
+          }
+        }
+      ]
+    }
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+  </script>
+</html>