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

本文主要是介绍Echart 极坐标 方位距离图 图标符号旋转以及大小 颜色渐变,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景:

参与一个交互式图表项目,客户有一个极坐标对比需求,展示不同方位不同距离的不同类型的指标数据。具体到属性字段则是:
来源、距离、方位、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;elsereturn 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;elsereturn 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;elsereturn 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}
};

这篇关于Echart 极坐标 方位距离图 图标符号旋转以及大小 颜色渐变的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/705679

相关文章

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具,按住F10键,颜色值会跟着显示。完整代码import tkinter as tkimport pyau

Java计算经纬度距离的示例代码

《Java计算经纬度距离的示例代码》在Java中计算两个经纬度之间的距离,可以使用多种方法(代码示例均返回米为单位),文中整理了常用的5种方法,感兴趣的小伙伴可以了解一下... 目录1. Haversine公式(中等精度,推荐通用场景)2. 球面余弦定理(简单但精度较低)3. Vincenty公式(高精度,

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后,buf

详解C++中类的大小决定因数

《详解C++中类的大小决定因数》类的大小受多个因素影响,主要包括成员变量、对齐方式、继承关系、虚函数表等,下面就来介绍一下,具有一定的参考价值,感兴趣的可以了解一下... 目录1. 非静态数据成员示例:2. 数据对齐(Padding)示例:3. 虚函数(vtable 指针)示例:4. 继承普通继承虚继承5.