雷达图的实现echarts

最新推荐文章于 2025-11-18 22:59:00 发布

原创

最新推荐文章于 2025-11-18 22:59:00 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文详细介绍了如何使用ECharts库在Web上创建基本雷达图、带有视觉映射的复杂雷达图以及在同一页面中展示多个雷达图，包括设置样式、配置选项和实现效果。

一、基本雷达图

基本需求及添加实现：

radar 雷达图坐标组件，只适用于雷达图

type:'scroll', width:'20%',pageButtonItemGap:4, 实现图例滚动

itemStyle:{

normal:{lineStyle:{width:1},opacity:0.2}, 普通状态时样式

emphasis:{lineStyle:{width:5},opacity:1} 高亮时的样式

<!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"));
        //指定图表的配置项和数据
        option = {
        title: {
            text: '销售经理能力考核'
        },
        tooltip:{
            
        },
        legend: {
            type:'scroll',
            width:'20%',
            pageButtonItemGap:4,
            show:true,
            icon:'rect',
            top:'14',
            left:'430',
            itemWidth:20,
            itemHeigth:10,
            itemGap:30,
            orient:'horizontal',
            data: ['王斌', '刘倩', '袁波']
        },
        radar: {
            center:['50%','56%'],
            radius:160,
            startAngle:90,
            name:{
                formatter:'{value}',
                textStyle:{fontSize:15,color:'green'}
            },
            indicator: [
            { name: '销售', max: 100.00 },
            { name: '沟通', max: 100.00 },