程序员_可乐 2021-06-09 09:39 采纳率: 0%
浏览 26

如何将html中 node[] 和links[] 数据用json格式从后台传到前台 如何连接数据库

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="referrer" content="no-referrer">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
</style>
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<script src="echarts-all.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div id="pie1"
	style="width: 100%; height: 100%; top: 20%; margin: 0 auto;"></div>
<script type="text/javascript">
  
    var myChart = echarts.init(document.getElementById('pie1'));
  option = {
        title : {
            text: '西藏旅游知识图谱',
            subtext: '',
            x:'center',
            y:'top'
        },
        tooltip : {
            trigger: "axis",
            trigger: 'item',
            formatter: '{a} : {b}',

            formatter:function (param) {
                var data = param.data;
                var links = option.series[0].links;
                var nodes = option.series[0].nodes;
                if (
                    data.source !== undefined
                    && data.target !== undefined
                ) { //点击的是边
                    var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];
                    var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];
                    return (sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
                } else if( data.category==2||data.category==4) { // 点击的是点
                    return (data.name + '(' + data.value + ')');
                   // window.open(data.http,"_blank");
               }else{
                    return(data.name);
                      }
            }
        },
        toolbox: {
            show : true,
            feature : {
                restore : {show: true},
                magicType: {show: true, type: ['force', 'chord']},
                saveAsImage : {show: true}
            }
        },
        legend: {
            x: 'left',
            y:'40px',
            data:['景点','地名','酒店','飞机','火车','汽车','餐馆','旅游产品','西藏特产'],
            selected:{'景点':false,'酒店':false,'飞机':false,'地址':false,'火车':false,'汽车':false,'游客':false,'餐馆':false,'旅游产品':false,'西藏特产':false},
        },
        series : [

            {
                type:'force',
                name : "",
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          //    scaleLimit:{min:0.8,max:1.1},
                


               

                ribbonType: false,
                categories : [
                    {
                        name: '景点'
                    },
                    {
                        name: '地名'
                    },
                    {
                        name:'酒店'
                    },
                   {
                        name:'飞机'
                    },
                    {
                        name:'火车'
                    },
                    {
                        name:'汽车'
                    },
                    {
                        name:'餐馆'
                    },
                    {
                        name:'旅游产品'
                    },
                   {
                        name:'西藏特产'
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                            fontSize: 7,
                            color: '#333'
                            }
                        },
                        nodeStyle : {
                            brushType : 'both',
                            borderColor : 'rgba(255,215,0,0.4)',
                            borderWidth : 1
                        },
                        linkStyle: {
                            type: 'curve'
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                        },
                        nodeStyle : {
                            //r: 30
                        },
                        linkStyle : {}
                    }
                },
                useWorker: false,
                minRadius : 15,
                maxRadius : 25,
                gravity: 1.1,
                scaling: 1.1,
       //      roam: 'move',
               nodes : [
                     {category:1, name: '拉萨',  symbolSize:15,label: '拉萨',url: "http://www.stepday.com/blog/"},
                    {category:1, name: '林芝', symbolSize:15, label: '林芝'},   


                ],
                links : [
                   {source : '布达拉宫', target : '拉萨', weight : '地理位置'},


                ],

            }
        ]
    };

    var ecConfig =  echarts.config;  
   function focus(param) {
   	var option = myChart.getOption();
   	var data = param.data;
   	if (data != null && data != undefined) {
   		if (data.url != null && data.url != undefined) {
   			window.open(data.url);
   		}
   	}
   }
   
    myChart.on( echarts.config.EVENT.CLICK, focus);

    myChart.on( echarts.config.EVENT.FORCE_LAYOUT_END, function () {
        console.log(myChart.chart.force.getPosition());
    });

myChart.setOption(option);

    </script>
</head>
</html>
  • 写回答

3条回答 默认 最新

  • technologist_30 2021-06-09 09:42
    关注

    前端可以调用后台接口拿到数据，

    后端是题主负责吗

    评论

报告相同问题？

悬赏问题

  • ¥30 为什么会失败呢，该如何调整
  • ¥50 如何在不能联网影子模式下的电脑解决usb锁
  • ¥20 服务器redhat5.8网络问题
  • ¥15 如何利用c++ MFC绘制复杂网络多层图
  • ¥20 要做柴油机燃烧室优化 需要保持压缩比不变 请问怎么用AVL fire ESE软件里面的 compensation volume 来使用补偿体积来保持压缩比不变
  • ¥15 python螺旋图像
  • ¥15 算能的sail库的运用
  • ¥15 'Content-Type': 'application/x-www-form-urlencoded' 请教 这种post请求参数，该如何填写？？重点是下面那个冒号啊
  • ¥15 找代写python里的jango设计在线书店
  • ¥15 请教如何关于Msg文件解析