极坐标轴线颜色修改
Polar Coordinate Axis Line Color Modification
原始模板:https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-stack-radial
我无法更改最外面的轴线(最外面的圆)颜色,我很想知道如何。 outmost axis
我在echarts网站上用了深色模式,把最外面的线变成了灰白色
output using echart
会喜欢更改该线条颜色而不是使用暗模式的正确方法
任何想法都会有所帮助,谢谢
data = [
['大品牌青睐', 100, 'Business Agglomeration Degree',],
['商业核心', 50, 'Business Agglomeration Degree',],
['基础商业', 50, 'Business Agglomeration Degree',],
['城际交通 基础设施', 60, 'TrafficHub',],
['交通联系度', 50, 'TrafficHub',],
['物流通达度', 50, 'TrafficHub',],
['商业资源区域中心度', 50, 'TrafficHub',],
['消费活跃度', 50, 'Residents Vitality',],
['社交活跃度', 50, 'Residents Vitality',],
['夜间活跃度', 50, 'Residents Vitality',],
['出门新鲜度', 60, 'Lifestyle Diversity',],
['消费多样性', 50, 'Lifestyle Diversity',],
['休闲丰富度', 50, 'Lifestyle Diversity',],
['创新氛围', 50, 'Promised Future',],
['人才吸引力', 50, 'Promised Future',],
['消费潜力', 50, 'Promised Future',],
['城市规模与增长', 55, 'Promised Future',],
]
cats = {
'Business Agglomeration Degree': 'rgb(255,255,102)',
'TrafficHub': 'rgb(252,110,34)',
'Residents Vitality': 'rgb(194,76,246)',
'Lifestyle Diversity': 'rgb(255,20,147)',
'Promised Future': 'rgb(8,247,254)',
}
option = {
backgroundColor:'rgb(105,105,105)',
axisLabel: {
color:'rgb(248,248,255)'
},
lineStyle:{
Color:'(255,250,250)'
},
timeAxis:{
axisLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
},
angleAxis: {
type: 'category',
data: data.map(function(d){return d[0]}),
axisLine:{
linestyle:{
color:'#FFFAFA',width:(1),type:'solid',show:true,onZero :true}},
splitLine:{
linestyle:{
color:'#FFFAFA',width:(1),type:'solid'}},
},
radiusAxis: {
max:120,
axisLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
axisTick:{
lineStyle:{
color:'rgb(248,248,255)'}},
minorTick:{
lineStyle:{
color:'rgb(248,248,255)'}},
minorSplitLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
axisPointer:{
lineStyle:{
color:'rgb(248,248,255)'}},
axisLabel:{
lineStyle:{
color:'rgb(248,248,255)'}},
splitLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
splitArea:{
lineStyle:{
color:'rgb(248,248,255)'}},
tooltip:{
show:false
}
},
polar: {
},
axisPointer:{
linestyle:{
color:'#FFFFF0',width:(1),type:'solid'},
crossStyle:{
color:'#FFFFF0'},
type:'line',
snap:false,
triggerTooltip:true,
value:null,
status:null,
animation:null,
},
series: {
type: 'bar',
data: data.map(function(d){return d[1]}),
coordinateSystem: 'polar',
name: 'a',
stack: 'a',
emphasis: {
focus: 'series'
},
itemStyle: {
normal:{
color: function (params){
return cats[data[params.dataIndex][2]]
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
};
检查documentation,我找到了改变轴颜色的方法:
- 将值设置为
angleAxis.axisLine.lineStyle.color
属性。
代码:
angleAxis: {
type: "value",
startAngle: 0,
axisLine: {
lineStyle: {
color: "rgba(232, 13, 13, 1)" // This is the color to apply to the axis line.
}
}
},
我还注意到你有 linestyle
,而是 lineStyle
- 注意大写。
这是完整代码:
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
data = [
['大品牌青睐', 100, 'Business Agglomeration Degree', ],
['商业核心', 50, 'Business Agglomeration Degree', ],
['基础商业', 50, 'Business Agglomeration Degree', ],
['城际交通 基础设施', 60, 'TrafficHub', ],
['交通联系度', 50, 'TrafficHub', ],
['物流通达度', 50, 'TrafficHub', ],
['商业资源区域中心度', 50, 'TrafficHub', ],
['消费活跃度', 50, 'Residents Vitality', ],
['社交活跃度', 50, 'Residents Vitality', ],
['夜间活跃度', 50, 'Residents Vitality', ],
['出门新鲜度', 60, 'Lifestyle Diversity', ],
['消费多样性', 50, 'Lifestyle Diversity', ],
['休闲丰富度', 50, 'Lifestyle Diversity', ],
['创新氛围', 50, 'Promised Future', ],
['人才吸引力', 50, 'Promised Future', ],
['消费潜力', 50, 'Promised Future', ],
['城市规模与增长', 55, 'Promised Future', ],
];
cats = {
'Business Agglomeration Degree': 'rgb(255,255,102)',
'TrafficHub': 'rgb(252,110,34)',
'Residents Vitality': 'rgb(194,76,246)',
'Lifestyle Diversity': 'rgb(255,20,147)',
'Promised Future': 'rgb(8,247,254)'
}
option = {
backgroundColor: 'rgb(105,105,105)',
axisLabel: {
color: 'rgb(248,248,255)'
},
lineStyle: {
Color: '(255,250,250)'
},
timeAxis: {
axisLine: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
},
angleAxis: {
type: 'category',
data: data.map(function(d) {
return d[0]
}),
axisLine: {
lineStyle: {
width: (1),
type: 'solid',
show: true,
onZero: true,
color: "rgba(210, 25, 25, 1)" // This the color of the axis line, in this case, red.
}
},
splitLine: {
linestyle: {
color: '#FFFAFA',
width: (1),
type: 'solid'
}
},
},
radiusAxis: {
max: 120,
axisLine: {
lineStyle: {
color: '#FFFAFA',
width: (1),
type: 'solid',
show: true,
onZero: true
},
lineStyle: {
color: 'rgb(248,248,255)'
}
},
axisTick: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
minorTick: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
minorSplitLine: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
axisPointer: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
axisLabel: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
splitLine: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
splitArea: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
tooltip: {
show: false
}
},
polar: {},
axisPointer: {
linestyle: {
color: '#FFFFF0',
width: (1),
type: 'solid'
},
crossStyle: {
color: '#FFFFF0'
},
type: 'line',
snap: false,
triggerTooltip: true,
value: null,
status: null,
animation: null
},
series: {
type: 'bar',
data: data.map(function(d) {
return d[1]
}),
coordinateSystem: 'polar',
name: 'a',
stack: 'a',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: function(params) {
return cats[data[params.dataIndex][2]]
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=bar-polar-stack-radial
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</body>
原始模板:https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-stack-radial
我无法更改最外面的轴线(最外面的圆)颜色,我很想知道如何。 outmost axis
我在echarts网站上用了深色模式,把最外面的线变成了灰白色
output using echart
会喜欢更改该线条颜色而不是使用暗模式的正确方法
任何想法都会有所帮助,谢谢
data = [
['大品牌青睐', 100, 'Business Agglomeration Degree',],
['商业核心', 50, 'Business Agglomeration Degree',],
['基础商业', 50, 'Business Agglomeration Degree',],
['城际交通 基础设施', 60, 'TrafficHub',],
['交通联系度', 50, 'TrafficHub',],
['物流通达度', 50, 'TrafficHub',],
['商业资源区域中心度', 50, 'TrafficHub',],
['消费活跃度', 50, 'Residents Vitality',],
['社交活跃度', 50, 'Residents Vitality',],
['夜间活跃度', 50, 'Residents Vitality',],
['出门新鲜度', 60, 'Lifestyle Diversity',],
['消费多样性', 50, 'Lifestyle Diversity',],
['休闲丰富度', 50, 'Lifestyle Diversity',],
['创新氛围', 50, 'Promised Future',],
['人才吸引力', 50, 'Promised Future',],
['消费潜力', 50, 'Promised Future',],
['城市规模与增长', 55, 'Promised Future',],
]
cats = {
'Business Agglomeration Degree': 'rgb(255,255,102)',
'TrafficHub': 'rgb(252,110,34)',
'Residents Vitality': 'rgb(194,76,246)',
'Lifestyle Diversity': 'rgb(255,20,147)',
'Promised Future': 'rgb(8,247,254)',
}
option = {
backgroundColor:'rgb(105,105,105)',
axisLabel: {
color:'rgb(248,248,255)'
},
lineStyle:{
Color:'(255,250,250)'
},
timeAxis:{
axisLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
},
angleAxis: {
type: 'category',
data: data.map(function(d){return d[0]}),
axisLine:{
linestyle:{
color:'#FFFAFA',width:(1),type:'solid',show:true,onZero :true}},
splitLine:{
linestyle:{
color:'#FFFAFA',width:(1),type:'solid'}},
},
radiusAxis: {
max:120,
axisLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
axisTick:{
lineStyle:{
color:'rgb(248,248,255)'}},
minorTick:{
lineStyle:{
color:'rgb(248,248,255)'}},
minorSplitLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
axisPointer:{
lineStyle:{
color:'rgb(248,248,255)'}},
axisLabel:{
lineStyle:{
color:'rgb(248,248,255)'}},
splitLine:{
lineStyle:{
color:'rgb(248,248,255)'}},
splitArea:{
lineStyle:{
color:'rgb(248,248,255)'}},
tooltip:{
show:false
}
},
polar: {
},
axisPointer:{
linestyle:{
color:'#FFFFF0',width:(1),type:'solid'},
crossStyle:{
color:'#FFFFF0'},
type:'line',
snap:false,
triggerTooltip:true,
value:null,
status:null,
animation:null,
},
series: {
type: 'bar',
data: data.map(function(d){return d[1]}),
coordinateSystem: 'polar',
name: 'a',
stack: 'a',
emphasis: {
focus: 'series'
},
itemStyle: {
normal:{
color: function (params){
return cats[data[params.dataIndex][2]]
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
};
检查documentation,我找到了改变轴颜色的方法:
- 将值设置为
angleAxis.axisLine.lineStyle.color
属性。
代码:
angleAxis: {
type: "value",
startAngle: 0,
axisLine: {
lineStyle: {
color: "rgba(232, 13, 13, 1)" // This is the color to apply to the axis line.
}
}
},
我还注意到你有 linestyle
,而是 lineStyle
- 注意大写。
这是完整代码:
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
data = [
['大品牌青睐', 100, 'Business Agglomeration Degree', ],
['商业核心', 50, 'Business Agglomeration Degree', ],
['基础商业', 50, 'Business Agglomeration Degree', ],
['城际交通 基础设施', 60, 'TrafficHub', ],
['交通联系度', 50, 'TrafficHub', ],
['物流通达度', 50, 'TrafficHub', ],
['商业资源区域中心度', 50, 'TrafficHub', ],
['消费活跃度', 50, 'Residents Vitality', ],
['社交活跃度', 50, 'Residents Vitality', ],
['夜间活跃度', 50, 'Residents Vitality', ],
['出门新鲜度', 60, 'Lifestyle Diversity', ],
['消费多样性', 50, 'Lifestyle Diversity', ],
['休闲丰富度', 50, 'Lifestyle Diversity', ],
['创新氛围', 50, 'Promised Future', ],
['人才吸引力', 50, 'Promised Future', ],
['消费潜力', 50, 'Promised Future', ],
['城市规模与增长', 55, 'Promised Future', ],
];
cats = {
'Business Agglomeration Degree': 'rgb(255,255,102)',
'TrafficHub': 'rgb(252,110,34)',
'Residents Vitality': 'rgb(194,76,246)',
'Lifestyle Diversity': 'rgb(255,20,147)',
'Promised Future': 'rgb(8,247,254)'
}
option = {
backgroundColor: 'rgb(105,105,105)',
axisLabel: {
color: 'rgb(248,248,255)'
},
lineStyle: {
Color: '(255,250,250)'
},
timeAxis: {
axisLine: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
},
angleAxis: {
type: 'category',
data: data.map(function(d) {
return d[0]
}),
axisLine: {
lineStyle: {
width: (1),
type: 'solid',
show: true,
onZero: true,
color: "rgba(210, 25, 25, 1)" // This the color of the axis line, in this case, red.
}
},
splitLine: {
linestyle: {
color: '#FFFAFA',
width: (1),
type: 'solid'
}
},
},
radiusAxis: {
max: 120,
axisLine: {
lineStyle: {
color: '#FFFAFA',
width: (1),
type: 'solid',
show: true,
onZero: true
},
lineStyle: {
color: 'rgb(248,248,255)'
}
},
axisTick: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
minorTick: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
minorSplitLine: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
axisPointer: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
axisLabel: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
splitLine: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
splitArea: {
lineStyle: {
color: 'rgb(248,248,255)'
}
},
tooltip: {
show: false
}
},
polar: {},
axisPointer: {
linestyle: {
color: '#FFFFF0',
width: (1),
type: 'solid'
},
crossStyle: {
color: '#FFFFF0'
},
type: 'line',
snap: false,
triggerTooltip: true,
value: null,
status: null,
animation: null
},
series: {
type: 'bar',
data: data.map(function(d) {
return d[1]
}),
coordinateSystem: 'polar',
name: 'a',
stack: 'a',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: function(params) {
return cats[data[params.dataIndex][2]]
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=bar-polar-stack-radial
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</body>