导读

如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢?

曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

本篇将着重介绍如何根据后台返回的列表数据,实例化多个Echarts,对应所用技术点:Asp.Net MVC & Razor 视图引擎

最终产品效果图

产品需求几经变化,由加载全部图表到默认只展示一个图表,再到节点展示改为图像等;

加载全部图表,多个ECharts

默认只展示一个图表,有分类筛选功能

默认只展示一个图表,节点展示改为图像,有分类筛选功能

实现思路

带有筛选功能展示不同Echarts图表,而不是一个ECharts图表里的筛选功能,此需求实现,采用一次性实例化多个ECharts,隐藏掉其余实例,而不是切换分类时请求数据,进行实例化。

后台返回数据在razor视图模板里接收

@{Layout = "~/Views/Shared/_xkLayout.cshtml";List<xk_group> listGroup = ViewBag.Group;List<ScholarDto> list = ViewBag.List;List<IGrouping<long?, ScholarDto>> listGrouping = ViewBag.Grouping;
}

html代码,含c#语法

  <div class="rc left" id="ResultData"><!--学者--><div class="scholar"><div class="choose clearfix">@if (listGrouping != null && listGrouping.Count > 0){foreach (var item in listGrouping){<a href="javascript:;" data-groupid="@item.Key" data-groupname="@item.FirstOrDefault().GroupName">@item.FirstOrDefault().GroupName</a>}}</div>@if (listGroup != null && listGroup.Count > 0){foreach (var item in listGroup){<div name="scholarRechart">@*<h1>研究“@(item.GroupName)”的学者</h1>*@<div id="relationChart_@item.GroupId"  data-groupid="@item.GroupId" data-groupname="@item.GroupName" style="width: 600px; height: 400px;"></div></div>}}                </div></div>

js代码 实例化多个ECharts

    @if (listGrouping != null && listGrouping.Count > 0){foreach (var item in listGrouping){<text>@*var groupName = "@item.FirstOrDefault().GroupName";*@$(function () {var nodes_@item.Key = [{//category: 0,name: "@item.FirstOrDefault().GroupName",//color: "green",
symbol: "circle",//"image://http://thumb12.jfcdns.com/2018-06/bce5b231ad7df722.png",symbolSize: 100,size: 100,label: "@item.FirstOrDefault().GroupName",x: null,y: null,draggable: true,//cursor:"pointer",
            label: {show: true,textStyle: {color: '#333',fontSize: 18,fontWeight: "bolder"},position: 'inside',//标签位置//distance: 50//标签距离图形的距离
            },}];var links_@(item.Key) = [];@*var legendData_@(item.Key) = [];*@@{var subList = item.ToList();if (subList != null && subList.Count > 0){foreach (var subItem in subList){<text>nodes_@(item.Key).push({//category: 1,name: "@subItem.RealName",//color:"green",symbol: 'image://@ProductConfigHelper.DomainXinKeUrl/imagesTemp/potrait/0@(random.Next(1,6)).png',symbolSize: 60,size: 60,x: null,y: null,//draggable: true,scholarUrl: "@subItem.Link"});links_@(item.Key).push({source: "@subItem.RealName",target: "@subItem.GroupName",weight: 6,name: "@subItem.RealName"});</text>
            }<text>//// 基于准备好的dom,初始化echarts实例var myChart_@(item.Key) = echarts.init(document.getElementById('relationChart_@item.Key'));option_@(item.Key) = {title: {text: '研究“@(item.FirstOrDefault().GroupName)”的学者',subtext: '',//x: 'middle',//y: 'top',//textStyle: {//    align: "center",//}//top: "middle",//bottom: "150",left: "center"},tooltip: {trigger: 'item',formatter: '{b}'},toolbox: {show: true,feature: {//restore: { show: true },magicType: { show: true, type: ['force', 'chord'] },//saveAsImage: { show: true }
                }},@*legend: {x: 'left',data: legendData_@(item.Key)//['作者', '家人', '朋友']},//分类*@//edgeLength: [500, 100],
            series: [{type: 'graph',//name: "相关学者",cursor: "pointer",draggable: false,layout: 'force',//symbol: 'pin',ribbonType: false,//categories: seriesCategories,cursor:'pointer',itemStyle: {normal: {color: "#2ec7c9",//节点颜色
                            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: 'scale',//设置成可缩放
                    nodes: nodes_@(item.Key),links: links_@(item.Key),force: {repulsion: 1000}}]};// 使用刚指定的配置项和数据显示图表。
        myChart_@(item.Key).setOption(option_@(item.Key));//节点点击事件myChart_@(item.Key).on('click', function (param) {if (param.data.scholarUrl) {window.open(param.data.scholarUrl);}});</text>
        }}})</text>
        }}

在script标签里,使用razor视图模板语法,在C#代码里输出js代码,使用<text></text>标签即可。

后台获取Echarts所需相关数据的方法及相关model

#region 获取相关学者列表/// <summary>/// 获取相关学者列表/// </summary>/// <param name="id"></param>/// <returns></returns>public JsonpResult GetScholarRelation(ScholarDto p){if (string.IsNullOrEmpty(p.BookId)){return this.Jsonp(new { Success = 0, Msg = "查询失败:" + ":前台传参异常" });}var list = new List<ScholarDto>();//学者集合列表var groups = new List<ScholarDto>();//学者研究主题集合列表try{list=scholarService.GetScholarRelation(p);var group=list.GroupBy(c => c.GroupId);foreach (var item in group){groups.Add(new ScholarDto(){ GroupId=item.Key??0,GroupName=item.FirstOrDefault().GroupName});}return this.Jsonp(new { Success = 1, Msg = "查询成功", List = list, Group = groups });}catch (Exception ex){return this.Jsonp(new { Success = 0, Msg = "查询失败:" + ex.Message });}}#endregion

 public partial class xk_scholar{public long Id { get; set; }public string BookId { get; set; }public string RealName { get; set; }public Nullable<long> GroupId { get; set; }public string Avatar { get; set; }public string Link { get; set; }public string Editor { get; set; }public Nullable<int> OrderNum { get; set; }public Nullable<System.DateTime> ADDTIME { get; set; }public Nullable<System.DateTime> UpdateTime { get; set; }public Nullable<int> IsDel { get; set; }}

 public class ScholarDto : xk_scholar{/// <summary>/// 研究主题名称/// </summary>public string GroupName { get; set; }/// <summary>/// 重新编码排序的研究主题编号,从1开始,用以使用插件echarts/// </summary>public int GroupCode { get; set; }}

前台脚本,控制图表显示与隐藏

 $(function () {var curGroupId=@(ViewBag.GroupId??0);if (curGroupId>0) {//通过左侧导航点击$(".choose a[data-groupid='{0}']".format(curGroupId)).click();}else {//默认第一条显示$(".choose a:eq(0)").click();}init_ready();//调整高度})

总结

切换分类,展示不同的ECharts,可以采用实例化多个ECharts,脚本控制图表的显示与隐藏。在script标签里,使用razor视图模板语法,在C#代码里输出js代码,使用<text></text>标签即可。

转载于:https://www.cnblogs.com/EvanFan/p/10008438.html

Echarts图表插件(4.x版本)使用(二、带分类筛选的多个图表/实例化多个ECharts,以关系图/force为例)...相关推荐

  1. python 课后习题:项目二数据分析之《冰与火之歌》全五卷人物关系图

    其实这种人物关系图网上教程一大堆,我也是照着做的.在这里说一下我出错的地方,以及需要注意的一些东西. 注意: a. 代码缩进,我照着网上抄,网上的缩进不清楚然后我抄错了都没发现,结果出现了人名出现次数 ...

  2. DataGear 自定义数据可视化图表插件

    DataGear内置的70余种图表(折线图.柱状图.饼图.散点图.雷达图.地图.桑基图.K线图.箱形图.路径图等等),都是以图表插件的形式提供的,当这些内置图表无法满足应用需求时,则可以通过自定义图表 ...

  3. 转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...

    站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...

  4. wx-charts 微信小程序图表插件

    阅读数:9460 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好 ...

  5. 微信小程序-wx-charts 图表插件

    微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制. 支持图标类型 饼图 pie 圆环图 ring 线图 line 柱状图 ...

  6. 6款jQuery图表插件

    图表应用能让数据显示更加直观易懂,但光靠CSS +Xhtml 或纯图片实现的图表显然有很多局限性,强大的jquery 让我们可以实现各种很强大的图表,下面是6款jQuery图表插件 ,另外,你也许也愿 ...

  7. html 圆圈图表插件,10款HTML5动画图表插件

    创建一个HTML5网页图表应用已经非常简单,利用Canvas更是能绘制出绚丽的动画效果,也就是说你的HTML5图表能动起来,给人不一样的用户体验.本文就主要来分享一些最常用的HTML5图表插件,不仅外 ...

  8. 保姆级教程|ECharts图表插件一文搞懂!

    黑马程序员视频库 播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台 在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...

  9. echarts图表插件炫光的分布地图动画特效

    echarts图表插件炫光的分布地图动画特效 作品介绍 1.网页作品简介方面 :地图html5图表html5动画 2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+ ...

最新文章

  1. 记一次阿里云RDS与自建数据库同步中断的补救过程
  2. VR的风口,让UWA借你一双翅膀
  3. mediarecorder路径设置为localsocket_[基础教程]-04 NanUI 启动器 Bootstrap 的设置
  4. 网页关闭(解决window.close在火狐下不兼容问题)
  5. mysql内存数据库性能_Mysql内存表配置及性能测试
  6. 怎么把东西去掉修图_很多人花几千块学习商业修图,其实跟把钱扔了一样。?...
  7. 周鸿祎吐槽乘坐达美航空奇葩经历:飞机飞到半路 机组说要下班
  8. 数据库某个字段增加或减少数量
  9. android 拍照 图片剪切
  10. 几个对字符串进行操作的函数
  11. Eclipse用法和技巧十二:快速复制一行
  12. 我在公司内部的分享(秒针系统)
  13. 工厂利用计算机实现温度调节属于,工厂利用计算机系统实现温度调节、阀门开关,该应用属于()。A.过程控制B.数据处理C.科学计算D.C...
  14. 【MATLAB】MATLAB数值计算
  15. CH32F103与STM32F103在USB接口上的差异与使用
  16. 软件开源许可协议简介
  17. php excel速度慢,window_win10双击打开excel太慢了的三种解决办法,win10双击打开excel文件慢该怎么 - phpStudy...
  18. Nacos 配置不生效
  19. 华为eNSP-ISIS理论+实验配置
  20. LC3编码开源代码测试

热门文章

  1. TencentOS-tiny 时间管理(十 六)- 时间片轮转机制
  2. PowerBI/DAX的计算组功能是什么?怎么用?
  3. 计算机网络 IP地址基础知识
  4. Python中的range函数和arange函数的区别与联系
  5. MaxCompute SQL示例解析
  6. Mapreduce 跑的慢的原因
  7. 干货 :7招帮你打造完美数据科学GitHub作品集!
  8. linux下退出mysql
  9. 解锁scott用户,以及查看oracle中scott用户所拥有的四张表。
  10. python interpolate_[转载]python插值