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

最新推荐文章于 2024-07-04 11:13:34 发布
最新推荐文章于 2024-07-04 11:13:34 发布
阅读量8.5k 收藏 5
点赞数 1
分类专栏： Echarts 前端 文章标签： Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36301420/article/details/80474738
版权

效果图：
雷达图

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>
程颖不是陈颍是沉吟
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts地图散点悬浮显示多条数据
10-29
echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
Echarts图例数据太多实现滚动效果
蜜子的蜜的博客
07-08 1109
legend: { type: 'scroll', // 设置图例翻页 icon: 'rect', itemWidth: 12, // 图例图形宽度 itemHeight: 10, orient: 'horizontal', // 图例横向排布 data: title, // title
echarts滚动图例样式设置
MISS_CJL的博客
01-06 6491
echarts滚动图例样式设置
echarts legend 添加滚动条
最新发布
Griner_的博客
07-04 174
【代码】echarts legend 添加滚动条。
ECharts设置滚动图例legend
Zeroliuyun的博客
12-28 2015
当我们的数据类别较多时，用普通的legend会占比较多的空间，所以想设置滚动的legend。
ECharts设置滚动legend
m0_46627730的博客
11-17 1万+
前言 当我们的数据类别较多时，用普通的legend会占比较多的空间，所以想设置滚动的legend 普通legend效果图 设置滚动legend效果图 设置滚动legend方法 1：首先需要按需引入legendScroll 2：在setOption中的legend设置type为scroll ...
echart 饼图图例legend支持滑动
hantanxin的专栏
04-27 1168
legend: { orient: 'vertical', right: '10%', //图例距离左的距离 y: 'center', //图例上下居中 data: this.chartData.barTitles, textStyle: { color: '#fff' }, type:'scroll', }, type:'scroll',滚动 orient: 'vertical',方向（垂直） ...
解决legend数据过多，使用滚动，但进行后图形样式发生变化
一只想躺平却不敢躺平的小菜鸟
08-30 501
两个分类进行了位置的交换，没有其他的变化，数据也没有增加，但是，样式就是不知道为啥发生了变化。：滚动legend,图形保持一致。滚动前后，饼状图中的内容除了“
AngularJS 自定义指令 - ECharts 2 雷达图
09-24
要在AngularJS中封装ECharts雷达图，首先需要引入ECharts库，然后创建一个指令。指令的链接函数`link`中可以初始化ECharts实例，并配置雷达图的属性，如`series`、`legend`、`tooltip`等。同时，可以通过`scope`...
ECharts雷达图案例002-诈骗性质分析.rar
06-19
预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139797312 预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139797312 预览地址：... ... ...
ECharts雷达图案例001-自定义节点样式.rar
06-19
预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139798012 预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139798012 预览地址：... ... ...
C# 使用GDI绘制雷达图的实例
08-25
4. `DrawRegion`方法用于填充雷达图内部的区域，通过计算每个顶点的坐标，构造一个`Path`对象，然后使用`Graphics.FillPath`方法进行填充，这里使用了半透明的颜色，使得填充效果更加柔和。 5. 最后，`DrawCircle`...
echarts折线图/柱状图/饼图自定义图例（图例过多使用滚动条）
Nancyeah的博客
04-22 6016
文章目录前言一、数据处理二、示例1.根据设计需要写出自定义图例2.自定义图例能和echarts的图互动总结 前言 echarts的图例滚动是通过点击按钮实现的，而本次设计需要可以使用滚动条/鼠标滚轮进行滚动并支持模糊搜索，echarts不支持，那么就只能通过自定义整个图例来实现。 提示：以下是本篇文章正文内容，下面案例可供参考 一、数据处理 图例的数据要和图的series的数据对应上，比如折线图的series里每个对象的name就应该.
echarts的图标超出容器出现滚动条
阿毛的博客
09-27 1万+
echarts legend——scroll效果 在使用到图表的页面中，有时候会出现图表的图标区域太长，超出显示或者空间不够的情况，最近才知道原来它也是可以像页面的标签一样，出现overflow：auto的效果。比如： legend的type属性选择“scroll”即可，默认值是“‘plain’”，也就是全部显示。 legend : { type : 'scroll', orient : '...
echart条形图超多项列显示固定列超出部分滚动条滚动显示
Hailee7的博客
12-21 1322
转自https://www.cnblogs.com/bagexiaowenti/p/16723653.html。注意dataZoom包含两条，如果只写第一条数据，只能用鼠标拖动滚动条。加上第二条数据，鼠标滚轮就能控制了。dataZoom放到chartOption中。我使用的是echarts5.0版本。
echarts 折线图 legend太多与图重叠
liaoxiuqing的博客
03-20 3253
【代码】echarts 折线图 legend太多与图重叠。
echarts自定义图例（legend）样式
热门推荐
qq_39905409的博客
06-30 2万+
echarts自定义图例（legend）样式
滚动条 设置
飛雪
11-11 567
style>... body {...}{SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色) SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色) SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色) SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜
echarts雷达图legend
08-25
根据引用中的内容，echarts雷达图的legend可以通过设置legend属性进行配置。在该属性中，可以设置图例的显示位置、图例项的名称和图标等。具体配置如下： ``` legend: { selectedMode: false, // 图例不可选择 show: true, // 显示图例 data: [ { name: '本班及格率', icon: 'image://' + blueIcon }, { name: '年级及格率', icon: 'image://' + orangeIcon } ], selected: { '本班及格率': true, '年级及格率': true }, x: 'right', // 图例水平位置 y: 'top', // 图例垂直位置 itemWidth: 40, // 图例项宽度 itemHeight: 13, // 图例项高度 itemGap: 40, // 图例项之间的间距 formatter: ['{a|{name}}'].join('\n'), // 图例项的格式化文本 textStyle: { // 图例项的样式 height: 9, // 图例项高度 rich: { // 图例项的富文本设置 a: { // a是formatter中的占位符 verticalAlign: 'bottom' // 图例项与文字对齐方式 } } } } ``` 以上是关于echarts雷达图legend的一些配置说明。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [ECharts雷达图(详细示例——附有具体注释)](https://blog.csdn.net/GRAY_KEY/article/details/80575583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [下拉框选择事件动态加载echart数据](https://download.csdn.net/download/kebi007/9742894)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [echarts雷达图图例自定义以及tooltip动态展示一维数据](https://blog.csdn.net/qq_54089372/article/details/126525678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值