ECharts圖表外掛(4.x版本)使用(一、關係圖force節點顯示為自定義影象/圖片,帶分類選擇)
阿新 • • 發佈:2018-11-23
導讀
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>>。