導讀
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>>。