ECharts多雷达图

23_123456

已于 2024-04-08 09:14:47 修改

阅读量165

点赞数 1

文章标签： spark

于 2024-04-02 15:55:00 首次发布

本文链接：https://blog.csdn.net/2202_75544053/article/details/137273267

版权

<!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>