导读

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

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

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

最终产品效果图

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

加载全部图表,多个ECharts

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

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

实现思路

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

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

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

html代码,含c#语法

  1. <div class="rc left" id="ResultData">
  2. <!--学者-->
  3. <div class="scholar">
  4.  
  5. <div class="choose clearfix">
  6. @if (listGrouping != null && listGrouping.Count > 0)
  7. {
  8. foreach (var item in listGrouping)
  9. {
  10. <a href="javascript:;" data-groupid="@item.Key" data-groupname="@item.FirstOrDefault().GroupName">@item.FirstOrDefault().GroupName</a>
  11. }
  12. }
  13. </div>
  14. @if (listGroup != null && listGroup.Count > 0)
  15. {
  16. foreach (var item in listGroup)
  17. {
  18. <div name="scholarRechart">
  19. @*<h1>研究“@(item.GroupName)”的学者</h1>*@
  20. <div id="relationChart_@item.GroupId" data-groupid="@item.GroupId" data-groupname="@item.GroupName" style="width: 600px; height: 400px;">
  21.  
  22. </div>
  23. </div>
  24.  
  25. }
  26. }
  27. </div>
  28. </div>

js代码 实例化多个ECharts

  1. @if (listGrouping != null && listGrouping.Count > 0)
  2. {
  3.  
  4. foreach (var item in listGrouping)
  5. {
  6. <text>
  7. @*var groupName = "@item.FirstOrDefault().GroupName";*@
  8. $(function () {
  9. var nodes_@item.Key = [{
  10. //category: 0,
  11. name: "@item.FirstOrDefault().GroupName",
  12. //color: "green",
  13.  
  14. symbol: "circle",//"image://http://thumb12.jfcdns.com/2018-06/bce5b231ad7df722.png",
  15. symbolSize: 100,
  16. size: 100,
  17. label: "@item.FirstOrDefault().GroupName",
  18. x: null,
  19. y: null,
  20. draggable: true,
  21. //cursor:"pointer",
  22. label: {
  23. show: true,
  24. textStyle: {
  25. color: '#333',
  26. fontSize: 18,
  27. fontWeight: "bolder"
  28.  
  29. },
  30. position: 'inside',//标签位置
  31. //distance: 50//标签距离图形的距离
  32. },
  33. }];
  34. var links_@(item.Key) = [];
  35. @*var legendData_@(item.Key) = [];*@
  36. @{
  37. var subList = item.ToList();
  38. if (subList != null && subList.Count > 0)
  39. {
  40.  
  41. foreach (var subItem in subList)
  42. {
  43. <text>
  44.  
  45. nodes_@(item.Key).push({
  46. //category: 1,
  47. name: "@subItem.RealName",
  48. //color:"green",
  49. symbol: 'image://@ProductConfigHelper.DomainXinKeUrl/imagesTemp/potrait/0@(random.Next(1,6)).png',
  50. symbolSize: 60,
  51. size: 60,
  52. x: null,
  53. y: null,
  54. //draggable: true,
  55. scholarUrl: "@subItem.Link"
  56. });
  57. links_@(item.Key).push(
  58. {
  59. source: "@subItem.RealName",
  60. target: "@subItem.GroupName",
  61. weight: 6,
  62. name: "@subItem.RealName"
  63. });
  64.  
  65. </text>
  66. }
  67. <text>
  68. //// 基于准备好的dom,初始化echarts实例
  69. var myChart_@(item.Key) = echarts.init(document.getElementById('relationChart_@item.Key'));
  70. option_@(item.Key) = {
  71. title: {
  72. text: '研究“@(item.FirstOrDefault().GroupName)”的学者',
  73. subtext: '',
  74. //x: 'middle',
  75. //y: 'top',
  76. //textStyle: {
  77. // align: "center",
  78. //}
  79. //top: "middle",
  80. //bottom: "150",
  81. left: "center"
  82. },
  83. tooltip: {
  84. trigger: 'item',
  85. formatter: '{b}'
  86. },
  87. toolbox: {
  88. show: true,
  89. feature: {
  90. //restore: { show: true },
  91. magicType: { show: true, type: ['force', 'chord'] },
  92. //saveAsImage: { show: true }
  93. }
  94. },
  95. @*legend: {
  96. x: 'left',
  97. data: legendData_@(item.Key)//['作者', '家人', '朋友']
  98. },//分类*@
  99. //edgeLength: [500, 100],
  100. series: [
  101. {
  102. type: 'graph',
  103. //name: "相关学者",
  104. cursor: "pointer",
  105. draggable: false,
  106. layout: 'force',
  107. //symbol: 'pin',
  108. ribbonType: false,
  109. //categories: seriesCategories,
  110. cursor:'pointer',
  111. itemStyle: {
  112. normal: {
  113. color: "#2ec7c9",//节点颜色
  114. label: {
  115. show: true,
  116. textStyle: {
  117. color: '#333'
  118. },
  119. position: 'bottom',//标签位置
  120. distance: 5//标签距离图形的距离
  121. },
  122. nodeStyle: {
  123. brushType: 'both',
  124. borderColor: 'rgba(255,215,0,0.4)',
  125. borderWidth: 1
  126. },
  127. linkStyle: {
  128. type: 'line'
  129. }
  130. },
  131. emphasis: {
  132. label: {
  133. show: false
  134. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  135. },
  136. nodeStyle: {
  137. //r: 30
  138. },
  139. linkStyle: {}
  140. }
  141. },
  142. //useWorker: false,
  143. minRadius: 15,
  144. maxRadius: 25,
  145. //gravity: 0.1,
  146. //scaling: 0.1,
  147. roam: 'scale',//设置成可缩放
  148. nodes: nodes_@(item.Key),
  149. links: links_@(item.Key),
  150.  
  151. force: {
  152. repulsion: 1000
  153. }
  154. }
  155. ]
  156. };
  157.  
  158. // 使用刚指定的配置项和数据显示图表。
  159. myChart_@(item.Key).setOption(option_@(item.Key));
  160. //节点点击事件
  161. myChart_@(item.Key).on('click', function (param) {
  162. if (param.data.scholarUrl) {
  163. window.open(param.data.scholarUrl);
  164. }
  165. });
  166. </text>
  167. }
  168. }
  169. })
  170.  
  171. </text>
  172. }
  173. }

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

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

  1. #region 获取相关学者列表
  2. /// <summary>
  3. /// 获取相关学者列表
  4. /// </summary>
  5. /// <param name="id"></param>
  6. /// <returns></returns>
  7. public JsonpResult GetScholarRelation(ScholarDto p)
  8. {
  9. if (string.IsNullOrEmpty(p.BookId))
  10. {
  11. return this.Jsonp(new { Success = , Msg = "查询失败:" + ":前台传参异常" });
  12. }
  13. var list = new List<ScholarDto>();//学者集合列表
  14. var groups = new List<ScholarDto>();//学者研究主题集合列表
  15. try
  16. {
  17. list=scholarService.GetScholarRelation(p);
  18. var group=list.GroupBy(c => c.GroupId);
  19. foreach (var item in group)
  20. {
  21. groups.Add(new ScholarDto(){ GroupId=item.Key??,GroupName=item.FirstOrDefault().GroupName});
  22. }
  23. return this.Jsonp(new { Success = , Msg = "查询成功", List = list, Group = groups });
  24. }
  25. catch (Exception ex)
  26. {
  27. return this.Jsonp(new { Success = , Msg = "查询失败:" + ex.Message });
  28. }
  29. }
  30. #endregion
  1. public partial class xk_scholar
  2. {
  3. public long Id { get; set; }
  4. public string BookId { get; set; }
  5. public string RealName { get; set; }
  6. public Nullable<long> GroupId { get; set; }
  7. public string Avatar { get; set; }
  8. public string Link { get; set; }
  9. public string Editor { get; set; }
  10. public Nullable<int> OrderNum { get; set; }
  11. public Nullable<System.DateTime> ADDTIME { get; set; }
  12. public Nullable<System.DateTime> UpdateTime { get; set; }
  13. public Nullable<int> IsDel { get; set; }
  14. }
  1. public class ScholarDto : xk_scholar
  2. {
  3. /// <summary>
  4. /// 研究主题名称
  5. /// </summary>
  6. public string GroupName { get; set; }
  7. /// <summary>
  8. /// 重新编码排序的研究主题编号,从1开始,用以使用插件echarts
  9. /// </summary>
  10. public int GroupCode { get; set; }
  11. }

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

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

总结

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

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

  1. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

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

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

  3. 图标插件--jqplot实现柱状图及饼图,表盘图演示样例

    柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: /** * Class: Ser ...

  4. 数据图表插件echarts(二)

    前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...

  5. vue3.x版本安装element-ui、axios及echarts图表插件

    项目中安装使用element-UI 命令行: vue add element 安装成功后,项目会自动将element-UI引入项目中,刷新项目即可 项目中安装使用axios数据请求 vue add a ...

  6. 如何在网页中用echarts图表插件做出静态呈现效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 转-——推荐几个web中常用的一些js图表插件 - zccst

    http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...

  8. 推荐几个web中常用js图表插件

    作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...

  9. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 大白话五种IO模型

    目录 一.I/O模型介绍 二.阻塞I/O模型 2.1 一个简单的解决方案 2.2 该方案的问题 2.3 改进方案 2.4 改进后方案的问题 三.非阻塞I/O模型 3.1 非阻塞I/O实例 四.多路复用 ...

  2. LinkedList源码分析:JDK源码分析系列

    如果本文中有不正确的地方请指出由于没有留言可以在公众号添加我的好友共同讨论. 1.介绍 LinkedList 是线程不安全的,允许元素为null的双向链表. 2.继承结构 我们来看一下LinkedLi ...

  3. 小白开学Asp.Net Core 《七》

    小白开学Asp.Net Core <七> — — 探究中间件(MiddleWare) 1.何为中间件? 中间件是组装到应用程序管道中以处理请求和响应的家伙,管道中的每个组件都要满足以下两个 ...

  4. C#实体是什么

    实体 一般是指三层结构的数据库访问形式中,用于映射数据表或视图中一条记录的类的实例.例如现有数据表A 内涵 ID int(4) Info(nvarchar 50)两个字段,而有其对应的类 public ...

  5. scala刷LeetCode--26 删除排序数组中的重复项

    一.题目描述 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完 ...

  6. 扒一扒那些教程中不常被提及的JavaScript小技巧

    1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值.结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重复值的功能. const array ...

  7. Android开发-实现第三方APP跳转

    自己创建一个按钮: <Button android:id="@+id/btn_button" android:layout_width="fill_parent&q ...

  8. python爬虫常用正则表达式组合匹配

    ["\']匹配什么?(.*?)匹配什么? ["\']       -----------     匹配单双引号 (.*?)xxx ----------- 匹配任意长度字符+xxx ...

  9. c# Inner Join sql 和 Enumerable.Join

    using System; using System.Collections.Generic; using System.Linq; namespace ConsoleApp1 { class Pro ...

  10. Excel催化剂开源第33波-Quick Bible For PPT插件项目全代码开源

    很感恩,能够在上帝奇妙地带领下,经过多方的资源整合后,可以从我手中完成一款对教会内部制作PPT过程中,引用圣经的这个小环节能够发挥一些小小的作用的小插件.因制作本插件时,也大量用到VSTO开发的一些技 ...