山东大学软件学院2018级暑期项目实训 第五周 第2次

一、echarts实现知识图谱

1）首先添加dom
2)

mounted () {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            var categories = [];
            for (var i = 0; i < 3; i++) {
                categories[i] = {
                    name: '类目' + i
                };
            }
            option = {
                // 图的标题
                // title: {
                //     text: '推理依据'
                // },
                // 提示框的配置
                tooltip: {
                    formatter: function (x) {
                        return x.data.name;
                    }
                },
                series: [{
                    type: 'graph', // 类型:关系图
                    layout: 'force', //图的布局，类型为力导图
                    symbolSize: 40, // 调整节点的大小
                    roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [2, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    force: {
                        repulsion: 2500,
                        edgeLength: [10, 50]
                    },
                    draggable: true,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#4b565b',
                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: true,
                            formatter: function (x) {
                                return x.data.name;
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {}
                        }
                    },
                    // 数据
                    data: [],
                    links: [],
                    categories: categories,
                }]
            };
            option && myChart.setOption(option);
        }

二、利用JS进行操作

                            if(res.status===204){
                                this.$notify({
                                    title: '该问题无答案',
                                    message: '',
                                    type: 'warning',
                                    offset: 100
                                });
                            }else{
                                this.show = 'open'
                                var mylist = []
                                mylist = res.data.searchresult
                                console.log(mylist)
                                const myChart1 = this.$echarts.init(document.getElementById('main'));
                                let option = myChart1.getOption();
                                option['title']={
                                    text: '推理依据'
                                };
                                var thedata = option.series[0].data
                                var thelinks = option.series[0].links

                                thedata.splice(0)
                                thelinks.splice(0)
                                var thecategories =  {}
                                this.answer = mylist.answer
                                console.log(this.answer)
                                var thetitle = []
                                var num = 0

                                for(let i =0;i<mylist.list.length;i++){

                                    if(thetitle.indexOf((mylist.list)[i].entity1) <= -1){
                                        if(!((mylist.list)[i].entity1_type in thecategories)){
                                            thecategories[(mylist.list)[i].entity1_type] = num
                                            num = num+1
                                        }

                                            thedata.push(
                                                {
                                                    name: (mylist.list)[i].entity1,
                                                    symbolSize: 50,
                                                    category: thecategories[(mylist.list)[i].entity1_type],
                                                }
                                            )
                                        thetitle.push((mylist.list)[i].entity1)
                                    }

                                    if(thetitle.indexOf((mylist.list)[i].entity2) <= -1){
                                        if(!((mylist.list)[i].entity2_type in thecategories)){
                                            thecategories[(mylist.list)[i].entity2_type] = num
                                            num = num+1
                                        }
                                            thedata.push(
                                                {
                                                    name: (mylist.list)[i].entity2,
                                                    symbolSize: 50,
                                                    category: thecategories[(mylist.list)[i].entity2_type],
                                                }
                                            )
                                        thetitle.push((mylist.list[i]).entity2)
                                    }

                                }
                                console.log(thecategories)
                                console.log(thedata)
                                for(let i =0;i<mylist.list.length;i++){
                                    thelinks.push(
                                        {
                                            source: (mylist.list)[i].entity1,
                                            target: (mylist.list)[i].entity2,
                                            name: (mylist.list)[i].rel,
                                        }
                                    )
                                }
                                console.log(thelinks)
                                myChart1.clear()
                                myChart1.setOption(option)