基础雷达图

最新推荐文章于 2024-08-25 09:57:22 发布

柒seven.

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量122

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_80464770/article/details/137218394

版权

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '销售',
            },
            legend: {
                data: ['王病', '刘欠','袁波'],
                type:'scroll',               
                width:'20%'
            },
            //鼠标移动到指定位置显示数据
            tooltip: {
                confine:true,
                enterable:true,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
        	radar:{        
        			indicator:[
        				{name:'销售',max:100},
        				{name:'沟通',max:100},
        				{name:'服务',max:100},
        				{name:'协助',max:100},
        				{name:'培训',max:100},
        			],
        		},
        	
            series: [
                {
               		name:'radarpanel',
               		type:'radar',
               		//鼠标移动到指定位置显该组数据高亮显示
               		itemStyle:{
               			normal:{lineStyle:{width:1},opacity:0.2},
               			emphasis:{lineStyle:{width:5},opacity:1}
               		},
               		data:[
            	   		{
            	   		name:'王病',
            	   		value:[87.5,87.5,90,91.25,85], 
            	   		label:{
            	   			show:true
            	   		}
               		},
               			{
            	   		name:'刘欠',
            	   		value:[90,88.75,85,87.5,88.75], 
            	   		label:{
            	   			show:true
            	   		}
               		},
               		{
            	   		name:'袁波',
            	   		value:[92.5,91.25,88.75,92.5,91.25],     
            	   		label:{
            	   			show:true
            	   		}
               		}
               
               ]
                }               
            
            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

其中有高亮设置在series里

itemStyle:{
            normal:{lineStyle:{width:1},opacity:0.2},
            emphasis:{lineStyle:{width:5},opacity:1}
        },

触发设置在option下

tooltip: {
confine:true,
enterable:true,
},