百度echarts饼图之太极阴阳图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="myChart" style="width: 100%;height:380px;"></div>
    <script type="text/javascript">
        let myChart = echarts.init(document.getElementById('myChart'));
        var _valOnRadianMax = 220;
        var _outerRadius = 220;
        var _innerRadius = 190;
        var _pointerInnerRadius = 60;
        var _insidePanelRadius = 140;
        var _currentDataIndex = 0;
        
        var center = 300;
        var taijiR = 130;
        function renderItem(params, api) {
          var rotation = api.value(0);
        
          return {
            type: 'group',
            children: [{
              type: 'arc',
              rotation,
              shape: {
                cx: center,
                cy: _outerRadius,
                r: taijiR,
                r0: 0,
                startAngle: -Math.PI / 2,
                endAngle: Math.PI / 2,
                clockwise: false
              },
              style: {
                stroke: '#000',
                fill: '#fff'
              }
            },
            {
              type: 'arc',
              rotation,
              shape: {
                cx: center,
                cy: _outerRadius,
                r: taijiR,
                r0: 0,
                startAngle: Math.PI / 2,
                endAngle: -Math.PI / 2,
                clockwise: false
              },
              style: {
                stroke: '#000',
                fill: '#000'
              }
            },
            {
              type: 'arc',
              rotation,
              shape: {
                cx: center,
                cy: _outerRadius - taijiR / 2,
                r: taijiR / 2,
                r0: 0,
                startAngle: Math.PI / 2,
                endAngle: -Math.PI / 2,
                clockwise: false
              },
              style: {
                stroke: '#000',
                fill: '#fff'
              }
            },
            {
              type: 'arc',
              rotation,
              shape: {
                cx: center,
                cy: _outerRadius + taijiR / 2,
                r: taijiR / 2,
                r0: 0,
                startAngle: -Math.PI / 2,
                endAngle: Math.PI / 2,
                clockwise: false
              },
              style: {
                stroke: '#000',
                fill: '#000'
              }
            },
            {
              type: 'circle',
              rotation,
              shape: {
                cx: center,
                cy: _outerRadius - taijiR / 2,
                r: taijiR / 6
              },
              style: {
                stroke: '#000',
                fill: '#000'
              }
            },
            {
              type: 'circle',
              rotation,
              shape: {
                cx: center,
                cy: _outerRadius + taijiR / 2,
                r: taijiR / 6
              },
              style: {
                stroke: '#fff',
                fill: '#fff'
              }
            }]
          };
        }
        
        option = {
          dataset: {
            source: [[0]]
          },
          angleAxis: {
            type: 'value',
            startAngle: 0,
            show: false,
            min: 0,
            max: _valOnRadianMax
          },
          radiusAxis: {
            type: 'value',
            show: false
          },
          polar: {},
          series: [{
            type: 'custom',
            coordinateSystem: 'polar',
            renderItem: renderItem
          }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：