Echarts可视化教程

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

百度echarts图表之五行相生相克图

var wuXin = new Array("木", "火", "土", "金", "水");
var color = ['#78a355', '#d93a49', '#8e3e1f', '#dea32c', '#50b7c1'];

function roundDatas(num) {
  var datas = [];
  for (var i = 0; i < num; i++) {
    var x = Math.cos(72 * i * Math.PI / 180);
    var y = Math.sin(72 * i * Math.PI / 180);
    datas.push({
      name: wuXin[i],
      x: y,
      y: -x,
      itemStyle: {
        normal: {
          color: color[i]
        },
      },
    });
  }
  return datas;
}


function linkDatas(num) {
  var ldatas = [];
  for (var i = 0; i < num; i++) {
    ldatas.push({
      label: {
        normal: {
          show: true,
          formatter: '相生'
        }
      },
      lineStyle: {
        normal: {
          color: '#94d6da',
          width: 2,
          curveness: 0.3,
          opacity: 0.8,
          type: 'dashed',
        }
      },
      source: i,
      target: i + 1
    });
  
    ldatas.push({
      lineStyle: {
        normal: {
          color: '#FF5151',
          width: 2,
          curveness: 0,
          opacity: 0.8
        }
      },
      label: {
        normal: {
          show: true,
          formatter: '相克'
        }
      },
      source: i,
      target: i + 2
    });
  
  }
  
  ldatas.push({
    label: {
      normal: {
        show: true,
        formatter: '相生'
      }
    },
    lineStyle: {
      normal: {
        color: '#94d6da',
        type: 'dashed',
        width: 2,
        curveness: 0.3,
        opacity: 0.8
      }
    },
    source: (i - 1),
    target: 0
  });
  
  ldatas.push({
    lineStyle: {
      normal: {
        color: '#FF5151',
        width: 2,
        curveness: 0,
        opacity: 0.8
      }
    },
    label: {
      normal: {
        show: true,
        formatter: '相克'
      }
    },
    source: 3,
    target: 0
  });
  ldatas.push({
    lineStyle: {
      normal: {
        color: '#FF5151',
        width: 2,
        curveness: 0,
        opacity: 0.8
      }
    },
    label: {
      normal: {
        show: true,
        formatter: '相克'
      }
    },
    source: 4,
    target: 1
  });
  
  return ldatas;
}

option = {
  backgroundColor: "#0B1321",
  color: ['#000000', '#FFFFFF'],
  series: [
  
    {
      name: '五行',
      type: 'graph',
      focusNodeAdjacency: true,
      edgeSymbol: ['', 'arrow'],
      edgeSymbolSize: [3, 15],
      edgeLabel: {
        normal: {
          textStyle: {
            fontSize: 15
          }
        }
      },
      label: {
        normal: {
          show: true,
          formatter: '{b}',
          fontSize: 42
        }
      },
  
  
      symbol: 'circle',
      symbolSize: 60,
      top: '60',
      left: '200',
      width: '400',
      height: '400',
      data: roundDatas(5),
      links: linkDatas(5)
    },
  
    ////////阴阳太极图//////////
    {
      name: '大圆',
      type: 'pie',
      radius: '52',
      center: ['400', '268'],
      data: [{
        value: 50,
        name: '阴'
      }, {
        value: 50,
        name: '阳'
      }, ],
      roseType: 'radius',
      hoverAnimation: false,
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false,
        }
      }
    }, {
      name: '黑色圆',
      type: 'pie',
      zlevel: 2,
      radius: '26',
      center: ['400', '294'],
      data: [{
        value: 50,
        name: ''
      }, ],
      roseType: 'radius',
      hoverAnimation: false,
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false,
        }
      }
    },
    {
      name: '白色圆',
      type: 'pie',
      zlevel: 2,
      radius: '26',
      center: ['400', '242'],
      data: [{
        value: 50,
        name: ''
      }, ],
      roseType: 'radius',
      hoverAnimation: false,
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false,
        }
      }
    },
    {
      name: '黑色圆小',
      type: 'pie',
      zlevel: 3,
      radius: '12',
      center: ['400', '242'],
      data: [{
        value: 50,
        name: ''
      }, ],
      roseType: 'radius',
      hoverAnimation: false,
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false,
        }
      }
    },
    {
      name: '白色圆小',
      type: 'pie',
      zlevel: 3,
      radius: '12',
      center: ['400', '294'],
      data: [{
        value: 50,
        name: ''
      }, ],
      roseType: 'radius',
      hoverAnimation: false,
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false,
        }
      },
  
    },
  ]
};
点击展开全文

相关文章

  1. 百度Echarts图表之散点图效果
  2. 百度Echarts图表之饼图多维度分析
  3. 百度Echarts环形百分比图形
  4. 百度echarts图表在legend中显示数字百分比
  5. 百度echarts图表无数据怎么优化