Echarts 实现自定义图片关系图

百度echart 实现带图片头像的关系图

<!DOCTYPE html>
<html style="height: 100%"><head><meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset="utf-8"><style type="text/css"></style>
</head><body style="height: 100%; margin: 0"><div id="container" style="width:600px; height:500px; overflow:hidden;border: 1px solid red;"></div><script type="text/javascript" src="echarts.min.js"></script><script type="text/javascript">var myChart = echarts.init(document.getElementById("container")); var echartJson ={"series":[{"edgeLabel":{"normal":{"formatter":"{c}",//"show":true,//是否显示枝干上的关系文字}},//"edgeSymbol":"arrow",//circle,arrow//线两边显示箭头或圆"force":{"repulsion":200,//枝干线的长短 'edgeLength':40},"layout":"force","roam":true,"itemStyle":{"normal":{"color":"#00ff00"//文字颜色}},"label":{"normal":{//"show":true,//是否显示文字}},"symbol":"circle","symbolSize":1,"type":"graph",'lineStyle': {//线的样式'normal': {'opacity': 1,// width: 5,curveness: 0,'color': '#dcdcdc','type': 'solid'}},}],"tooltip":{"show":false//鼠标经过提示文字}};loadEcharts(echartJson);function loadEcharts(echartJson) {var option = echartJson;if (option && typeof option === "object") {myChart.setOption(option, true);}}//echarts图表点击跳转myChart.on('click', function (params) {if (params.data.id) {var idCard = params.data.link; // 获取被点击节点的身份证号alert(idCard);} else {alert('您点击节点信息！');}});// 关系链数据var links=[{ "source":"prente1","target":"c1"},{ "source":"prente1","target":"c2"},{ "source":"prente1","target":"c3"},{ "source":"prente1","target":"c4"},{"value":"[同户, ]","source":"prente1","target":"c7"},{ "source":"c6","target":"s1"},{ "source":"prente1","target":"c6"}];// 博主数据var map =[{"name":"张1","symbolSize":50,"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg","id":"prente1","itemStyle":{"normal":{"color":"red"}}},  {"name":"张4","symbol":"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1283473720,778141451&fm=11&gp=0.jpg","symbolSize":20,"id":"c1","link":'https://echarts.baidu.com/examples/#chart-type-bar'},{"name":"","symbol":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2495925920,1765913267&fm=26&gp=0.jpg","symbolSize":30,"id":"c2","link":'https://echarts.baidu.com/examples/#chart-type-bar'},{"name":"","symbol":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=26&gp=0.jpg","symbolSize":30,"id":"c3","link":'https://echarts.baidu.com/examples/#chart-type-bar'},{"name":"张7","symbol":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1515174754,211221812&fm=26&gp=0.jpg","symbolSize":20,"id":"c4","link":'https://echarts.baidu.com/examples/#chart-type-bar'},{"name":"张3","symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/67270022b4d9a3bb5d63.jpeg","symbolSize":20,"id":"c6","link":'https://echarts.baidu.com/examples/#chart-type-bar'},{"name":"张212","symbolSize":20,"symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/1b58b0005be232ddb44cb.jpeg","id":"c7","link":'https://echarts.baidu.com/examples/#chart-type-bar'},{"name":"张8","symbol":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4204462924,532086456&fm=11&gp=0.jpg","symbolSize":20,"id":"s1"}];pubdata(map);function getImgData(imgSrc) {var fun = function (resolve) {const canvas = document.createElement('canvas');const contex = canvas.getContext('2d');const img = new Image();img.crossOrigin = '';img.onload = function () {//设置图形宽高比例center = {x: img.width / 2,y: img.height / 2}var diameter = img.width;//半径canvas.width = diameter;canvas.height = diameter;contex.clearRect(0, 0, diameter, diameter);contex.save();contex.beginPath();radius = img.width / 2;contex.arc(radius, radius, radius, 0, 2 * Math.PI); //画出圆contex.clip(); //裁剪上面的圆形contex.drawImage(img, center.x - radius, center.y - radius, diameter, diameter, 0, 0,diameter, diameter); // 在刚刚裁剪的园上画图contex.restore(); // 还原状态resolve(canvas.toDataURL('image/png', 1))}img.src = imgSrc;}var promise = new Promise(fun);return promise}function pubdata(json) {var androidMap = json;var picList = [];//获取出全部图片for (var i = 0; i < androidMap.length; i++) { //把图片路径转成canvas let p = getImgData(androidMap[i].symbol);console.log(p)picList.push(p); }Promise.all(picList).then(function (images) {//取出base64 图片 然后赋值到jsondata中for (var i = 0; i < images.length; i++) {var img = "image://" + images[i];console.log(img);androidMap[i].symbol = img;}// 把数据设置到Echart中datamyChart.setOption({series: [{data: androidMap,links:links}]})})}</script>
</body></html>

Echarts 实现自定义图片关系图相关推荐

echarts中自定义图片的矢量路径设置
echarts中自定义图片的矢量路径设置在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 第一步 ...
Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts中自定义图片的矢量路径
在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 我们可以去阿里巴巴矢量图标库找到自己想要的图标, ...
Echarts实现自定义图标——风向图
上图用了两种模式表示风向图,第一种是自定义系列,第二种使用了折线图,给折线图添加自定义图标. 两者的区别在于给options.series设置不同的type值,如下图: 那么我们来一步步实现代码,先创 ...
微信小程序 ———— 使用ECharts实现树状关系图
在开发中,有时候会遇到展示一些人物关系,上下级关系等相关需求,使用树状图可以清晰的表达出来首先看下目录结构 - component- echarts- ec-canvas.js- ec-canvas ...
echarts simple graph上下级关系图
1.需求: 现有功能不够清晰展示关系,修改为上下级关系,现有功能图如下: 修改后功能图如下: 2.话不多说上代码 gxt(src,dst,attacks){if(src.length<=1){t ...
VUE实现echarts（悲惨世界人物关系图示例）
1.引入echarts npm i echarts 2.main.js中导入 import * as echarts from 'echarts' Vue.prototype.$echarts = e ...
关于echarts人物关系图，节点展现为图片
echarts示例中人物关系图中节点是原点或其他形状,但人物关系图中节点呈现为人物图像更为合适. 有些情况下,使用symbol: require('@/assets-')可以使用本地资源中的图片进行展 ...
关系图、股权图 vue 开发
https://github.com/mydaoyuan/my-development 继承.组织结构图可多级展开.继承,显示高亮信息等在线地址股权穿透图线上地址可多级展开.继承,动画展示, ...

Echarts 实现自定义图片关系图

Echarts 实现自定义图片关系图相关推荐

最新文章

热门文章