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