柱状图

chart/chart.css

@@ -6,17 +6,17 @@ body {
   margin: 0px;
 }
 
-#global-svg {
+.global-svg {
   background-color: #ffffff;
   /* max-width: 1000px; */
   /* border: 1px solid red; */
 }
 
-#global-svg .path-g-container {
+.global-svg .path-g-container {
   --stroke-length: 0;
 }
 
-#global-svg .line {
+.global-svg .line {
   stroke-dasharray: var(--stroke-length);
   stroke-dashoffset: var(--stroke-length);
   /* animation-delay: .3s; */
@@ -53,18 +53,18 @@ body {
   }
 }
 
-#global-svg .line-1 {
+.global-svg .line-1 {
   /* fill: transparent; */
 }
 
 
-#global-svg.animate .line {
+.global-svg.animate .line {
   animation: 3s animate-line linear;
   animation-fill-mode: forwards;
 }
 
 
-#global-svg.animate .line-1 {
+.global-svg.animate .line-1 {
   /* animation: 3s animate-line-bg linear;
   animation-fill-mode: forwards; */
 }
@@ -93,12 +93,12 @@ body {
 }
 
 /* 圆点动画 */
-#global-svg .point {
+.global-svg .point {
   opacity: 0;
   position: relative;
 }
 
-#global-svg .point::after {
+.global-svg .point::after {
   content: '';
   position: absolute;
   width: 18px;
@@ -106,18 +106,18 @@ body {
   /* background-color: red; */
 }
 
-#global-svg.animate .point {
+.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 {
+.global-svg .value-text {
   opacity: 0;
 }
 
-#global-svg.animate .value-text {
+.global-svg.animate .value-text {
   animation: .5s fade-in ease-in-out;
   animation-fill-mode: forwards;
   animation-delay: var(--delay);
@@ -130,10 +130,10 @@ body {
   transition: .25s opacity ease-in-outl
 }
 
-#global-svg.animate .loading {
+.global-svg.animate .loading {
   opacity: 0;
 }
 
-#global-svg .hover-circle, .hover-line {
+.global-svg .hover-circle, .hover-line {
   opacity: 0;
 }

chart/chart.js

 var diffValue;
+var _outId;
 var chart = {
   // 初始
   init: function(divEl) {
     let _outWidth = divEl.getAttribute('width');
     let _outHeight = divEl.getAttribute('height');
+    _outId = divEl.getAttribute('id');
+    // console.log(divEl.getAttribute('id'), '==========', divEl)
     diffValue = parseInt(_outWidth) / parseInt(_outHeight);
 
     // 最外层svg
     let _globalSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    _globalSvg.setAttribute('id', 'global-svg');
+    _globalSvg.setAttribute('id', 'global-svg-'+_outId);
+    _globalSvg.classList.add('global-svg');
     _globalSvg.setAttribute('width', _outWidth);
     _globalSvg.setAttribute('height', _outHeight);
     _globalSvg.setAttribute('viewBox', `0 0 ${ _outWidth} ${_outHeight}`);
@@ -73,11 +77,11 @@ var chart = {
 
 var _option;
 // 根据接收数据，渲染出样式
-function setOption(option) {
+function setOption(option, outId) {
   _option = option;
 
-  let svg_width = document.querySelector('#global-svg').viewBox.baseVal.width;
-  let svg_height = document.querySelector('#global-svg').viewBox.baseVal.height;
+  let svg_width = document.querySelector('#global-svg-'+_outId).viewBox.baseVal.width;
+  let svg_height = document.querySelector('#global-svg-'+_outId).viewBox.baseVal.height;
   let _y = option.yAxis;  // 左侧y轴样式
   let _x = option.xAxis; // 底部x轴
   let _aroundX = _x.outpadding ? _x.outpadding : 12;   // x轴距离页面上下左右距离
@@ -89,8 +93,6 @@ function setOption(option) {
   let x_padding = (svg_width - _aroundX * 2 - _aroundY - _aroundInX * 2) / (option.xAxis.data.length - 1);  // 每段数据间距
   let y_padding = (svg_height - _aroundX - _x.font.fontSize) / option.yAxis.totalLine;
 
-  console.log(y_padding, '------padding', _aroundX)
-
   // y轴展示
   for (var i = 0; i < _y.totalLine; i++) {
 
@@ -105,7 +107,7 @@ function setOption(option) {
     _yText.classList.add('y-text');
     _yText.setAttribute('style', `font-size:${_countFont(_y.font.fontSize)};fill:${_y.font.color}`);
     _yText.appendChild(document.createTextNode( Math.round(i * _diffV * 100) / 100));
-    document.querySelector('#y-g').appendChild(_yText);
+    document.querySelector('#global-svg-'+_outId+' #y-g').appendChild(_yText);
 
     // 横线
     let _yLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
@@ -115,23 +117,22 @@ function setOption(option) {
     _yLine.setAttribute('y2', _yP); // y轴需要计算
     _yLine.setAttribute('stroke', `${_y.yLineColor}`);
     _yLine.setAttribute('stroke-width', '1');
-    document.querySelector('#y-g').appendChild(_yLine);
+    document.querySelector('#global-svg-'+_outId+' #y-g').appendChild(_yLine);
   }
 
   // 底部x轴样式
   for (let m in _x.data) {
-    console.log(_aroundX, '-----_aroundX')
 
     let _xText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     _xText.setAttribute('text-anchor', 'middle');
     _xText.setAttribute('alignment-baseline', 'middle');
-    _xText.setAttribute('x', _x_startX);
+    _xText.setAttribute('x', _x_startX + 10);
     _xText.setAttribute('y', svg_height - y_padding + _x.font.fontSize + _aroundX);
     _xText.setAttribute('id', 'x-text-'+m);
     _xText.classList.add('x-text');
     _xText.setAttribute('style', `font-size:${_countFont(_x.font.fontSize)};fill:${_x.font.color}`);
     _xText.appendChild(document.createTextNode(_x.data[m]));
-    document.querySelector('#x-g').appendChild(_xText);
+    document.querySelector('#global-svg-'+_outId+' #x-g').appendChild(_xText);
 
     // 折线竖线分块，实现hover选择功能
     let verticalLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -141,13 +142,14 @@ function setOption(option) {
 
     verticalLine.setAttribute('fill', 'transparent');
     verticalLine.setAttribute('d',_vPath);
-    verticalLine.setAttribute('class', m)
-    document.querySelector('#hover-g').appendChild(verticalLine);
+    verticalLine.setAttribute('class', m);
+    verticalLine.setAttribute('id', 'hover-item-'+m);
+    document.querySelector('#global-svg-'+_outId+' #hover-g').appendChild(verticalLine);
     verticalLine.addEventListener('mouseout', function() {
-      hoverMouseout(event, m, option);
+      hoverMouseout(event, m, option, outId);
     }, false);  // 鼠标移出
     verticalLine.addEventListener('mouseover', function(){
-      hoverMouseover(event, m, option);
+      hoverMouseover(event, m, option, outId);
     }, false);  // 鼠标移入
 
     _x_startX += x_padding;
@@ -155,7 +157,21 @@ function setOption(option) {
 
 
   // 折线图数值及样式
+  let _barArr = [];
   for(let l in option.series) {
+
+    // 创建放入图形的g标签
+    let _gPathC = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    _gPathC.classList.add('path-g-container');
+    _gPathC.setAttribute('id', 'path-g-container-'+l);
+    document.querySelector('#global-svg-'+_outId+' #path-g').appendChild(_gPathC);
+
+    // 当type类型为bar时，重新计算柱状图之间间距
+    if(option.series[l].type == 'bar') {
+      x_padding = (svg_width - _aroundX * 2 - _aroundY - _aroundInX * 2 - option.series[l].normalStyle.width * option.series[l].data.length) / (option.xAxis.data.length - 1) + option.series[l].normalStyle.width // 每段数据间距
+      _barArr.push(l);
+    }
+
     let path_data = [];
     let start_x = _aroundX + _aroundY + _aroundInX; // 折线图数据开始值，y轴间距 + x轴距离y轴的间距
     for (let s in option.series[l].data) {
@@ -163,6 +179,8 @@ function setOption(option) {
       let _startY = y_padding * (_data[s] / _diffV) + y_padding;
       path_data.push(`${start_x},${_startY}`);
 
+      // type为line时
+      if (option.series[l].type == 'line') {
         // 折线图上圆点显示
         // hover时，竖线显示, 只生成一次，因为他们是一样的
         if (l == 0) {
@@ -175,7 +193,7 @@ function setOption(option) {
           hoverLine.setAttribute('stroke-width', '1');
           hoverLine.classList.add('hover-line');
           hoverLine.classList.add('hover-line-'+s);
-        document.querySelector('#path-deploy-line-g').appendChild(hoverLine);
+          document.querySelector('#global-svg-'+_outId+' #path-deploy-line-g').appendChild(hoverLine);
         }
 
         // 折线hover后，圆点放大
@@ -188,7 +206,7 @@ function setOption(option) {
         hoverCircle.setAttribute('fill', 'none');
         hoverCircle.classList.add('hover-circle');
         hoverCircle.classList.add('hover-circle-'+s);
-      document.querySelector('#path-deploy-circle-g').appendChild(hoverCircle);
+        document.querySelector('#global-svg-'+_outId+' #path-deploy-circle-g').appendChild(hoverCircle);
 
 
         // 折线上设置圆点
@@ -202,36 +220,65 @@ function setOption(option) {
         circle.setAttribute('transform-origin', `${start_x} ${_startY}`);  // 圆点中心位置
         circle.style.setProperty('--delay', `${(3 * parseInt(s) / _data.length)}s`);
         circle.classList.add('point');
-      document.querySelector('#path-deploy-circle-g').appendChild(circle);
+        document.querySelector('#global-svg-'+_outId+' #path-deploy-circle-g').appendChild(circle);
+      }
+
+      // 创建柱状图
+      if(option.series[l].type == 'bar') {
+        createPathBar(option, l, start_x, _startY, y_padding, s, _barArr.length);
+      }
 
       start_x += x_padding;
     }
 
     // 创建折线图及背景
+    if (option.series[l].type == 'line') {
       createPathLine(option, l, path_data, y_padding);
     }
-}
 
-// 鼠标移出
-function hoverMouseout(event, s, option) {
-  // console.log('鼠标移出', s)
-  let _allEl = document.querySelectorAll('.hover-circle-' +s);
-  for (var i = 0; i < _allEl.length; i++) {
-    _allEl[i].style.setProperty('opacity', 0);
   }
-  document.querySelector('.hover-line-' +s).style.setProperty('opacity', 0);
-  document.querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.color);
 }
 
-// 鼠标移入
-function hoverMouseover(event, s) {
-  // console.log(s,'鼠标移入', event);
-  let _allEl = document.querySelectorAll('.hover-circle-' +s);
-  for (var i = 0; i < _allEl.length; i++) {
-    _allEl[i].style.setProperty('opacity', 1);
+
+
+/*
+* 创建柱状图
+* option: 数据图参数
+* l: series的index
+* start_x: 柱状图x
+* _startY: 柱状图高度
+* bottomY: 柱状图距离底部x轴距离
+* s: 每个柱状图index
+* barNub: 柱状图类型数量
+*/
+
+function createPathBar (option, l, start_x, _startY, bottomY, s, barNub) {
+  let _n;
+  for (var i = 0; i < barNub; i++) {
+    _n = i;
   }
-  document.querySelector('.hover-line-' +s).style.setProperty('opacity', 1);
-  document.querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.hoverFontColor);
+  let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('width', `${option.series[l].normalStyle.width}`),
+  rect.setAttribute('height', _startY - bottomY);
+  rect.setAttribute('x', start_x + _n * option.series[l].normalStyle.width + _n * 2);
+  rect.setAttribute('y', bottomY);
+  rect.setAttribute('rx', `${option.series[l].normalStyle.borderRadius}`);
+  rect.setAttribute('ry', `${option.series[l].normalStyle.borderRadius}`);
+  rect.setAttribute('fill', `${option.series[l].normalStyle.backgroundColor}`);
+  rect.setAttribute('id', 'bar-'+l+'-'+s);
+  document.querySelector('#global-svg-'+_outId+' #path-g-container-'+l).appendChild(rect);
+
+  let _rectAnimate1 = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+  _rectAnimate1.setAttribute('attributeName', 'height');
+  _rectAnimate1.setAttribute('from', '0');
+  _rectAnimate1.setAttribute('to', _startY - bottomY);
+  _rectAnimate1.setAttribute('dur', '0.5s');
+  _rectAnimate1.setAttribute('repeatCount', '1');
+  // _rectAnimate1.setAttribute('fill', 'freeze');
+  document.querySelector('#global-svg-'+_outId+' #bar-'+l+'-'+s).appendChild(_rectAnimate1);
+
+  // 修改底部x轴文字位置
+  document.querySelector('#global-svg-'+_outId+' #x-text-'+s).setAttribute('x', start_x + option.series[l].normalStyle.width);
 }
 
 
@@ -250,10 +297,6 @@ function createPathLine(option, l, data, bottomY) {
 
   let _isPathBg = option.series[l].normalStyle.pathBgColor &&  option.series[l].normalStyle.pathBgColor != '' ? true : false;
 
-  let _gPathC = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-  _gPathC.classList.add('path-g-container');
-  _gPathC.setAttribute('id', 'path-g-container-'+l);
-  document.querySelector('#path-g').appendChild(_gPathC);
 
   // 折线展示
   let line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -270,7 +313,7 @@ function createPathLine(option, l, data, bottomY) {
   let _line_path = (`M${startPath.join(' ')} ${_prefix}${_new_path_data.join(' ')}`);
   let _newPath = _issmooth ? parsePath(_line_path) : _line_path;
   line.setAttribute('d', _newPath);
-  document.querySelector('#path-g-container-'+l).appendChild(line);
+  document.querySelector('#global-svg-'+_outId+' #path-g-container-'+l).appendChild(line);
 
   // 折线图背景色数值
   if (_isPathBg) {
@@ -284,7 +327,7 @@ function createPathLine(option, l, data, bottomY) {
     let bg_path = (`M${startPath.join(' ')} ${_prefix}${_new_path_data.join(' ')} H${path_end[0]}V${bottomY}H${path_start[0]}Z`);
     let _newBgPath = _issmooth ? parsePath(bg_path) : bg_path;
     line_bg.setAttribute('d', _newBgPath);
-    document.querySelector('#path-bg-g').appendChild(line_bg);
+    document.querySelector('#global-svg-'+_outId+' #path-bg-g').appendChild(line_bg);
 
 
     // 创建折线图显示背景颜色标签
@@ -295,12 +338,12 @@ function createPathLine(option, l, data, bottomY) {
   }
 
   // //计算长度，实现动画
-  let strokeLength = Math.ceil(document.querySelector('#line-'+l).getTotalLength());  //获取折线图的长度
-  document.querySelector('#path-g-container-'+l).style.setProperty('--stroke-length', strokeLength);
-  document.querySelector('#global-svg').classList.add('animate');
+  let strokeLength = Math.ceil(document.querySelector('#global-svg-'+_outId+' #line-'+l).getTotalLength());  //获取折线图的长度
+  document.querySelector('#global-svg-'+_outId+' #path-g-container-'+l).style.setProperty('--stroke-length', strokeLength);
+  document.querySelector('#global-svg-'+_outId).classList.add('animate');
 }
 
-// 背景色显示的标签位置
+// 折线图背景色显示的标签位置
 function creatLinearGradient(id, bgColor, l) {
   // 背景外层
   let _linear = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
@@ -310,7 +353,7 @@ function creatLinearGradient(id, bgColor, l) {
   _linear.setAttribute('y1', '0%');
   _linear.setAttribute('y2', '100%');
   // _linear.setAttribute('style', 'fill-opacity: 0');
-  document.querySelector('#path-bg-color-g').appendChild(_linear);
+  document.querySelector('#global-svg-'+_outId+' #path-bg-color-g').appendChild(_linear);
 
   // 背景颜色
   let _colorData = [
@@ -328,19 +371,17 @@ function creatLinearGradient(id, bgColor, l) {
 
   }
 
-
+  // 背景动画
   let _bgAnimate1 = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
   _bgAnimate1.setAttribute('attributeName', 'y1');
   _bgAnimate1.setAttribute('from', '1');
   _bgAnimate1.setAttribute('to', '0');
-  // _bgAnimate.setAttribute('path', path);
   _bgAnimate1.setAttribute('dur', '0.3s');
   _bgAnimate1.setAttribute('begin', `${option.animateTime}s`);
   _bgAnimate1.setAttribute('repeatCount', '1');
   _bgAnimate1.setAttribute('fill', 'freeze');
   _linear.appendChild(_bgAnimate1);
 
-  // 背景动画
   let _bgAnimate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
   _bgAnimate.setAttribute('attributeName', 'stop-opacity');
   _bgAnimate.setAttribute('from', '0.5');
@@ -350,17 +391,41 @@ function creatLinearGradient(id, bgColor, l) {
   _bgAnimate.setAttribute('repeatCount', '1');
   _bgAnimate.setAttribute('fill', 'freeze');
   // _stop.appendChild(_bgAnimate);
-  document.querySelector('#stop-'+l +'-1').appendChild(_bgAnimate);
+  document.querySelector('#global-svg-'+_outId+' #stop-'+l +'-1').appendChild(_bgAnimate);
 
 }
 
 // 数字换算
 function _countFont(fontSize) {
   let _diff = diffValue;
-  // return fontSize / _diff;
   return fontSize;
 }
 
+// 鼠标移出
+function hoverMouseout(event, s, option, outId) {
+  let _allEl = document.querySelector('#global-svg-'+outId).querySelectorAll('.hover-circle-' +s);
+  if (_allEl.length > 0) {
+    for (var i = 0; i < _allEl.length; i++) {
+      _allEl[i].style.setProperty('opacity', 0);
+    }
+    document.querySelector('#global-svg-'+outId).querySelector('.hover-line-' +s).style.setProperty('opacity', 0);
+    document.querySelector('#global-svg-'+outId).querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.color);
+  }
+}
+
+// 鼠标移入
+function hoverMouseover(event, s, option, outId) {
+  let _allEl = document.querySelector('#global-svg-'+outId).querySelectorAll('.hover-circle-' +s);
+
+  if (_allEl.length > 0) {
+    for (var i = 0; i < _allEl.length; i++) {
+      _allEl[i].style.setProperty('opacity', 1);
+    }
+    document.querySelector('#global-svg-'+outId).querySelector('.hover-line-' +s).style.setProperty('opacity', 1);
+    document.querySelector('#global-svg-'+outId).querySelector('#x-text-'+s).style.setProperty('fill', option.xAxis.font.hoverFontColor);
+  }
+}
+
 
 //计算path值
 function parsePath( data ) {

chart/chart.md

@@ -96,6 +96,15 @@
             circlestroke: '#87CEFA',
             linestroke: '#f6f6f6'
           }
+        },
+        {
+          type: 'bar', // bar: 柱状图
+          data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
+          normalStyle: { // 柱状图常规样式
+            backgroundColor: '#953C96',  // 柱状图颜色
+            width: 14, // 柱状宽度
+            borderRadius: 3 // 柱状圆角
+          },
         }
       ]
     }

line_demo.html → demo.html

@@ -2,13 +2,18 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <title>折线demo</title>
+    <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 id = 'tongline' width = '425' height = '236'></div>
+    </div>
+
+    <!-- 柱状图 -->
+    <div style = 'width:100%;height:400px;margin-top:100px;'>
+      <div id = 'tongbar' width = '425' height = '236'></div>
     </div>
 
   </body>
@@ -17,7 +22,7 @@
     let _width = document.body.clientWidth;
     console.log(_width, '----');
     // document.querySelector('#tongchart').setAttribute('width', _width);
-    var myChart = chart.init(document.getElementById('tongchart'));
+    var myChart = chart.init(document.getElementById('tongline'));
     var option = {
       animateTime: 3,
       xAxis: {
@@ -61,20 +66,71 @@
         {
           type: 'line',
           smooth: true, // 是否是平滑曲线
-          data: [0.8,0.1,0.7,1,0.26,0.3,0.9],
+          data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
           normalStyle: {
-            linestroke: '#2A9BC5',
-            circlestroke: '#2A9BC5',
-            pathBgColor: '#2A9BC5'
+            linestroke: '#87CEFA',
+            circlestroke: '#87CEFA',
+            pathBgColor: '#87CEFA',
           },
           hoverStyle: {
             circlestroke: '#87CEFA',
             linestroke: '#f6f6f6'
           }
-        }
+        },
       ]
     }
     // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
+    myChart.setOption(option, 'tongline');
+
+    // 设置柱状图
+    var myChartBar = chart.init(document.getElementById('tongbar'));
+    var optionbar = {
+      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: 'bar',
+          data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
+          normalStyle: {
+            backgroundColor: '#2A9BC5',
+            width: 14,
+            borderRadius: 3
+          },
+        },
+
+        {
+          type: 'bar',
+          data: [0.75,0.1,0.7,1,0.26,0.3,0.9],
+          normalStyle: {
+            backgroundColor: '#953C96',
+            width: 14,
+            borderRadius: 3
+          },
+        }
+      ]
+    }
+    myChartBar.setOption(optionbar, 'tongbar');
   </script>
 </html>