五行相生相克图表(echarts)

2019独角兽企业重金招聘Python工程师标准>>>

echarts关系图做五行相生相克图表，

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>五行</title><script src="echarts.js"></script>
</head><body><div id="main" style="width:800;height:500;position:absolute;top:10%;left:20%;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));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: '#272727',title: {text: '五行相生相克图表',subtext: '',left: 50,top: 10,backgroundColor: '#FFFAFA',borderRadius: 8,textStyle: {color: '#102b6a',},subtextStyle: {color: '#102b6a',}},series: [{name: '五行',type: 'graph',roam: true,//draggable: true,focusNodeAdjacency: true,edgeSymbol: ['', 'arrow'],edgeSymbolSize: [3, 15],edgeLabel: {normal: {textStyle: {fontSize: 15}}},label: {normal: {show: true,formatter: '{b}',fontSize: 20}},symbol: 'circle',symbolSize: 30,top: '100',left: '200',width: '300',height: '300',data: roundDatas(5),links: linkDatas(5)},]};myChart.setOption(option);</script>
</body></html>

如图,

11-10加太极图

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>五行</title><script src="echarts.js"></script>
</head><body><div id="main" style="width:800;height:600;position:absolute;top:10%;left:20%;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));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: '#2E2E2E',title: {text: '五行相生相克图',subtext: '',left: 50,top: 10,backgroundColor: '#FFFAFA',borderRadius: 8,textStyle: {color: '#102b6a',},subtextStyle: {color: '#102b6a',}},color: ['#FFFFFF', '#000000'],series: [{name: '五行',type: 'graph',roam: true,//draggable: true,focusNodeAdjacency: true,edgeSymbol: ['', 'arrow'],edgeSymbolSize: [3, 15],edgeLabel: {normal: {textStyle: {fontSize: 15}}},label: {normal: {show: true,formatter: '{b}',fontSize: 20}},symbol: 'circle',symbolSize: 30,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,}},itemStyle: {label: {color: '#000000'}}},{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,}},},]};myChart.setOption(option);</script>
</body></html>

如图，

转载于:https://my.oschina.net/oisanblog/blog/1570555

五行相生相克图表(echarts)相关推荐

五行顺口溜_五行相生相克对照表口诀
五行是华夏民族创造的哲学思想.多用于哲学.中医学和占卜方面.五行学说是华夏文明重要组成部分.古代先民认为,天下万物皆由五类元素组成,分别是金.木.水.火.土,彼此之间存在相生相克的关系.五行是指木.火 ...
uniapp中使用echarts-百度图表 echarts
在uniapp插件搜索:https://ext.dcloud.net.cn/search?q=echarts 结果: 1. 不是全端兼容.可以上网搜使用案例,而且有很多.(关键是我用了,可能没用好,一 ...
五行相生相克输出规则
#include<iostream> using namespace std; int main() {char ch[][3]={ "金","水" ...
五行顺口溜_五行纳音口诀，五行相生相克歌诀
六十甲子是汉族人民最早最大的发明创造,用来纪年.纪月.纪日.纪时.而六十甲子中也有关于五行的相关解说,那么你知道五行相生相克歌诀是什么吗?本期的五行相生相克带你去了解. 六十甲子五行纳音口诀海沙箔锋 ...
十二生肖五行相生相克表
不同年份生肖五行不同年份生肖五行 1960年庚子属土(鼠) 1972年壬子属木(鼠) 1984年甲子属金(鼠) 1996年丙子属水(鼠) 2008年戊子属火(鼠) 1961年辛丑属土(牛) 1973 ...
js计算五行相生相克
var lwu=[{name:'水',id:1},{name:'木',id:2},{name:'火',id:3},{name:'土',id:4},{name:'金',id:5}] let lio=5 ...
数据可视化图表ECharts视频教程
数据可视化图表ECharts
图表 Echarts 3.0 简单使用
2019独角兽企业重金招聘Python工程师标准>>> Echarts(Enterprise Charts) 3.0 介绍 ECharts,一个纯 Javascript 的图表库,可 ...
数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...

五行相生相克图表(echarts)

五行相生相克图表(echarts)相关推荐

最新文章

热门文章