導讀
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
本篇探討的是ECharts關系圖中節點顯示為自定義圖像，對應所用技術點：Asp.Net MVC & Razor 視圖引擎。
一、關系圖節點顯示為自定義圖像效果圖
關系圖節點顯示為自定義圖像效果圖
二、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 }); } }
- MVC框架沒有返回結果為JsonpResult的方法，有簡單封裝；
- ScholarDto類中GroupCode為從1編碼的分類索引，用以填充ECharts分類相關配置項；
2.數據傳輸對象ScholarDto
public class ScholarDto : xk_scholar
{
/// <summary>
/// 研究主題名稱
/// </summary>
public string GroupName { get; set; }
/// <summary>
/// 重新編碼排序的研究主題編號，從1開始，用以使用插件echarts
/// </summary>
public int GroupCode { get; set; }
}
三、前台Razor視圖內html及js
1.ECharts容器
//頁面引用jquery及4.x版本的ECharts
//<script src="~/js/echarts/src/echarts.min.js"></script>
//為 ECharts 准備一個具備高寬的 DOM 容器。
<div class="scholar">
<div id="relationChart" style="width: 600px; height: 400px;">
</div>
</div>
2.ECharts配置項及初始化
var author = "@Author"; var nodes = [{ category: 0, name: author, symbol: "circle",//"image://http://thumb12.jfcdns.com/2018-06/bce5b231ad7df722.png", symbolSize: 100, size: 100, label: author + "\n（作者）", x: null, y: null, draggable: true }] var links = [];//關系線條 var legendData = [];//分類按鈕，中心節點去掉分類搜索 var seriesCategories = ["作者"];//關系圖只有二級，中心節點獨占一個分類，分類索引為0 //// 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('relationChart')); option = { title: {//標題組件，包含主標題和副標題。 text: '相關學者：@Author', subtext: '', x: 'right', y: 'bottom' }, tooltip: {//提示框組件 trigger: 'item', formatter: '{a} : {b}' }, toolbox: {//工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。 show: true, feature: { restore: { show: true },//重置 magicType: { show: true, type: ['force', 'chord'] }, saveAsImage: { show: true }//導出圖片 } }, legend: {//圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。 x: 'left', data: legendData//['作者', '家人', '朋友'] }, //edgeLength: [500, 100], series: [//系列列表。每個系列通過 type 決定自己的圖表類型。series[i]-graph用於展現節點以及節點之間的關系數據。 { type: 'graph', name: "相關學者", layout: 'force', //symbol: 'pin', ribbonType: false, categories: seriesCategories,//分類數據 itemStyle: { normal: { label: { show: true, textStyle: { color: '#333' }, position: 'bottom',//標簽位置 distance: 5//標簽距離圖形的距離 }, nodeStyle: { brushType: 'both', borderColor: 'rgba(255,215,0,0.4)', borderWidth: 1 }, linkStyle: { type: 'line' } }, emphasis: {//高亮的圖形樣式 label: { show: false // textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE }, nodeStyle: { //r: 30 }, linkStyle: {} } }, //useWorker: false, minRadius: 15, maxRadius: 25, //gravity: 0.1,//節點受到的向中心的引力因子。該值越大節點越往中心點靠攏。 //scaling: 0.1, //roam: 'move', nodes: nodes,//同data,關系圖的節點數據列表。 links: links,//節點間的關系數據。 force: { repulsion: 1000//節點之間的斥力因子。 } }] };
3.ECharts動態填充配置項數據
$(function () { getRelation("@bookId");//@bookId為Razor視圖引擎語法 }) function getRelation(id) { //使用了Layer插件 $.ajax({ url: "..../GetScholarRelation", type: "post", dataType: "jsonp", async: false, data: { "Id": id }, jsonp: "callback", beforeSend: function () { loadingLayer = layer.load(1, { shade: [0.6, '#fff'] }); }, success: function (data) { var result = data; if (result.Success == 1) { //節點 $.each(result.List, function (i, e) { nodes.push({ category: e.GroupCode, name: e.RealName, symbol: "image://e.Avatar",//e.Avatar為圖片鏈接 symbolSize: 60, size: 60, x: null, y: null, draggable: true, scholarUrl:e.Link }), links.push( { source: e.RealName, target: author, weight: 6, name: e.RealName, }) }) $.each(result.Group, function (i, e) { legendData.push(e.GroupName); seriesCategories.push({ name: e.GroupName }) }) // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); } else { layer.msg(result.Msg); } } }); }
symbol配置為: "image://url"即可使節點顯示為圖片。為了美觀，將圖片展示為圓形，此圖片為png格式的半透明圖片，暫未深入研究使用配置項將圖片節點樣式設置為圓形；
3.ECharts節點綁定點擊事件
//節點點擊事件 myChart.on('click', function (param) { //param是個強大的參數，里面有你想要的 if (param.data.scholarUrl) {//scholarUrl為自定義屬性 window.open(param.data.scholarUrl); } });
四、值得注意的幾個點
- ECharts 2.x 中
force類型的圖表不再在 ECharts 3 中提供支持，轉為統一使用graph去展現關系數據。如果要使用力引導布局，可以將 layout 配置項設為'force'。 -
ECharts 3 開始不再強制使用 AMD 的方式按需引入，代碼里也不再內置 AMD 加載器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標簽引入。
- 需要為 ECharts 准備一個具備高寬的 DOM 容器。
- 5 分鍾上手 ECharts
附其他參考資料
總結
本篇主要介紹了ECharts圖表插件(4.x版本)關系圖節點顯示為自定義圖片的方法，即將節點配置項symbol設置為"image://url"，提到了節點綁定點擊事件的方式，順帶介紹了MVC框架下數據交互及填充。lambda 語法獲取及處理列表分組數據，GroupBy返回值類型為 IEnumerable<IGrouping<TKey, TSource>>。