Echartrs雷达图实例

已于 2024-04-02 15:54:49 修改
阅读量137 收藏 1
点赞数 2
文章标签： 前端 html javascript
于 2024-04-01 10:58:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_77733754/article/details/137224902
版权 
<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>
 </head>
 <body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 1000px; height: 600px"></div>
	<script type="text/javascript">
		// 基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		// 指定图表的配置项和数据
		var option = { // 指定图表的配置项和数据
			color: ["red", 'blue', 'black'],
			backgroundColor: 'rgba(204,204,204,0.7)', // 配置背景色，默认无背景
			title: { // 配置标题组件
				text: '3个销售代表各方面能力情况',
				target: 'blank',
				top: '10',
				left: '160',
				textStyle: {
					color: 'green',
					fontSize: 18,
				}
			},
			legend: { // 配置图例组件
				show: true, // 设置是否显示图例
				icon: 'rect', // icon.'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
				top: '14', // 设置图例距离顶部边距
				left: 430, // 设置图例距离左侧边距
				itemWidth: 10, // 设置图例标记的图形宽度
				itemHeight: 10, // 设置图例标记的图形高度
				itemGap: 30, // 设置图例每项之间的间隔
				orient: 'horizontal', // 设置图例列表的布局朝向，'horizontal'|'vertical'
				textStyle: {
					fontSize: 15,
					color: '#fff'
				}, // 设置图例的公用文本样式
				data: [ // 设置图例的数据数组，数组项通常为字符串，每项代表一个系列name
					{
						name: '王斌',
						
						textStyle: {
							color: 'rgba(255,0,0,1)',
							fontWeight: 'bold'
						}
					}, // 设置图例项的文本样式
					{
						name: '刘倩',
						
						textStyle: {
							color: 'rgba(51,0,255,1)',
							fontWeight: 'bold'
						}
					}, //'normal'|'bold'|'bolder'|'lighter'
					{
						name: '袁波',
						
						textStyle: {
							color: 'rgba(0,0,0,1)',
							fontWeight: 'bold'
						}
					}
				],
			},
			tooltip: { // 配置详情提示框组件
				// 设置雷达图的tooltip不会超出div，也可设置position属性
				// 设置定位不会随着鼠标移动而变化
				confine: true, // 设置是否将tooltip框限制在图表的区域内
				enterable: true, // 设置鼠标是否可以移动到tooltip区域内
			},
			radar: [{ // 配置雷达图坐标系组件，只适用于雷达图
				center: ['50%', '56%'], // 设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
				radius: 250, // 设置圆的半径，数组的第一项是内半径，第二项是外半径
				startAngle: 90, // 设置坐标系起始角度，也就是第一个指示器轴的角度
				name: { // 设置（圆外的标签）雷达图每个指示器名称
					formatter: '{value}',
					textStyle: {
						fontSize: 15,
						color: '#000'
					}
				},
				nameGap: 2, // 设置指示器名称和指示器轴的距离，默认为15
				splitNumber: 2, // 设置指示器轴的分割段数，default
				// shape:'circle',  // 设置雷达图绘制类型，支持'polygon','circle'
				// 设置坐标轴轴线设置
				axisLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
						type: 'solid',
					}
				},
				// 设置坐标轴在grid区域中的分隔线
				splitLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
					}
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: ['#abc', '#abc', '#abc', '#abc']
					}
				}, // 设置分隔区域的样式
				indicator: [ // 配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
					{
						name: '销售',
						max: 100
					}, {
						name: '沟通',
						max: 100
					},
					{
						name: '服务',
						max: 100
					}, {
						name: '协作',
						max: 100
					},
					// 设置指示器的名称，最大值，标签的颜色
					{
						name: '培训',
						max: 100
					}
				]
			}],
			series: [{
				name: '雷达图', // 系列名称，用于tooltip的显示，图例筛选
				type: 'radar', // 系列类型: 雷达图
				// 拐点样式，'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
				symbol: 'triangle',
				itemStyle: { // 设置折线拐点标志的样式
					normal: {
						lineStyle: {
							width: 1
						},
						opacity: 0.2
					}, // 设置普通状态时的样式
					emphasis: {
						lineStyle: {
							width: 5
						},
						opacity: 1
					} // 设置高亮时的样式
				},
				data: [ // 设置雷达图的数据是多变量(维度)
					{ // 设置第1个数据项
						name: '王斌', //数据项名称
						value: [87.50, 87.50, 90.00, 91.25, 85.00], //value是具体数据
						symbol: 'triangle',
						symbolSize: 5, // 设置单个数据标记的大小
						// 设置拐点标志样式
						itemStyle: {
							normal: {
								borderColor: 'blue',
								borderWidth: 3
							}
						},
						// 设置单项线条样式
						lineStyle: {
							normal: {
								color: 'red',
								width: 1,
								opacity: 0.9
							}
						},
						//areaStyle: {normal:{color:'red'}}  // 设置单项区域填充样式
					},
					{ // 设置第2个数据项
						name: '刘倩',
						value: [90.00, 88.75, 85.00, 87.50, 88.75],
						symbol: 'circle',
						symbolSize: 5, // 设置单个数据标记的大小
						itemStyle: {
							normal: {
								borderColor: 'rgba(51,0,255,1)',
								borderWidth: 3,
							}
						},
						lineStyle: {
							normal: {
								color: 'blue',
								width: 1,
								opacity: 0.9
							}
						},
						//areaStyle:{normal:{color:'blue'}}  // 设置单项区域填充样式
					},
					{ // 设置第3个数据项
						name: '袁波',
						value: [92.50, 91.25, 88.75, 92.50, 91.25],
						symbol: 'arrow',
						symbolSize: 5, // 设置单个数据标记的大小
						itemStyle: {
							normal: {
								borderColor: 'rgba(0,0,0,1)',
								borderWidth: 3,
							}
						},
						lineStyle: {
							normal: {
								color: 'black',
								width: 1,
								opacity: 0.9
							}
						},
 
					}
				]
			}, ]
		};
		// 使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>
</body>
 
</html>

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>
 </head>
 <body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 650px; height: 500px"></div>
	<script type="text/javascript">
		// 基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		// 指定图表的配置项和数据
        var option = {
            backgroundColor:'rgba(204,204,204,0.7)',
            title: {
                text: '浏览器占比情况',
                subtext: '(数据纯属虚构)',
                top: 20,
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                type: 'scroll',
                bottom: 10,
                data: (function () {
                var list = [];
                for (var i = 1; i <= 28; i++) {
                    list.push(i + 2000 + '');
                }
                return list;
                })()
            },
            visualMap: {
                top: 'middle',
                right: 20,
                color: ['red', 'yellow'],
                calculable: true
            },
            radar: {
                nameGap:2,
                indicator: [
                { text: 'IE8-', max: 400,color:'green'},
                { text: 'IE9+', max: 400,color:'green' },
                { text: 'Safari', max: 400,color:'blue' },
                { text: 'Firefox', max: 400,color:'blue' },
                { text: 'Chrome', max: 400,color:'red' }
                ]
            },
            series: (function () {
                var series = [];
                for (var i = 1; i <= 28; i++) {
                series.push({
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                    width: 1
                    },
                    emphasis: {
                    areaStyle: {
                        color: 'rgba(0,250,0,0.3)'
                    }
                    },
                    data: [
                    {
                        value: [
                        (40 - i) * 10,
                        (38 - i) * 4 + 60,
                        i * 5 + 10,
                        i * 9,
                        (i * i) / 2
                        ],
                        name: i + 2000 + ''
                    }
                    ]
                });
        }
        return series;
    })()
};

        myChart.setOption(option);
	</script>
</body>
 
</html>

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>
 </head>
 <body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 650px; height: 500px"></div>
	<script type="text/javascript">
		// 基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		// 指定图表的配置项和数据
		var option = {
            backgroundColor: 'rgba(204,204,204,0.7)', 
            title: {
                text: '多雷达图(蜘蛛网)',
                top:15,
                textStyle:{color:'green'},
                left:250
 
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                left: 'center',
                top:'bottom',
                data: [
                '王斌',
                '刘倩',
                '袁波',
                '降水量',
                '蒸发量'
                ]
            },
            radar: [
                {
                indicator: [
					{name: '销售',max: 100}, {name: '沟通',max: 100},
					{name: '服务',max: 100}, {name: '协作',max: 100},
					{name: '培训',max: 100}
				],
                center: ['35%', '40%'],
                radius: 100
                },
                {
                indicator: (function () {
                var res = [];
                for (var i = 1; i <= 12; i++) {
                res.push({ text: i + '月', max: 100 });
                }
                return res;
                })(),
                center: ['75%', '40%'],
                radius: 80
                }
            ],
            series:[
                {
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                itemStyle: { // 设置折线拐点标志的样式
				normal: {lineStyle: {width: 1},opacity: 0.3}, // 设置普通状态时的样式
                emphasis:{lineStyle:{width:5},opacity:1}
                },
                data: [
                    {
                    value: [87.50, 87.50, 90.00, 91.25, 85.00],
                    name: '王斌',
                    symbol: 'triangle',
                    },
                    {
                    name: '刘倩',
                    symbol: 'circle',
					value: [90.00, 88.75, 85.00, 87.50, 88.75],
                    },
                    {
                    name: '袁波',
                    value: [92.50, 91.25, 88.75, 92.50, 91.25],
                    symbol: 'arrow',
                    }
                ]
                },
                {
      type: 'radar',
      radarIndex: 1,
      areaStyle: {},
      data: [
        {
          name: '降水量',
          value: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: '蒸发量',
          value: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
          ]
        }
      ]
    }
            ]
        };
            myChart.setOption(option);
	</script>
</body>
 
</html>

 

zzzzzyyyyttt
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni使用echarts自定义图标（圆形雷达图）
qq_42551474的博客
03-02 2415
echarts.vue组件 <template> <view> <view class="echarts" :id="option.id" :prop="option" :change:prop="echarts.update" @click="echarts.onClick"></view> </view> </template> <script> export default { name: 'Echar
echarts雷达图
caoxinjian423的博客
11-15 280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雷达</title> <style> #test{ margin: 20px; width: 700px; height: 600px; } <.
echarts雷达图圆形 组件封装 配置参数详解
c_qianxia5040的博客
04-08 827
圆形雷达图，配置参数代码中有备注。
echarts 雷达图 圆上显示 标识值
qq_42417923的博客
05-19 2279
var titleList=["说明讨论的目的","明确表达绩效挑战","维持动力","促进参与","提供支持","制定行动计划 ","达成共识"]; var list1=[13,24,18,21,21,21,19] ; var list2=[13,21,21,21,24,18,18]; var options={ title: {text:null,}, tooltip: {}, legend: {show:'false',}, radar: [{ ...
echarts 雷达图
give it a try
05-28 170
下定决心，好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: '基础雷达图' }, legend: { data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'] },
PYTHON绘制雷达图代码实例
09-18
主要介绍了PYTHON绘制雷达图代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
WPF 自定义雷达图开发实例教程
09-01
主要介绍了WPF 自定义雷达图开发实例教程，本文介绍的非常详细，具有参考借鉴价值,需要的朋友可以参考下
C# 使用GDI绘制雷达图的实例
12-25
最近项目要用C#实现画一个雷达图，搜了搜网上竟然找不到C#画雷达图的解决方案，那么自己实现一个吧 实现效果如下图： 代码如下： public static class RadarDemo { static float mW = 1200; static float mH = ...
Apache Echarts常用图表之雷达图
diviner_s的博客
04-23 1885
雷达图 雷达图的实验步骤 Echarts最基础代码： <!DOCTYPE html> <html lang = "en"> <head> <script src="js/echarts.min.js"></script> </head> <body> <div style="width:600px;height:400px"> </div> <script> var mCha
EchartsDemo(线型图、柱状图、雷达图等)
07-03
demo中有柱状图、线型图、圆饼图、雷达图等的实例代码，使用简单的servlet实现，直观、方便部署，便于学习Echarts
echarts雷达图，维度能力图
游九尘的博客
06-04 160
【代码】echarts雷达图。
echarts 雷达圆形图
最新发布
qq_42250468的博客
12-29 442
【代码】echarts 雷达圆形图。
echarts radar雷达图常规使用
m0_54281425的博客
11-21 3262
<div id="idRadar"></div> data() { return { // 雷达图 optionRadar: { color: '#1890FF', fontSize: 16, grid: { //绘图网格 left: '0', right: '0', top: '0', bottom:.
echarts雷达图 echart雷达图 雷达图
qq_34200636的博客
02-16 1万+
echarts雷达图 echart雷达图 雷达图
echarts----雷达图
grow_的博客
03-15 6849
区域填充的背景颜色设置为： rgba(238, 197, 102, 0.6)---数据围成的图形填充。区域填充的线条颜色为白色----数据围成的线条颜色填充。需求7： 标记的图形(拐点）设置 注意 series 里面设置。需求4： 雷达图 坐标轴轴线相关设置(竖线) axisLine。* 寻找官方的类似示例，给予分析，并引入到HTML页面中。* 在小圆点上显示相关数据，颜色设置为白色，10像素。* 用圆点显示， 拐点的大小设置为 5。第二步：按照需求来定制它。* 按照需求来定制它。* 小圆点设置为白色。
关于echarts的雷达图比较详细的参数说明
热门推荐
csdn_zsdf的博客
08-02 11万+
要实现的效果图如下： (https://img-blog.csdn.net/20180802194613401?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenNkZg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) 接下来主要关于下面的几个参数进行设置 1....
关于echarts的雷达图详细的参数说明
小白的博客
05-19 5158
要实现的效果图如下： 接下来主要关于下面的几个参数进行设置 雷达图的圈数 雷达图每圈上面的数字 雷达图区域拐点的数值 雷达图拐点的样式 雷达图每个区域的颜色设置 雷达图tooltip限制在图表区域内 鼠标可以移动到tooltip里，一般需要在tooltip中加入可操作元素时有用 雷达图背景颜色透明 export const industryFactorOption = { title: { text: '雷达图', textStyle: {
echarts的雷达图（radar）鼠标移动到图标上面，如何给数据加单位
灿灿大王搭建的黄金屋
01-16 5580
我们只需要在雷达图的data中，找到emphasis，这个是控制鼠标悬浮时高亮显示展示的雷达图中的具体数据的样式 在label项中，我们配置formatter为: formatter:'{c}(单位)' 这样就可以展示出数据的单位了，比如我想要我的数据单位是“%”，那么我的formatter需要这样写formatter:'{c}%' 完整的代码： series: [ ...
plotly动态雷达图实例源代码
05-24
以下是一个使用 Plotly 绘制动态雷达图的示例代码： ```python import plotly.graph_objs as go import numpy as np # 创建数据 theta = np.linspace(0, 2*np.pi, 6) r = np.random.randint(1, 10, size=(10, 6)) ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值