ECharts圖表插件(4.x版本)使用(一、關系圖force節點顯示為自定義圖像/圖片,帶分類選擇)


導讀

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM