饼状图

chart/chart.js

@@ -300,9 +300,16 @@ function setOption(option, outId) {
         let _linex2 = _linex < 90 ? -(_cx * 2 + _viewboxX) : _cx * 2 + _viewboxX;
         let _fontPosition = {x: _linex < 90 ? -_viewboxX : _linex2, y: _liney1, position: _linex < 90 ? 'left' : 'right'};
 
+        console.log(_x2, '--',  _pieData[o],)
+        if(option.series[l].pieType == 'separate') {
+          let _fontX = _linex < 90 ? _linex + 20 : _linex - _cx / 2;
+
+          _fontPosition = {x: _fontX , y: _liney};
+        }
+
         // 实心圆及周边线及文字位置
         let _d, _lineD;
-        if(option.series[l].pieType == 'base') {
+        if(option.series[l].pieType == 'base' || option.series[l].pieType == 'separate') {
           _d = `M${_cx} ${_cy} L${_x1} ${_y1} A${_r} ${_r} 0 ${_big} 1 ${_x2} ${_y2} Z`;
           _lineD = `M${_linex} ${_liney} L${_linex1} ${_liney1} L${_linex2} ${_liney1}`;
         }
@@ -312,8 +319,9 @@ function setOption(option, outId) {
           _d = `M${_x1} ${_y1} A${_r} ${_r} 0 ${_big} 1 ${_x2} ${_y2} L${_xin2} ${_yin2} A${_inr} ${_inr} 0 ${_big} 0 ${_xin1} ${_yin1} Z`;
         }
 
+
         // 创建圆方法
-        createPathPie(l, _d, _pieData[o], _pieTotal, _lineD, _fontPosition);
+        createPathPie(l, _d, _pieData[o], _pieTotal, _lineD, _fontPosition, option, o);
 
         _startAngle = _endAngle; // 当前的角结束就是下一个角的开始
       }
@@ -323,22 +331,42 @@ function setOption(option, outId) {
 
 
 // 创建饼状图
-function createPathPie(l, d, data, total, lineD, fontPosition) {
-  console.log(lineD, fontPosition, '-------fontPosition')
+function createPathPie(l, d, data, total, lineD, fontPosition, option, index) {
+  // 计算数值
+  let _nub = Math.round(total / data.value * 100) / 100 + '%';
   // 创建饼图
   let _pie = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    _pie.setAttribute('fill', data.color);
    _pie.setAttribute('d', d);
    _pie.classList.add('flex');
+
+   // 当饼状图为分隔图时，对样式进行修改
+   if (option.series[l].pieType == 'separate') {
+     _pie.setAttribute('style', `transform:translate(-${index * 3}px, -${index * 5}px )`);
+   }
+
    document.querySelector('#global-svg-'+_outId+' #path-g-container-'+l).appendChild(_pie);
 
-  // 创建说明线
-  if (lineD) {
+   // 在分离饼状图中，显示文字
+   if (option.series[l].pieType == 'separate') {
+     let _pieText1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+     _pieText1.setAttribute('style', `font-size:12px;fill:#ffffff;`);
+     _pieText1.appendChild(document.createTextNode(`${_nub}`));
+     _pieText1.setAttribute('x', 0);
+     _pieText1.setAttribute('y', 0);
+     _pieText1.setAttribute('text-anchor', 'middle');
+     _pieText1.setAttribute('dominant-baseline', 'central');
+     _pieText1.setAttribute('transform', `translate(${fontPosition.x}, ${fontPosition.y}) scale(1, -1)`);
+     document.querySelector('#global-svg-'+_outId+' #path-deploy-line-g').appendChild(_pieText1);
+   }
+
+  // 创建说明线 base
+  if (lineD && option.series[l].pieType == 'base') {
 
     let _pieLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     _pieLine.setAttribute('d', lineD);
     _pieLine.setAttribute('fill', 'none');
-    _pieLine.setAttribute('stroke', data.color);
+    _pieLine.setAttribute('stroke', '#000000');  //data.color
     _pieLine.setAttribute('stroke-width', 1);
     _pieLine.setAttribute('stroke-miterlimit', 10);
     _pieLine.setAttribute('stroke-linecap', 'butt');
@@ -346,7 +374,7 @@ function createPathPie(l, d, data, total, lineD, fontPosition) {
 
 
     // 创建文字说明
-    let _nub = Math.round(total / data.value * 100) / 100 + '%';
+
     let _pieText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     _pieText.setAttribute('x', fontPosition.x);
     _pieText.setAttribute('y', fontPosition.y);