正文

echarts雷达图点击事件

索宁风尚  索宁风尚  2022-08-26  694

关键词：

最近看见别人问的问题，点击雷达图的拐点，获取点击数据的问题，直接上代码。

echarts 2x 的点击事件

echarts配置问题：https://www.douban.com/note/509404582/

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script>
	
	//配置图表路径
	require.config({
		paths:{ 
			echarts:'http://echarts.baidu.com/build/dist'
		}
	});
	//加载图表js文件
	require(
	   [
		   'echarts',
		   'echarts/chart/radar',  //要什么图表类型配置什么类型
	   ],
	function (ec){
		//基于准备好的dom，初始化echarts图表
		var myChart= ec.init(document.getElementById('main'));
		var option = {
				polar: [{
					indicator: [
						{ text: '销售', max: 6500},
						{ text: '管理', max: 16000},
						{ text: '信息技术', max: 30000},
						{ text: '客服', max: 38000},
						{ text: '研发', max: 52000},
						{ text: '市场', max: 25000}
					]
				}], 
				series: [{
					name: "",
					type: "radar",
					data: [{
						value: [4300, 10000, 28000, 35000, 50000, 19000],
						name: "预算分配"
					}],
					itemStyle: {
						normal: {
							color: "#1DBB37"
						}
					}
					},{
					name: "",
					type: "radar",
					data: [{
						value: [5000, 14000, 28000, 31000, 42000, 21000],
						name: "实际开销"
					}],
					itemStyle: {
						normal: {
							color: "rgb(51, 153, 254)"
						}
					}
					}
				], 
		};	 

		var ecConfig = require('echarts/config');
		myChart.on(ecConfig.EVENT.CLICK,function(param){
			//点击后执行操作
			alert(param.name)
		});
		myChart.setOption(option);
	}); 
</script>

echarts 3.x && 4.x 的点击事件

测试版本 3.85和4.02版本

var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    
    var option = {
            polar: [{
                indicator: [
                    { text: '销售', max: 6500},
                    { text: '管理', max: 16000},
                    { text: '信息技术', max: 30000},
                    { text: '客服', max: 38000},
                    { text: '研发', max: 52000},
                    { text: '市场', max: 25000}
                ]
            }], 
            series: [{
                name: "",
                type: "radar",
                data: [{
                    value: [4300, 10000, 28000, 35000, 50000, 19000],
                    name: "预算分配"
                }],
                itemStyle: {
                    normal: {
                        color: "#1DBB37"
                    }
                }
                },{
                name: "",
                type: "radar",
                data: [{
                    value: [5000, 14000, 28000, 31000, 42000, 21000],
                    name: "实际开销"
                }],
                itemStyle: {
                    normal: {
                        color: "rgb(51, 153, 254)"
                    }
                }
                }
            ], 
    };     
    
    //单击后执行操作
    myChart.on('click',(param) => {
        console.log(param)
    });
    // 双击事件
    myChart.on('dblclick', (param) => {
        console.log(param)
    })
    
    myChart.setOption(option);

单击事件参数返回

双击事件参数返回

echarts鼠标事件说明（4.02版本）

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

还有一个就是给雷达图的文字绑定点击事件，上代码。api地址：http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

注意triggerEvent属性的设置。

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="echarts.min.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script>
	//绑定元素
	var myChart = echarts.init(document.getElementById('main'));
	
	option = {
		title: {
			text: '基础雷达图'
		},
		radar: {
			indicator: [
			   { name: '销售', max: 6500},
			   { name: '管理', max: 16000},
			   { name: '信息技术', max: 30000},
			   { name: '客服', max: 38000},
			   { name: '研发', max: 52000},
			   { name: '市场', max: 25000}
			],
			name:{
				formatter:function(v){
					console.log(v);
					return v;
				}
			},
			triggerEvent:true
		},
		series: [{
			name: '预算vs开销',
			type: 'radar',
			data : [
				{
					value : [4300, 10000, 28000, 35000, 50000, 19000],
					name : '预算分配'
				},
				 {
					value : [5000, 14000, 28000, 31000, 42000, 21000],
					name : '实际开销'
				}
			]
		}]
	};
	//绘制图表
	myChart.setOption(option);
	//添加点击事件
	myChart.on('click', function (params) {
		console.log(params)
		alert(params.name)
		if(params.name=="研发"){ //判断点击文字
			alert("aaa")
		}
	 })
</script>

　params的返回值

个人觉得echarts的文档和功能还不太丰富，highcherts也是一个不错的选择。

highcharts雷达图（highcharts叫蜘蛛图），案例链接：https://www.hcharts.cn/demo/highcharts/polar-spider

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="main" style="height:400px;"></div>
</body>
</html>
<script src="jquery.js"></script>
<script src="highcharts.min.js"></script>
<script src="highcharts-more.js"></script>
<script>
     $(function () {
        Highcharts.chart('main', {
            chart: {
                polar: true   //图表类型
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            plotOptions: {   //数据配置项
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                alert(this.category);
                            }
                        }
                    }
                }
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]
        });
    });
</script>

highcharts有一个问题，文件体积比较大，如果图表使用的地方比较少，功能要求不高时，建议不使用，性能差点。

github查看更多好文：[https://github.com/xccjk/x-blog](https://github.com/xccjk/x-blog)

echarts图表——雷达图

参考技术A雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形，极... 查看详情

echarts雷达图radar样式美化

参考技术A基于官网的基础，修改其配置，美化样式查看详情

32-vue之echarts-雷达图(代码片段)

ECharts-雷达图前言雷达图特点雷达图的基本实现雷达图的常见效果显示数值区域面积绘制类型完整代码前言本篇来学习写雷达图雷达图特点可以用来分析多个维度的数据与标准数据的对比情况雷达图的基本实现ECharts最基本的代码... 查看详情

如何修改echarts的雷达图背景

参考技术AEcharts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。步骤：后台取到数据，转化为json；前台获取到json，改写Echarts调用的js；查看详情

echarts雷达图的个性化设置(代码片段)

echarts雷达图的个性化设置functiontest()letmyChart=echarts.init(document.getElementById(‘levelImage‘));myChart.setOption(title:text:null,//隐藏图表标题legend:enabled:false,//隐藏图例tooltip:trigger:‘axis‘,calcula 查看详情

echarts柱状图阴影区域点击事件

参考技术A我们在做echarts图表的时候经常会出现需要点击图表打开弹窗或者打开新的页面，而如果图表是柱状图的话，可能会出现最大值和最小值差距过大的情况，比如普通的值大小都在1000上下，然后有几个值的大小只有个位数... 查看详情

关于echarts生成雷达图的一些参数介绍

exportconstindustryFactorOption=title:text:‘雷达图‘,textStyle:color:‘rgba(221,221,221,1)‘,//标题颜色fontSize:14,lineHeight:20,,//标题的位置，此时放在图的底边left:‘center‘,top:‘bottom‘,,//图表的位置grid:position:‘center‘, 查看详情

echarts雷达图大小自适应

结合了媒体查询首先在css样式表中写出你希望雷达图在不同分辨率下的大小@mediascreenand(max-height:780px){.left-score-image{width:190px;height:135px;margin-left:36px;margin-top:10px;}}其次，在js文件中加入varscoreImage=document.getElementById(‘sco 查看详情

echarts雷达图怎么在类目值下面显示数值

参考技术A这样查看详情

雷达图（用echarts绘制）(代码片段)

...图可以从多个维度来对比不同数据之间的情况基本实现①ECharts最基本的代码结构：引入js文件、DOM容器、初始化对象、配置option②定义各个维度的最大值，并在option的radar选项中配置③在series中配置具体的数据④在series中... 查看详情

echarts雷达图怎么在类目值下面显示数值

关于echarts，地图区域，怎么去掉点击事件

参考技术AECharts开源来自百度商业前端数据可视化团队，基于html5Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验... 查看详情

echarts雷达图怎么给生成的数据拐点上增加文字描述

没有文字的是我已经做出来的效果，应该怎么在这个点上添加文字呢？有大佬告知一下吗？参考技术Aseries[i]-radar.label.show=true 查看详情

echart雷达图怎么改变数组里的值

series:[ // name:'预算vs开销（Budgetvsspending）', type:'radar', areaStyle: normal: , data:[ value:[6500,16000,30000,30000,30000,25000], name:'刘能（AllocatedBudget）' , // // value:[5000,14000,28000,31000,42000,21000], // ... 查看详情

echarts柱状图柱子有没有点击事件

...bsp; 'echarts': '/public/echarts-2.2.7/doc/example/www/js' ); // 使用 require( ... 查看详情

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行(代码片段)

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示:后来查资料,发现这... 查看详情

echarts折线图图表怎么显示平均值

参考技术A支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡... 查看详情

echarts.js根据数值自定义radar雷达图拐点颜色

参考技术A公司需求的时候，做了一种线形图，根据数值的大小，变换颜色。示例图如下：产品经理问我，可以不可以做出这样的。设计图如下：因为才使用这个插件一天，也不是很熟悉，感觉原理应该差不多。就答应了下来。(... 查看详情