Background:
Participating in an interactive chart project, the customer had a need for polar coordinate comparison to display different types of indicator data in different directions and distances. Specifically, the attribute fields are:
Source, distance, orientation, ID, rotation angle, size
Let’s look at the renderings first:
Technical points:
Legend description: The distance is the radial axis of the legend, and the azimuth is the angular axis of the legend. Different types need to be displayed with different colors and icons and need to be drawn according to the rotation angle and size parameters.
This is an unconventional polar coordinate diagram. The first thing to solve is the angle problem, from 0 to 180 (-180) and then to 0. According to conventional thinking, the angle of polar coordinates should be a sorting rule and the default is from small to large. This The solution here is:
1. Orientation problem
The azimuth range is from 0° to 180° (-180°) and then to 0°, and the overall polar coordinate is 360°. Under this principle, you need to pay attention to the following issues:
a. The scale of the angle axis (angleAxis) is a scale of 30° as required. If the angle is less than or equal to 180°, keep the original value. If the angle is greater than or equal to 180°, you need to subtract 360°. Right now:
"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. The value of the angle axis (angleAxis) (the orientation passed by the user) retains the original value from 0 to 180°, and 360° needs to be added from -180° to 0°.
2. Grouping, icon, rotation, size, color gradient
These are the relevant attributes corresponding to echart
Grouping is just a series of different arrays.
The icon corresponds to the symbol attribute of the series, such as: “symbol”: “arrow”,
The rotation corresponds to the symbolRotate of the specific data in the series, such as: “symbolRotate”:76,
The size corresponds to the symbolSize of the series, such as:
"symbolSize":function(val){
if(val[4]<3)
return 3;
else
return val[4]*2
},
Color gradient:
"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
}
},
After sorting out the above technical points and combining with the test data, the processing of this special polar coordinate can be completed.
Complete code
option = {
"title": {
"text": "Polar coordinates",
"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": "Category 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": "Category 2",
"type": "scatter",
"data": [
{
"value": [
"100",
7.77,
'a123',
50,
twenty two
],
"symbolRotate":50,
"dimensionList": [
{
"id": "58295c72-e13a-4bf5-80e6-16d4253dec53",
"value": "100"
}
],
"quotaList": [
{
"id": "acee783e-c4e7-4616-8fbf-e1e5b8e6f411"
}
]
},
{
"value": [
"300",
-90,
'a124',
90,
twenty three
],
"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": [
"Category 1",
"Category 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] + "
Distance: " + params.value[0] + "
Aim: " + params.value[1] + "°
Rotation:" + params.value[3] + "°"
},
"backgroundColor": "#FFFFFF",
"modifyName": "trigger",
"propertyName": "tooltip-selector",
"borderColor": "#FFFFFF",
"appendToBody": true
}
};