Echarts中雷达图的使用&legend过多需要出现滚动条的办法

ECharts Legend滚动效果
最新推荐文章于 2025-06-10 13:59:48 发布
原创最新推荐文章于 2025-06-10 13:59:48 发布 · 8.8k 阅读
5 ·
CC 4.0 BY-SA版权
文章标签：
#Echarts
Echarts 同时被 2 个专栏收录
4 篇文章
订阅专栏
前端
4 篇文章
订阅专栏
本文介绍如何在ECharts中实现legend滚动效果，通过设置legend的type属性为'scroll'即可实现。同时提供了完整的HTML示例代码，展示了如何加载ECharts及其扩展库，并设置了雷达图的相关配置。
效果图：
雷达图
legend过多需要出现滚动条的办法：
legend中的属性这样设置即可：type:’scroll
注意引用的js版本，最好是比较新的版本
html代码如下：
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts雷达图</title>
    <!--<link rel="shortcut icon" href="favicon.png">-->
    <style>
        .main {
            height: 600px;
            width:300px,
            overflow: hidden;
            padding : 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="main" class="main"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
        var myChart;
        var domMain = document.getElementById('main');

        option = {
                    backgroundColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.4,
                                r: 0.3,
//                              colorStops: [{
//                                      offset: 0,
//                                      color: '#895355' // 0% 处的颜色
//                              }, {
//                                      offset: .2,
//                                      color: '#593640' // 100% 处的颜色
//                              }, {
//                                      offset: 1,
//                                      color: '#39273d' // 100% 处的颜色
//                              }],
                                globalCoord: false // 缺省为 false
                        },
                    tooltip: {
                            trigger: 'item',
                    },
                    legend: {
                            type:'scroll',//就这一个属性 设置legend滚动轴的出现
                            show: true,
                            bottom: 5,
                            left: 16,
                            itemWidth: 14,
                            itemHeight: 10,
                            itemGap: 48,
                            width: 680,
                            height: 80,
                            align: 'auto',
                            data: ['紫阳之星','花堤街社区','二机宿舍','读书院','城市花园','金榜名苑','商家巷社区','武汉生物研究所宿舍','阅马场实验小学宿舍','人民医院宿舍'],
                            textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                            },
                            selectedMode: true,
                            orient: 'horizontal',
                            selected: {  
                                                    '紫阳之星' : false,  
                                                    '花提街社区' : false,  
                                                    //不想显示的都设置成false  
                                                } 
                    },
                    textStyle: {
                            color: '#4ac7f5',
                            fontSize: 16,
                    },
                    visualMap: {
                            min: 0,
                            max: 100,
                            calculable: true,
                            itemWidth: 14,
                            itemHeight: 165,
                            align: 'left',
                            color: ['#3f4199','#5d54b5','#a0589e','#e76281','#fe846d','#feda5b'],
                            right: 0,
                            bottom: 0,
                            textStyle: {
                                    // color: '#4ac7f5',
                                    fontSize: 14,
                            }
                    },
                    radar: {
                         center: ['400', '300'],//中心（圆心）坐标
                         radius: 215,//半径
                         startAngle: 90,//坐标系起始角度，也就是第一个指示器轴的角度。
                         nameGap: 16,//指示器名称和指示器轴的距离。
                         splitNumber: 4,//指示器轴的分割段数
                         shape: 'polygon',//雷达图绘制类型，支持 'polygon' 和 'circle'
                         axisLine: { //坐标轴轴线
                                 show: true,
                                 lineStyle: {
                                         // color: '#564d8e',
                                         width: 1,
                                 },
                         },
                         splitLine: {//坐标轴在 grid 区域中的分隔线。
                                 show: true,
                                 lineStyle: {
                                         // color: '#4b476f',
                                         width: 1,
                                 },
                         },
                         splitArea: {//坐标轴在 grid 区域中的分隔区域，默认不显示。
                                 show: true,
                                 areaStyle: {
                                         // color: '#2c2949'
                                 },
                         },
                         indicator : [
                                 { text: '超速', max: 100},
                                 { text: '变道 ', max: 100},
                                 { text: '起步不关门', max: 100},
                                 { text: '未停稳开门', max: 100},
                                 { text: '急加速', max: 100},
                                 { text: '急减速', max: 100}
                            ]
                    },
                    series : {
                                            name:'违规占比雷达图',
                                            type: 'radar',
                                            symbol: 'none',
                                            areaStyle: {//区域填充样式
                                                    emphasis: {
                                                            opacity: 0.3,
                                                    },
                                            },
                                            lineStyle: {
                                                    normal: {
                                                            width: 0.8,
                                                    },
                                            },
                                            data: [
                                                    {name: '紫阳之星',value: [100,80,30,30,40,80]},
                                                    {name: '花堤街社区',value: [95,75,35,35,45,75]},
                                                    {name: '二机宿舍',value: [90,72,40,40,50,70]},
                                                    {name: '读书院',value: [85,70,45,45,55,65]},
                                                    {name: '城市花园',value: [80,68,50,50,60,60]},
                                                    {name: '金榜名苑',value: [75,65,55,55,65,55]},
                                                    {name: '商家巷社区',value: [70,62,60,60,70,50]},
                                                    {name: '武汉生物研究所宿舍',value: [65,60,65,65,75,45]},
                                                    {name: '阅马场实验小学宿舍',value: [60,58,70,70,80,40]},
                                                    {name: '人民医院宿舍',value: [55,55,75,75,85,35]}
                                            ]
                    }
            };


        myChart = echarts.init(domMain);
        myChart.setOption(option, true)
    </script>
</body>
</html>