小白学习echart可视化图表添加超链接并留下问题

最新推荐文章于 2024-05-22 10:05:28 发布

Drone_xjw

最新推荐文章于 2024-05-22 10:05:28 发布

阅读量3k

点赞数

分类专栏： java基础文章标签： java javascript 可视化

本文链接：https://blog.csdn.net/xjw9602/article/details/106396649

版权

java基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

echart拥有许多非常好看的可视化图例，当我们把json或者xml格式的数据导入之后，更改成为我们想要的点或边，我们就可以看到一个根据自己数据的可视化。
但是，这些点代表了不同的实体意义，这里也只是体现了实体间的关系。所以，我们需要为每个点添加一个链接，查看详细的实体点意义。

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%">
	   </div>
	   	<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>		
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度api ak值&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.getJSON('*改为你的文件，json格式，如 123.json', function (json) {
    myChart.hideLoading();
    myChart.setOption(option = {
        title: {
            text: 'NPM Dependencies'
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                type: 'graph',
                layout: 'none',
                // progressiveThreshold: 700,
                data: json.nodes.map(function (node) {
                    return {
                        x: node.x,//坐标
                        y: node.y,
                        id: node.id,//点名字
                        name: node.label,//点名字
                        symbolSize: node.size,
                        itemStyle: {
                            color: node.color
                        }
                    };
                }),
                edges: json.edges.map(function (edge) {
                    return {
                        source: edge.sourceID,
                        target: edge.targetID
                    };
                }),
                emphasis: {
                    label: {
                        position: 'right',
                        show: true
                    }
                },
                roam: true,
                focusNodeAdjacency: true,
                lineStyle: {
                    width: 0.5,
                    curveness: 0.3,
                    opacity: 0.7
                }
            }
        ]
    }, true);
});;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

myChart.on('click', function (param) {

       console.log(param);//打印查看获取到的数据
       console.log(param.data);//一层一层查看获取到的是不是想要的
       console.log(param.data.id);//最终获取
       window.open("http://www.baidu.com");//自己的链接并拼接id跳转
        });
       </script>
   </body>
</html>

当然上面只是解决了问题的一部分，这里也记录一下自己的问题，由于我获取的id是这样子的 gi|151324|gb|aaa25873.1|structural，而师兄网站跳转是根据这个蛋白序列在数据库中存储的id（如 1，2，3）作为链接跳转，那么我就得想办法把json中得id和数据库中的id对应上。
猜想

在后端把json中的id和数据库中的id对应上，然后每次点击事件，把json的id送回后端对应再跳转
更改json数据，直接添加一个url，然后获取url跳转
能不能修改跳转链接，不要只以数据库中蛋白序列的id作为跳转，那么我就可以把json中的id切割处理后再拼接跳转。

参考博客及官方图例

https://echarts.apache.org/examples/zh/editor.html?c=graph-npm
https://blog.csdn.net/zxmin1302/article/details/85783757
https://blog.csdn.net/weixin_42068855/article/details/89372477