4

vue项目实现关系图和饼图结合

 3 years ago
source link: https://www.oschina.net/question/3577572_2321593
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

vue项目实现关系图和饼图结合

小薛1993 发布于 03/12 14:36
阅读 165

本人项目时vue的。尝试着结合echarts在实现这个功能。发现实现不了。希望各位大佬给点意见和提示。或者给出相关案例



以下是问题补充：

@小薛1993：关系图已经实现，单双击并存等问题 (03/12 15:22)

tcxu

03/12 20:59

也可尝试如下做法。

  • 将两张饼图和一张旭日图的 series， 事先作为对象，分别存在  seriesC、 seriesD 和 seriesE  之中。
  • 再定义一个方法，操作要求：
  1. 单击 C 节点 将  seriesC (数据项：name,id,age,hoppy,sex) 添加到已知的关系图的 series 对象之中：option.series.push(seriesC);
  2. 单击 D 节点 将  seriesD 添加到 现有的关系图的 series 对象之中：option.series.push(seriesD);
  3. 单击 E 节点 将  seriesE (旭日图标签旋转 Sunburst Label Rotate)添加到 现有的关系图的 series 对象之中：option.series.push(seriesE);
  4. 然后再执行 option && myChart.setOption(option);

    这样，先展示 关系 relation 图， 再单击 节点 C 、D、 E 就能调用上述方法，在 节点 C、 D、E 处 分别  绘出各自的饼图。 

题外话：关系图的互动方式，即点击节点的后果( 反应 )，除了画饼图之外， 还可以包括打开一个新窗口，以便通过网页展现有关信息，或借用新窗口播放视频, 等内容，为用户提供进一步信息。故以下案例，补充了两种互动方式：单击 节点 A 弹出新窗口，播放视频；单击 节点 B 弹出新窗口，展示 Echarts 的官网。up-96b5fb325508a3426c027c71f9c5aaa5fca.png

<html>
<head>
<meta charset="utf-8">
<style>
#main{
	background-image:url('http://www.pptbz.com/pptpic/UploadFiles_6909/201105/2011051822570446.jpg');
}
</style>
</head>
<body>
<div id="main" style="width: 1000px;height:800px;"></div>
</body>
 <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

 silent: true,
 seriesE={  //将饼图 E 的 series 事先存在 对象 seriesE之中
        radius: ['25px', '100px'],
        center: ['852px','680px'],
        type: 'sunburst',
        sort: null,
        emphasis: {
            focus: 'ancestor'
        },
        data: [{
            value: 8,
            children: [{
                value: 4,
                children: [{
                    value: 2
                }, {
                    value: 1
                }, {
                    value: 1
                }, {
                    value: 0.5
                }]
            }, {
                value: 2
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }, {
            value: 3,
            children: [{
                children: [{
                    value: 1
                }]
            }]
        }],
        label: {
            color: '#000',
            textBorderColor: '#fff',
            textBorderWidth: 2,
            formatter: function (param) {
                var depth = param.treePathInfo.length;
                if (depth === 2) {
                    return 'radial';
                }
                else if (depth === 3) {
                    return 'tangential';
                }
                else if (depth === 4) {
                    return '0';
                }
            }
        },
        levels: [{}, {
            itemStyle: {
                color: '#CD4949'
            },
            label: {
                rotate: 'radial'
            }
        }, {
            itemStyle: {
                color: '#F47251'
            },
            label: {
                rotate: 'tangential'
            }
        }, {
            itemStyle: {
                color: '#FFC75F'
            },
            label: {
                rotate: 0
            }
        }]
    };
 seriesD ={  //将饼图 D 的 series 事先存在 对象 seriesD之中。
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50px', '70px'],
					center: ['100px', '211px'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: 12, name: '在线', itemStyle: { color: '#005eff' } },
                        { value: 3, name: '离线', itemStyle: { color: '#ff9194' } },
 
                    ]
                };
				
 seriesC={  //将饼图 C 的 series 事先存在 对象 seriesC 之中。
                    name: '来源',
                    type: 'pie',
                    radius: ['50px', '70px'],     
					center: ['900px', '440px'],
                     data: [
                		{value: 1048, name: 'id'},
                		{value: 735, name: 'name'},
                		{value: 580, name: 'age'},
                		{value: 484, name: 'sex'},
                		{value: 300, name: 'hobby'}],
				itemStyle: {       
                        normal: {
                            borderWidth: 1,
                            borderColor: '#2C2D3B'
                        }
                    },
					label: {
                		position: 'inner',
                		fontSize: 14,
            },           
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                			}
            		}
                };	  
 var option;
 option = {
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [ {  
		type: 'graph',
            layout: 'none',
            symbolSize: 100,
            roam:false,
			color:'rgba(0, 128, 0, 0.5)' ,
            label: {
                show: true,
				textStyle: {
    				fontSize: 35,
    				fontWeight: 'BOLD'
					}
            },
            data: [{
                name: '原点',
                x: 500,
                y: 350
            }, {
                name: 'C',
                x: 800,
                y: 300
            }, {
                name: 'A',
                x: 550,
                y: 100
            }, {
                name: 'D',
                x: 300,
                y: 157
            },{
                name: 'E',
                x:770,
                y: 450
            },{
                name: 'B',
                x: 750,
                y: 150,
				url: 'https://echarts.apache.org/zh/index.html'
            }],

            links: [{
                source: 0,
                target: 1,
               
            }, {
                source:0,
                target:2,
        
            }, {
                source: 0,
                target: 3
            }, {
                source: 0,
                target: 4
            }, {
                source:0,
                target:5
            },],
            lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0
            }
        	},]
};

option && myChart.setOption(option);
myChart.on('click', function(params) {
	if (params.data.name==='A') 
	openVideo('http://flv4mp4.people.com.cn/videofile7/pvmsvideo/2021/1/8/HaiWaiChuanBoBuLiuNing_6887eb94b5b811fe0ef46c7a4eedeb2b.mp4');
	else if(params.data.name==='B')
	window.open(params.data.url, "Newwindow", "height=1000, width=1000, top=100,left=100, scrollbars=yes, resizable=no");
	else {
	if (params.data.name==='D')
	option.series.push(seriesD);
	else if (params.data.name==='C')
	option.series.push(seriesC);
	else if (params.data.name==='E')
	option.series.push(seriesE);
	option && myChart.setOption(option);
	};
});

function openVideo(src) {
        var page = window.open();
            var s = "<body style='background: black'>" ;
                s += "<div style='width: 80%;margin: auto'>";
                s += "<video controls width='100%' autoplay src='" + src+ "'></video>";
                        "</div></body>";
        page.document.write(s);	
}    


</script>
</html>



report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK