echarts图形实现桑基图和圆球关系图

最新推荐文章于 2024-09-23 08:26:14 发布

liu137756

最新推荐文章于 2024-09-23 08:26:14 发布

阅读量2.3k

点赞数

分类专栏： echarts jsp 图形文章标签： javascript jquery js jsp

本文链接：https://blog.csdn.net/liu137756/article/details/105241046

版权

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" src="/echarts.js"></script>
<div id="main" style="width:470px;height:450px;float:left;"></div>
<div id="mainSjt" style="width:685px;height:450px;float:right;"></div>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
   
		title: {
   
			text: '关系图的层次'
		},
		tooltip: {
   },
		animationDurationUpdate: 1500,
		animationEasingUpdate: 'quinticInOut',
		series: [
			{
   
				type: 'graph',//图形类型
				layout: 'none',
				symbolSize: 20,//控制圆的大小
				roam: true,
				label: {
    //是否显示圆圈里面的文字
					show: true,
					formatter: function(params) {
   
						return params.name;
					},
					fontSize:10,
					fontStyle:'normal',//'normal italic oblique'文字样式
					fontWeight:'normal',//文字加粗
					position: 'insideRight',
					distance: -20,//距离圆圈的距离
					color:'#red'//字体颜色
				},
				edgeSymbol: ['circle', 'arrow'],//全局线的箭头
				edgeSymbolSize: [8, 8],//全局线箭头大小
				edgeLabel: {
   
					fontSize: 10//全局线上字体大小
				},
				data: [{
   //名称节点坐标
					name: 'A3',
					x: 10,
					y: 50
				}, {
   
					name: 'F5',
					x: 42,
					y: 52
				}, {
   
					name: 'F4A',
					x: 72,
					y: 54
				}, {
   
					name: 'G4',
					x: 72,
					y: 57
				}, {
   
					name: 'G5',
					x: 42,
					y: 60
				}, {
   
					name: 'A4',
					x: 10,
					y: 65
				}, {
   
					name: 'F3',
					x: 42,
					y: 67
				}, {
   
					name: 'E4',
					x: 72,
					y: 69
				}, {
   
					name: 'E1',
					x: 10,
					y: 77
				}, {
   
					name: 'E2',
					x: 10,
					y: 80
				}, {
   
					name: 'E8',
					x: 42,
					y: 82
				}, {
   
					name: 'F1',
					x: 42,
					y: 85
				}, {
   
					name: 'E3',
					x: 10,
					y: 89
				}, {
   
					name: 'E5',
					x: 10,
					y: 92
				}, {
   
					name: 'E6',
					x: 42,
					y: 96
				}, {
   
					name: 'E7',
					x: 72,
					y: 99
				}, {
   
					name: 'F4B',
					x: 42,
					y: 106
				}, {
   
					name: 'G1',
					x: 42,
					y: 109
				}, {
   
					name: 'G2',
					x: 42,
					y: 112
				}, {
   
					name: 'G3',
					x: 42,
					y: 115
				}, {
   
					name: 'F2',
					x: 10,
					y: 119
				}, {
   
					name: 'F6',
					x: 10,
					y: 122
				}, {
   
					name: 'G6',
					x: 10,
					y: 125
				}],
				links: [{
   //线的链接
					source: 'A3',//源头
					target: 'F5',//指向源终
					//symbolSize: [5, 20], 个性线
					label: {
   //是否显示线上的文字
						show: false,
						formatter:&#