Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度echarts饼图之太极阴阳图

let myChart = echarts.init(document.getElementById('myChart'));

var _valOnRadianMax = 300;
var _outerRadius = 300;
var _innerRadius = 270;
var _pointerInnerRadius = 140;
var _insidePanelRadius = 240;
var _currentDataIndex = 0;

var center = 400;
var taijiR = 160;
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);

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts饼图系列之自定义效果
  2. 百度Echarts饼图系列之多个百分比环形图
  3. 百度Echarts饼图系列之科技感环图
  4. 百度Echarts饼图统计图表
  5. 百度Echarts饼图标签formatter使用及自定义标签