Echarts 饼图处理 option动态赋值 点击事件 一级钻取 自定义按钮 数据格式化

最新推荐文章于 2024-02-02 11:15:39 发布
最新推荐文章于 2024-02-02 11:15:39 发布
阅读量2.8k 收藏 3
点赞数
分类专栏： Echarts 饼图 动态赋值 一级钻取 文章标签： Echarts饼图处理 option动态赋值 点击事件 一级钻取 自定义按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39540475/article/details/76795774
版权

  当点击家庭投诉分类下的网络故障时会钻取到网络故障下的分类进行饼图的展示，并且右上角有自定义按钮，点击可以可以刷新页面，因为我做的这个项目只支持一级钻取，所有点击按钮之后是重新载入了这个页面，我没有在Echarts的文档中找到回退上一级的这个api，只是简单的刷新了一下页面，知道的朋友可以告诉我哈。

通过ajax动态赋值钻取的时候，json是以List<Map<String, Object>>转化的，解析算法比较重要。

具体的可以看我代码，我在代码中有注释哈

图一 页面打开时的饼图展示 图二 点击网络故障时饼图展示 图三 点击事件中函数参数a中封装的信息 图四 解析的excel文件

本人第一次写博客，请多多指教！

jsp部分代码展示

<%@page pageEncoding="UTF-8" import="java.util.*"%>
<%@ page language="java" contentType="text/html;charset=UTF-8"
isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>投诉分类信息</title>
<link href="<%=request.getContextPath()%>/resources/css/bootstrap.css"
rel="stylesheet" media="screen">
<link
href="<%=request.getContextPath()%>/resources/css/bootstrap-theme.css"
rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/resources/view/css/portal.css"
rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/resources/view/css/select.css"
rel="stylesheet" media="screen">
<script src="<%=request.getContextPath()%>/resources/js/jquery.min.js"></script>
<script
src="<%=request.getContextPath()%>/resources/js/bootstrap.min.js"></script>
<script
src="<%=request.getContextPath()%>/resources/My97DatePicker/WdatePicker.js"></script>
<script

/* 我用的是2.2.7的版本，通过这种方式引入是比较简单的  */
src="${pageContext.request.contextPath }/resources/js/echarts-2.2.7/build/dist/echarts-all.js"></script>
</head>
<body>

/* 预留的饼图的div  */
<div id="main" style="width:800px;height:500px;">
</div>

</div>
</div>
</div>
</body>
<script type="text/javascript">
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// el表达式获取后台传递的数据

/* 可以直接将后台取到的json数据填充legend series等中去显示 */

var legend1 = ${legend};
var series1 = ${series};
var textTotal = ${text};
var thirdName = ${thirdName};
var date1 = $("#date1").val();
// 指定图表的配置项和数据
var option = {
   title: {
       text: textTotal+'的分类 :',
       x:'left'
   },
   tooltip: {
     trigger: 'item',
         formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   legend: {
    // 默认为水平展示legend
    x: 'center',
           y: '400px',
    data:legend1
   },
   toolbox: {  
       show : true,
       feature : {
        dataView: { // 数据视图
                       show: true
                   },
           myTool: { // 自定义的刷新按钮

/*  我没有找到怎么回退的点击事件，知道的可以告诉我哈，我是通过刷新页面实现的，不是很好。这个icon不能自定义 */
               show: true,
               title: '返回',
               icon: 'image://http://echarts.baidu.com/images/favicon.png', 
               onclick: function (){
                   window.location.href="<%=request.getContextPath()%>/complaintMessageCategory/show?date="+date1;
               }
           }
       }  
   },
   series : [
             {
                 name: thirdName,
                 type: 'pie',
                 radius : '50%',
                 center: ['50%', '40%'],
                 data:series1,
                 itemStyle: {
                     emphasis: {
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 },
                 itemStyle:{ 
                     normal:{ 
                           label:{ 
                             show: true, 
                             formatter: '{b} : {c} ({d}%)' 
                           }, 
                           labelLine :{show:true} 
                         } 
                     } 
             }
         ]    
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

myChart.on('click',function(a,b){

/* 点击部分饼图的信息会封装到a中去，可以看下面的截图哈，然后从a中拿到需要的数据信息 */

console.log(a);  
var options = myChart.getOption();  
    $.ajax({
           url: "<%=request.getContextPath()%>/complaintMessageCategory/forthPieByForthName",
           type: "POST",
           dataType: "json",
           data: {
             "forthName": a.name,
             "date":date1
           },
           async: false,
           success: function(data) {
          if(data){

/*  一定要按照需要的格式返回json数据*/
     options.title.text = textTotal+'→'+a.name+'的分类 :';  
                   options.series[0].data = data.series;
                   options.series[0].name = data.forthName;
     options.legend.data = data.legend;  

/* ture一定要加上! 否则数据量比较小的钻取会和上一级的数据合并显示！看一下api就知道了  */

                   myChart.setOption(options,true);
          }
           },
           error: function() {
             alert("error!");
           }
          }); 
});
</script>
</html>

后台代码展示

动态展示多条数据的时候只能以List<Map<String, Object>>的格式转换为json数据，所以一定要把解析部分的代码写好！

@RequestMapping("forthPieByForthName")
public void forthPieByForthName(String forthName, String date,
HttpServletResponse res) {
boolean flag = false;
PrintWriter out = null;
List<Map<String, Object>> mapList = new ArrayList<Map<String, Object>>();
List<Map<String, Object>> mapList2 = new ArrayList<Map<String, Object>>();
List<String> stringList = new ArrayList<String>();
List<String> stringList2 = new ArrayList<String>();
try {
if (date == null || "".equals(date)) {
date = DateUtil.getLastDate();
}
List<ComplaintMessageCategory> list = this.complaintCategoryService
.selectCompalintCategoryByDate(date);
// 解析complaintCategory后放置在mapList中
for (ComplaintMessageCategory category : list) {
Map<String, Object> map = new HashMap<String, Object>();
String message = category.getComplaintCategory();
if (message != null && message.length() > 0
&& message.indexOf("→") != 0) {
String[] strings = category.getComplaintCategory().split(
"→");
if (strings.length >= 5
&& strings[3].indexOf("LTE-FI") == -1
&& strings[3].equals(forthName)) {
map.put("value", category.getBuildBillTotal());
map.put("name", strings[4]);
stringList.add(strings[4]);
// 最后将满足条件的map添加到maplist中
mapList.add(map);
}
}
}
// 将mapList中相同的数据合并到mapList2
for (Map<String, Object> map : mapList) {
flag = false;
String nameValue = (String) map.get("name");
if (nameValue != null && nameValue.length() > 0) {
HashMap<String, Object> map2 = new HashMap<String, Object>();
for (Map<String, Object> map3 : mapList2) {
if (map3.get("name").equals(nameValue)
&& nameValue.length() > 0) {
map3.put(
"value",
String.valueOf(Integer
.valueOf((String) map3.get("value"))
+ Integer.valueOf((String) map
.get("value"))));
flag = true;
break;
}
}
if (!flag) {
map2.put("name", map.get("name"));
map2.put("value", map.get("value"));
mapList2.add(map2);
}
}
}
// 将mapList中的key单独存放
for (Map<String, Object> map : mapList2) {
stringList2.add((String) map.get("name"));
}

JSONObject jsonObject = new JSONObject();
jsonObject.put("legend", JSON.toJSON(stringList2));
jsonObject.put("series", JSON.toJSON(mapList2));
jsonObject.put("forthName", JSON.toJSON(forthName));
// 设置响应信息，页面不缓存
res.setContentType("application/json");
res.setHeader("Pragma", "No-cache");
res.setHeader("Cache-Control", "no-cache");
out = res.getWriter();
out.print(jsonObject.toJSONString());
out.flush();
System.out.println(jsonObject.toJSONString());
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}


}



a中封装的信息

GannnkKi
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax动态赋值echarts的实例(饼图和柱形图)
12-29
本文以柱形图和饼形图ajax动态赋值为例 一、饼形图赋值步骤 （1）jsp页面 <!-- 引入echarts官方js --> [removed][removed] <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 --> [html] view plain copy </body> （2）js页面 //饼图模板 var dom = document.getElementById(first);
echarts饼图扇区添加点击事件的实例
08-29
下面小编就为大家带来一篇echarts饼图扇区添加点击事件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Echarts饼图动态赋值
最新发布
m0_66403070的博客
02-02 824
Echarts饼图动态赋值
django echarts饼图数据动态加载的实例
09-18
今天小编就为大家分享一篇django echarts饼图数据动态加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts饼图默认高亮/取消高亮
Mr.Tang的博客
04-17 4273
在 echarts 饼图中，可以通过 emphasis 属性设置数据项被高亮时的样式。而如果您想要设置默认高亮的一个数据项，可以在该数据项的配置对象中使用 selected: true 属性来实现。在上述代码中，selected: true 属性被设置在了数据项 {value: 335, name: ‘直接访问’} 中，表示该数据项会在图表初始化时被默认高亮。您可以根据实际情况，将该属性设置在您需要默认高亮的数据项中即可。同时，您也可以通过 selectedOffset 属性来控制高亮时的偏移量。
使用vue-echarts绘图更新option视图不更新问题
XIAO_A_fighting的博客
01-03 3001
在更新echarts视图的配置项时，在对echarts图本身的配置项进行修改的时候，删除新增的图表配置，视图并不会更新，查看原因之后可以发现是因为对于echarts来说，为了提升效率，会自动将图表的option与之前的option进行合并， 但是当图表，根据传进来的option变化的时候，比如折线图当传进来两列数据的时候绘制一条线，传进一列数据时就绘制一条线。
Echarts中Option属性设置
m0_48332054的博客
11-21 1561
Echarts中Option属性设置
Echarts中option属性设置
zhaojjjjjj163的博客
05-16 1607
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴重叠。直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴重叠。可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip。可以设置在全局，即 tooltip。可以设置在系列中，即。
vue-echarts：动态赋值series，更新options
ansheng02的博客
09-13 3833
这个是为了记录下解决的bug，问题场景： 初次请求数据：国家参数为 5 个，这个时候，筛选国家列表数据， 当筛选的数据少于 5 个时，比如筛选了2个国家，则多出来的3条线会重合最后一条数据的线上，在点击图例“不显示该条数据”的时候，还是会显示剩余的三条线； 当筛选的数据多于 5 个，这个时候，筛选国家，会出现最少两个数据 的 折线和图例对不上，出现互换的情况。 解析： 出现这样的问题原本的猜测是 颜色设置有问题，考虑的解决方案是： 1. 在动态赋值 serie...
echart中获得option中的数据，修改option中的数据，动态修改dataZoom
热门推荐
aliven1的博客
09-29 1万+
Echarts常用配置的使用
小菜鸟的博客
11-09 1606
Echarts的使用 引入echarts.js文件 准备一个呈现图标的盒子 初始化echarts实例对象 准备配置项 将配置项设置给echarts实例对象 <body> <div style="width:'';height:''"></div> </body> //首先准备echarts的实例对象,通过echarts中init的方法来创建实例对象 var mCharts = echarts.init(document.quertSelector('div
ECharts - 实用技巧集锦（持续更新）
般若
07-01 981
本文收集、整理ECharts图表库的常用使用技巧，可快速查阅并应用于实际项目开发中 ...
echarts 饼状图 扇形选中事件发多次请求 pieselectchangedhe
Ambitiouss的博客
04-17 1万+
jQuery我就不多说了， echarts也是非常受欢迎，最近有用到，对饼图的单圈操作还是很全面的。 来啊 看代码！ function PieTest () { this.downPlayFlag = true; // 用于饼图点击高亮标记 } PieTest.prototype.pie = function () { let _this = this; let oldAgePie...
echarts数据可视化学习
m0_53926478的博客
11-02 249
13-柱状图2定制 官网找到类似实例， 适当分析，并且引入到HTML页面中 根据需求定制图表 1： 修改图形大小 grid // 图标位置 grid: { top: "10%", left: "22%", bottom: "10%" }, 2： 不显示x轴 xAxis: { show: false }, 3： y轴相关定制 不显示y轴线和相关刻度 //不显示y轴线条 axisLine: { show: fa
echarts属性详解
weixin_30832143的博客
07-27 1049
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff63...
最简单的ECharts（Demo） 前端动态改变数据
weixin_45221142的博客
01-10 1279
很简单 直接上代码！！！！！！ 复制直接使用 最简单的Eacharts（dome） 想改变里边的样式，直接复制网址里边的option，再改变里边的option就可以了！ 官网: https://www.echartsjs.com/examples/zh/index.html. 例：lhttps://www.echartsjs.com/examples/zh/editor.html?c=line-...
vue echarts v-charts动态添加数据 动态设置options - aftersetoption
jmszl1991的博客
08-29 1万+
需求是：一开始只有三组数据，然后随着下拉框动态选择指标，最多选择两个。然后动态加载到图表中； 用的是基于echarts的v-charts；此时的需求就是要动态设置比如 legend，title或者是tooltips等等； 难道加一个ref 去操作dom吗？ 仔细查看 v-charts 文档发现一个方法： 既然每次生成图例都可以用这个方法，并且参数还是echarts实例，那么可以大胆的...
Vue中写Echarts图表时，option.series为什么不能动态赋值？
weixin_55726815的博客
07-13 518
的长度，所以赋值操作无法完成。要解决这个问题，可以在循环之前先向。数组中添加对应数量的空对象，以便后续可以给每个对象赋值。赋值时，循环中的索引。
echarts饼图动态赋值
05-17
要实现饼图的动态赋值，需要以下几个步骤： 1. 定义一个 echarts 实例并设置好基础配置。 2. 定义一个数据数组，用来存放饼图的数据。 3. 在定时器中定时更新数据数组，并调用 echarts 实例的 setOption 方法更新饼图。 以下是一个简单的示例代码： ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 设置基础配置 var option = { series: [{ type: 'pie', data: [] }] }; myChart.setOption(option); // 定义数据数组 var data = [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ]; // 在定时器中更新数据并更新饼图 setInterval(function () { // 更新数据数组 data.forEach(function (item) { item.value = Math.round(Math.random() * 1000); }); // 更新饼图 myChart.setOption({ series: [{ data: data }] }); }, 2000); ``` 在上面的代码中，我们首先初始化了一个 echarts 实例，并设置了基础配置。然后定义了一个数据数组，用来存放饼图的数据。在定时器中，我们每隔两秒钟就更新一次数据数组，并调用 echarts 实例的 setOption 方法来更新饼图。通过这样的方式，我们就可以实现饼图的动态赋值了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值