Echart 极坐标 方位距离图 图标符号旋转以及大小 颜色渐变

已于 2023-11-14 14:19:47 修改
阅读量439 收藏
点赞数 1
分类专栏： 前端 Echart 文章标签： 前端 Echart 极坐标
于 2023-11-14 14:04:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qxyywy/article/details/134397121
版权

背景：

参与一个交互式图表项目，客户有一个极坐标对比需求，展示不同方位不同距离的不同类型的指标数据。具体到属性字段则是：
来源、距离、方位、ID、旋转角度、大小
先看效果图：

技术点：

图例说明：距离为图例的径向轴，方位为图例的角度轴，不同类型需要用不同颜色，不同图标符号进行展示且需要根据旋转角度旋转以及大小参数绘制。
这是一个非常规极坐标图，首先要解决的是角度问题，从0到180（-180）再到0，按照常规思维极坐标的角度应该是一个排序规则而且默认是由小到大，此处的解决思路是：

1.方位问题

方位范围为0°到180°（-180°）再到0°，及整体的极坐标为360°，在此原则下需要注意一下问题：
a.角度轴（angleAxis）的刻度按照要求30°为一个刻度，则在角度小于等于180°保留原值，大于等于180°的需要减去360°。即：

"angleAxis": {
        max:360,
        min:0,
        "axisLabel": {
            "show": true,
            "color": "#000000",
            "fontSize": 10,
            "rotate": 0,
            "formatter":function (value, index) {
                if(value>180){
                  return value-360 + '°';
                }else{
                  return value + '°';
                }
            }
        },
}

b. 角度轴（angleAxis）的值（用户传递过来的方位）在0到180°时保留原值，-180°到0°时需要加上360°。

2.分组、图标、旋转、大小、颜色渐变

这些就是对应echart的相关属性
分组就是series不同数组即可。
图标对应的是series的symbol属性，如："symbol": "arrow",
旋转对应的是series里具体数据的symbolRotate，如： "symbolRotate":76,
大小对应的是series的symbolSize,如：

"symbolSize":function(val){
              if(val[4]<3)
                return 3;
              else
                return val[4]*2
            },

颜色渐变：
 

 "itemStyle": {
                "color": {
                    "type": "radial",
                    "x": 0.4,
                    "y": 0.3,
                    "r": 1,
                    "colorStops": [
                        {
                            "offset": 0,
                            "color": "rgba(1,122,255,0.6)"
                        },
                        {
                            "offset": 1,
                            "color": "rgba(1,122,255,1)"
                        }
                    ],
                    "global": false
                }
            },

整理完以上技术点，结合测试数据就可以完成这个特殊极坐标的处理。

完整代码

option = {
    "title": {
        "text": "极坐标",
        "textStyle": {
            "fontWeight": "bold",
            "fontSize": 14,
            "color": "#000000",
            "fontStyle": "normal"
        },
        "show": true,
        "left": "8px",
        "top": "8px"
    },
    "grid": {
        "x": 0,
        "y": 0,
        "x2": 0,
        "y2": 0
    },
    "xAxis": {
        "min": -100,
        "max": 100,
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#CCCCCC",
                "width": 1,
                "style": "solid"
            }
        },
        "axisLabel": {
            "show": false
        },
        "splitLine": {
            "show": false
        }
    },
    "yAxis": {
        "min": -100,
        "max": 100,
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#CCCCCC",
                "width": 1,
                "style": "solid"
            }
        },
        "axisLabel": {
            "show": false
        },
        "splitLine": {
            "show": false
        }
    },
    "angleAxis": {
        max:360,
        min:0,
        "axisLabel": {
            "show": true,
            "color": "#000000",
            "fontSize": 10,
            "rotate": 0,
            "formatter":function (value, index) {
                if(value>180){
                  return value-360 + '°';
                }else{
                  return value + '°';
                }
            }
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": "#CCCCCC",
                "width": 1,
                "style": "solid"
            }
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc",
                "width": 1,
                "style": "solid"
            }
        },
        "show": true,
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc",
                "width": 1,
                "style": "solid"
            }
        }
    },
    "radiusAxis": {
        "type": "category",
        "data": [
            "100",
            "300",
            "600"
        ],
        "z": 10,
        "axisLabel": {
            "show": true,
            "color": "#000000",
            "fontSize": 10,
            "rotate": 0,
            "formatter": "{value}"
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#cccccc",
                "width": 1,
                "style": "solid"
            }
        },
        "axisLine": {
            "show": false,
            "lineStyle": {
                "color": "#cccccc",
                "width": 1,
                "style": "solid"
            }
        },
        "boundaryGap": true,
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": "#CCCCCC",
                "width": 1,
                "style": "solid"
            }
        },
        "show": true,
        "position": "left",
        "name": "",
        "nameTextStyle": {
            "color": "#000000",
            "fontSize": 10
        }
    },
    "polar": {
        "radius": [
            "10%",
            "70%"
        ]
    },
    "series": [
        {
            "name": "类别1",
            "type": "scatter",
            
            "data": [
                {
                    "value": [
                        "100",
                        -30,
                        'a128',
                        55,
                        16
                    ],
                     "symbolRotate":55,
                    "dimensionList": [
                        {
                            "id": "58295c72-e13a-4bf5-80e6-16d4253dec53",
                            "value": "100"
                        }
                    ],
                    "quotaList": [
                        {
                            "id": "84c1ad50-f031-4ee3-99d5-343761639e98"
                        }
                    ],
                },
                {
                    "value": [
                        "300",
                        110,
                        'a127',
                        20,
                        25
                    ],
                     "symbolRotate":20,
                    "dimensionList": [
                        {
                            "id": "58295c72-e13a-4bf5-80e6-16d4253dec53",
                            "value": "300"
                        }
                    ],
                    "quotaList": [
                        {
                            "id": "84c1ad50-f031-4ee3-99d5-343761639e98"
                        }
                    ]
                },
                {
                    "value": [
                        "600",
                        6.54,
                        'a126',
                        76,
                        30
                    ],
                     "symbolRotate":76,
                    "dimensionList": [
                        {
                            "id": "58295c72-e13a-4bf5-80e6-16d4253dec53",
                            "value": "600"
                        }
                    ],
                    "quotaList": [
                        {
                            "id": "84c1ad50-f031-4ee3-99d5-343761639e98"
                        }
                    ]
                }
            ],
            "itemStyle": {
                "color": {
                    "type": "radial",
                    "x": 0.4,
                    "y": 0.3,
                    "r": 1,
                    "colorStops": [
                        {
                            "offset": 0,
                            "color": "rgba(1,122,255,0.6)"
                        },
                        {
                            "offset": 1,
                            "color": "rgba(1,122,255,1)"
                        }
                    ],
                    "global": false
                }
            },
            "symbol": "arrow",
            "symbolSize":function(val){
              if(val[4]<3)
                return 3;
              else
                return val[4]*2
            },
            "label": {
                "show": false,
                "position": "inside",
                "color": "#000000",
                "fontSize": 10,
                "formatter": "{c}",
                "gaugeFormatter": "{value}",
                "labelLine": {
                    "show": true
                },
                "gaugeLabelFormatter": {
                    "type": "value",
                    "unit": 1,
                    "suffix": "",
                    "decimalCount": 2,
                    "thousandSeparator": true
                },
                "reserveDecimalCount": 2,
                "labelContent": [
                    "dimension",
                    "proportion"
                ],
                "modifyName": "show",
                "propertyName": "label-selector"
            },
            "z": 100,
            "coordinateSystem": "polar",
            "selectedMode": true,
            "select": {
                "itemStyle": {
                    "shadowBlur": 2
                }
            },
            
        },
        {
            "name": "类别2",
            "type": "scatter",
            "data": [
                {
                    "value": [
                        "100",
                        7.77,
                        'a123',
                        50,
                        22
                    ],
                    "symbolRotate":50,
                    "dimensionList": [
                        {
                            "id": "58295c72-e13a-4bf5-80e6-16d4253dec53",
                            "value": "100"
                        }
                    ],
                    "quotaList": [
                        {
                            "id": "acee783e-c4e7-4616-8fbf-e1e5b8e6f411"
                        }
                    ]
                },
                {
                    "value": [
                        "300",
                        -90,
                        'a124',
                        90,
                        23
                    ],
                    "symbolRotate":90,
                    "dimensionList": [
                        {
                            "id": "58295c72-e13a-4bf5-80e6-16d4253dec53",
                            "value": "300"
                        }
                    ],
                    "quotaList": [
                        {
                            "id": "acee783e-c4e7-4616-8fbf-e1e5b8e6f411"
                        }
                    ]
                },
                {
                    "value": [
                        "600",
                        9.08,
                        'a125',
                        0,
                        15
                    ],
                    "symbolRotate":0,
                    "dimensionList": [
                        {
                            "id": "58295c72-e13a-4bf5-80e6-16d4253dec53",
                            "value": "600"
                        }
                    ],
                    "quotaList": [
                        {
                            "id": "acee783e-c4e7-4616-8fbf-e1e5b8e6f411"
                        }
                    ]
                }
            ],
            "itemStyle": {
                "color": {
                    "type": "radial",
                    "x": 0.4,
                    "y": 0.3,
                    "r": 1,
                    "colorStops": [
                        {
                            "offset": 0,
                            "color": "rgba(98,186,70,0.6)"
                        },
                        {
                            "offset": 1,
                            "color": "rgba(98,186,70,1)"
                        }
                    ],
                    "global": false
                }
            },
            "symbol": "triangle",
             "symbolSize":function(val){
              if(val[4]<3)
                return 3;
              else
                return val[4]*2
            },
            "label": {
                "show": false,
                "position": "inside",
                "color": "#000000",
                "fontSize": 10,
                "formatter": "{c}",
                "gaugeFormatter": "{value}",
                "labelLine": {
                    "show": true
                },
                "gaugeLabelFormatter": {
                    "type": "value",
                    "unit": 1,
                    "suffix": "",
                    "decimalCount": 2,
                    "thousandSeparator": true
                },
                "reserveDecimalCount": 2,
                "labelContent": [
                    "dimension",
                    "proportion"
                ],
                "modifyName": "show",
                "propertyName": "label-selector"
            },
            "z": 100,
            "coordinateSystem": "polar",
            "selectedMode": true,
            "select": {
                "itemStyle": {
                    "shadowBlur": 2
                }
            }
        }
    ],
    "legend": {
        "show": true,
        "data": [
            "类别1",
            "类别2"
        ],
        "textStyle": {
            "color": "#000000",
            "fontSize": 10
        },
        "left": "center",
        "bottom": "8px",
        "orient": "horizontal",
        "icon": "circle",
        "pageIconColor": "#000000",
        "pageIconInactiveColor": "#8c8c8c"
    },
    "color": [
        "#017AFF",
        "#62BA46",
        "#FFC601",
        "#F7821B",
        "#FF5257",
        "#F74F9E",
        "#CC9494",
        "#955FBC",
        "#A55057"
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "confine": true,
        "textStyle": {
            "fontSize": 10,
            "color": "#000000"
        },
        "formatter": function(params){
          console.log(params)
          return  "ID："+params.value[2]+"<br />距离："+params.value[0]+"<br />方位："+params.value[1]+"°<br />旋转："+params.value[3]+"°"
        },
        "backgroundColor": "#FFFFFF",
        "modifyName": "trigger",
        "propertyName": "tooltip-selector",
        "borderColor": "#FFFFFF",
        "appendToBody": true
    }
};

qxyywy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts极坐标Polar结合热力（维彩、色阶）图Heatmap
mm_hello11的博客
04-11 2240
echarts图表展示项目中有用到数据生成极坐标图，并显示色阶展示，多方查找下终于解决，生成了极坐标热力图，样式如下： 代码如下： <div id="heartMap" style="width: 800px;height:600px;"></div> heatMap() function heatMap() { var heatMapChart = echarts.init(document.getElementById("heartMap".
eCharts图表（polar极坐标图）
weixin_33841503的博客
08-04 5268
极坐标图 HTML: <div id="eChart"></div> css: #eChart{ width:500px; height:500px; } js: /*渲染echart表格 */ function echart(redData, blueD...
Echarts极坐标系使用（vue）
蓑笠翁
09-12 4497
vue Echarts使用极坐标系，在极坐标中绘制散点图，心形图详解。
05-Echarts简化系列之：polar 极坐标系
youyudehan的博客
11-03 1218
快速预览全面的Echarts的极坐标系配置
绘制echarts中的极坐标环形柱状图；柱状渐变；
MycoolMy的博客
12-21 3930
绘制极坐标图形时需要使用角度轴和径向轴两个方向的布局角度轴其实类似于Y轴，用于分割柱状图的间隔大小；径向轴其实类似与X轴，用于每条数据之间的间距；角度轴和径向轴其中的配置相类似；
图片渐变旋转模块.rar
04-07
在IT领域，图片渐变旋转模块是一个用于处理图像效果的技术，尤其在图形用户界面（GUI）设计和多媒体应用中常见。这个"图片渐变旋转模块"可能是由易语言编写的一个源码包，易语言是一种流行的中文编程语言，以其简单...
图像极坐标_极坐标_图像极坐标_图像极坐标转换_图像坐标_
10-01
本文将深入探讨“图像极坐标”以及与之相关的“图像极坐标转换”。 一、极坐标系统 极坐标系统是一种几何坐标系统，由一个原点和一个半径以及角度组成。在图像处理中，图像的每个像素可以用距离原点的距离（半径r...
C# GDI绘图显示 极坐标
08-25
在极坐标系统中，每个变量对应一个角度，而数据值则表示为距离中心点的距离。这种图表在数据分析、项目管理、体育统计等领域都有广泛应用。 要实现C#中的极坐标绘图，首先需要创建一个自定义的控件，继承自`System....
基于MATALB自定义极坐标图
01-02
在MATLAB中，自定义极坐标图是一种常见且有趣的技术，可以用于绘制各种特殊的数据分布或可视化效果。本文将深入探讨如何使用MATLAB编程来创建自定义极坐标图，并通过提供的`main.m`、`draw_arrow.m`和`Untitled4.m`...
Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果
03-20
分享自己公司项目类似的一个案例，用Echarts中的Polar（极坐标或称为平面直角坐标系）和Bar（柱状图）实现的 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/AppleWatch
Echart全国地图省市县坐标数据JSON版.zip_Echarts地图 json_Echart全国地图_echarts 地图j
07-15
echarts地图做三级省市县联动JSON格式资源
echart 反向 极坐标轴_echarts极坐标图
weixin_31495637的博客
01-14 791
getChartPie = (data) => {let legendData = ['欺诈风险', '违约风险', '违法风险', '违规风险'];let option = {backgroundColor: 'transparent',grid: {top: 40,left: 10,right: 10,bottom: 0,containLabel: true}, //图形的位置...
图解pyecharts绘制极坐标图（一）
weixin_44736501的博客
10-31 1252
图解pyecharts绘制极坐标图，通过图文解说的方式让读者学会如何利用pyecharts绘制极坐标图
Echarts 极坐标柱状图的详细配置过程
梁辰兴的博客
09-18 1309
极坐标柱状图是一种特殊的二维坐标图，它以极坐标为基础，将数据以柱状的形式展现出来。在极坐标柱状图中，分类轴对应于角度轴，而指标轴则对应于径向轴。这种图形的优点在于能够保留直角坐标系中数据变化趋势的优点，同时以更为美观的形式展现出来。然而需要注意的是，极坐标柱状图并不能很好地表示趋势，且在展示的数据量方面比普通柱状图更为有限。
Python之pyecharts的常见用法3-极坐标图-漏斗图
weixin_42636075的博客
06-14 3492
【代码】Python之pyecharts的常见用法3-极坐标图-漏斗图。
【echarts绘制地理位置图geojson】
qq_40039221的博客
12-03 430
导入导出geojson的网站，可以测试json格式对不对 跟上面那个网站差不多这个可以直接导文件进去 用户给了一些地址让我做个地理位置图展示，我先用了第二个网站将用户的地址转成了geojson的格式，大概看了一下echarts的配置项， echarts支持的格式是这个样子的 我导出出来的格式是 然后就自己整理了一下格式，echarts里面可以绘制point（点）linestring（线）Polygon（面），绘制面好像是只需要把geo里面map配置进去就行了，point和linestring还需要用s
echarts 随时间推移得刻度线_ECharts角度轴的刻度线样式设置
weixin_39664477的博客
12-22 273
angleAxis.axisTick.lineStyle.color | ColorangleAxis.axisTick.lineStyle.width | number[ default: 1 ]角度轴刻度线的线宽。angleAxis.axisTick.lineStyle.type | string[ default: 'solid' ]角度轴刻度线的类型。可选：'sol...
ASP.NET Core Web API 使用Autofac框架
最新发布
鲤籽鲲的博客
08-08 661
ASP.NET Core Web API 使用Autofac框架
echart 折线图颜色渐变
06-10
ECharts 提供了渐变颜色的配置项，可以通过 `color` 属性来设置折线图的颜色渐变。 具体实现方法如下： 1. 在 `option` 中设置 `color` 属性为一个数组，数组中的每个元素即为一个颜色值，可以是单个颜色值或者是渐变色。 2. 对于需要设置为渐变色的元素，可以在 `color` 数组中使用对象的形式来指定它的渐变方式。例如： ```js color: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(0, 255, 255, 1)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(0, 0, 255, 1)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }] ``` 其中，`type` 表示渐变类型，可以是 `'linear'`（线性渐变）或 `'radial'`（径向渐变）；`x`、`y`、`x2`、`y2` 表示渐变的起始点和终止点，`colorStops` 表示颜色的渐变区间，`globalCoord` 表示是否使用全局坐标系。 3. 在折线图的 `series` 中，需要设置每条折线的颜色。可以使用 `lineStyle` 的 `color` 属性来设置。例如： ```js series: [{ name: '折线图', type: 'line', data: [1, 2, 3, 4, 5], lineStyle: { color: 'rgba(255, 0, 0, 1)' // 线条颜色为红色 } }] ``` 以上是设置折线图颜色渐变的基本方法，你可以根据自己的需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值