ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

本篇探讨的是ECharts关系图中节点显示为自定义图像，对应所用技术点：Asp.Net MVC & Razor 视图引擎。

ECharts官网

ECharts官网下载地址

一、关系图节点显示为自定义图像效果图

 

 

关系图节点显示为自定义图像效果图

二、MVC后台数据获取 1.带分类的数据列表获取Action 核心代码

public JsonpResult GetScholarRelation(string id) { //参数校验 略 var list = new List<ScholarDto>();//学者集合列表 var groups = new List<ScholarDto>();//学者研究主题集合列表 try { IScholarService scholarService = new ScholarService();//获取数据接口 var group = scholarService.GetScholarRelation(new ScholarDto() { BookId = id }).GroupBy(c => c.GroupId);//IEnumerable<IGrouping<long?, ScholarDto>> int groupCode = 1; foreach (var item in group) { var subList = item.ToList();//子分组集合 foreach (var subItem in subList) { subItem.GroupCode = groupCode;//遍历子分组,研究主题序号重新编码 从1开始 } list.AddRange(subList); groups.Add(new ScholarDto() { GroupCode = subList.FirstOrDefault().GroupCode, GroupName = subList.FirstOrDefault().GroupName, GroupId = item.Key ?? 0 });//item.Key为GroupId groupCode++; } return this.Jsonp(new { Success = 1, Msg = "查询成功", List = list, Group = groups }); } catch (Exception ex) { return this.Jsonp(new { Success = 0, Msg = "查询失败：" + ex.Message }); } }