Echarts图表（柱状图、折线图、饼图等等）点击事件

Bertha 。 2022-12-23 07:08 284阅读 0赞

<script>
    		require(
    				[ 'echarts' ],
    				function(echarts) { 
    					var chart = echarts.init(document.getElementById('main1'),
    							null, { });
    
    					window.onresize = function() { 
    						chart.resize();
    					};
    
    					$.ajax({ 
    						data : { },
    						url : "${pageContext.request.contextPath}/user-data",
    						type : "POST",
    						dataType : "JSON",
    						success : function(httpdata) { 
    							var item = httpdata[0];
    							var myArray = new Array();
    							var myArray1 = new Array();
    							var myArray2 = new Array();
    
    							if (item != null) { 
    								for (var i = 0; i < item.length; i++) { 
    
    									myArray[i] = item[i].name;
    									myArray1[i] = item[i].count;
    									myArray2[i] = item[i].CERT_ID_F;
    									console.log(myArray + " " + myArray1);
    								}
    							} else { 
    								alert("error");
    							}
    							chart.setOption({ 
    								title : { textStyle:{ 
    									fontSize:28
    								},
    									text : '与我有相似图书借阅记录的用户'
    								},
    								color : [ '#3398DB' ],
    								tooltip : { 
    									trigger : 'axis',
    									axisPointer : {  // 坐标轴指示器，坐标轴触发有效
    										type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    									}
    								},
    								grid : { 
    									left : '3%',
    									right : '5%',
    									bottom : '3%',
    									top:70,
    									containLabel : true
    								},
    								xAxis : [ { 
    									name:'学号',
    									type : 'category',
    									data : myArray2,
    									axisTick : { 
    										alignWithLabel : true
    									},
    									nameTextStyle: {  //图例文字的样式
    			                            fontSize: 18
    			                        }
    								} ],
    								yAxis : [ { 
    									name:'相似值',
    									type : 'value',
    									nameTextStyle: {  //图例文字的样式
    			                            fontSize: 18
    			                        }
    								} ],
    								series : [ { 
    									name : '相似值',
    									type : 'bar',
    									barWidth : '60%',
    									data : myArray1
    								} ]
    							});
    
    						}
    					});
    					chart.on('click', function (param) { 
                              var name = param.name;
                              window.location.href = "${pageContext.request.contextPath}/reader-zx?cert_id="+ name;
    });
    				});
    	</script>

主要是在Echarts图表后面加如下内容

chart.on('click', function (param) { 
      var name = param.name;
      window.location.href = "${pageContext.request.contextPath}/reader-zx?cert_id="+ name;
    });

**ReactEcharts:**

<ReactEcharts className="materialPie"
                    option={ materialNameOption}
                    onEvents={ materialEvent}
                  />

事件：

const materialEvent = { 
        'click': (value: any) => { 
          setMaterialType(value.data?.name);
          setTankType(undefined)
          actionRef.current?.reloadAndRest();
          setTankTitle(value.data.name)
        }
      }

Option：

const materialNameOption = { 
        title: { 
          text: '各物料占比统计',
          left: 'center'
        },
        tooltip: { 
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: { 
          orient: 'vertical',
          left: 'left',
          data: tankAreaDetailVo?.materials?.map((item: any) => { 
            return item.name
          })
        },
        series: [
          { 
            name: '物料类型',
            type: 'pie',
            radius: '80%',
            center: ['50%', '55%'],
            data: tankAreaDetailVo?.materials,
            emphasis: { 
              itemStyle: { 
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jfreechart生成柱状图、折线图、和饼状图

JFreeChart是JAVA平台上的一个开放的图表绘制类库。它完全使用JAVA语言编写，是为applications, applets, servlets 以及JSP等使用所

迈不过友情╰/ 2024年02月17日 15:22/ 0 赞/ 25 阅读

相关 POI Word 图表、柱状图、条形图、折线图、饼图

poi Excel 图表：[https://blog.csdn.net/u014644574/article/details/105695787][https_blog.cs

Love The Way You Lie/ 2023年10月07日 13:28/ 0 赞/ 3 阅读

相关 echarts仪表盘，柱状图，折线图，趋势图

系列文章目录文章目录系列文章目录前言一、仪表盘二、柱状图三、折线图四、趋势图 -----------------

小鱼儿/ 2023年09月26日 19:58/ 0 赞/ 153 阅读

相关 Echarts图表（柱状图、折线图、饼图等等）点击事件

<script> require( [ 'echarts' ], function(echarts) {

Bertha 。/ 2022年12月23日 07:08/ 0 赞/ 285 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 642 阅读

相关 Echarts 柱状图及折线图

效果 ![柱状及折线图表][20210228203149221.png] 功能 1. 防止悬浮框溢出 2. 图例图标宽高度修改 3. 柱状图之间间距设置 4

Dear 丶/ 2022年11月03日 15:24/ 0 赞/ 229 阅读

相关 ECharts图表------饼状图

效果图: ![SouthEast][] <!DOCTYPE html> <html> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月01日 01:14/ 0 赞/ 354 阅读

相关 python画图折线图饼图柱状图

折线图 import numpy as np from matplotlib import pyplot as plt plt.rcParams['f

桃扇骨/ 2022年05月20日 20:47/ 0 赞/ 311 阅读

相关 echarts 柱状图点击事件

<body> <div style="margin: 0;padding: 5px;"> <div id="main" style="width:

野性酷女/ 2022年04月25日 08:10/ 0 赞/ 343 阅读

相关 Echarts使用笔记--饼图，柱状图

开始做前端了，感觉自己是要变成全栈工程师了。。。今天使用了echart，用之前觉得好高大上好厉害，肯定很复杂。用了以后才发现，使用起来超简单，当然，精通很难，里面的各种配

痛定思痛。/ 2022年01月26日 09:35/ 0 赞/ 403 阅读