You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2019/06/19 07:06:33 UTC
[GitHub] [incubator-echarts] kf53916 opened a new issue #10703: X和Y轴交换位置坐标轴指示器标签无法旋转
kf53916 opened a new issue #10703: X和Y轴交换位置坐标轴指示器标签无法旋转
URL: https://github.com/apache/incubator-echarts/issues/10703
### Version
4.2.1
### Steps to reproduce
x轴和y轴的配置项交互位置，数据项也交换位置，坐标轴标签旋转正负90度，坐标翻转，最终效果为移动端横屏模式，此时十字准星及xy轴指示器标签方向无法旋转。测试代码如下：
const lastClose = 100
function getColor(value, compare) {
if (value > compare) {
return '#FF0000'
} else if (value < compare) {
return '#00FF00'
} else {
return '#808080'
}
}
let times = ["00:00",
"00:15",
"00:30",
"00:45"
,"01:00"
,"01:15"
,"01:30"
,"01:45"
,"02:00"
,"02:15"
,"02:30"
,"02:45"
,"03:00"
,"03:15"
,"03:30"
,"03:45"
,"04:00"
,"04:15"
,"04:30"
,"04:45"
,"05:00"
,"05:15"
,"05:30"
,"05:45"
,"06:00"
,"06:15"
,"06:30"
,"06:45"
,"07:00"
,"07:15"
,"07:30"
,"07:45"
,"08:00"
,"08:15"
,"08:30"
,"08:45"
,"09:00"
,"09:15"
,"09:30"
,"09:45"
,"10:00"
,"10:15"
,"10:30"
,"10:45"
,"11:00"
,"11:15"
,"11:30"
,"11:45"
,"12:00"
,"12:15"
,"12:30"
,"12:45"
,"13:00"
,"13:15"
,"13:30"
,"13:45"
,"14:00"
,"14:15"
,"14:30"
,"14:45"
,"15:00"
,"15:15"
,"15:30"
,"15:45"
,"16:00"
,"16:15"
,"16:30"
,"16:45"
,"17:00"
,"17:15"
,"17:30"
,"17:45"
,"18:00"
,"18:15"
,"18:30"
,"18:45"
,"19:00"
,"19:15"
,"19:30"
,"19:45"
,"20:00"
,"20:15"
,"20:30"
,"20:45"
,"21:00"
,"21:15"
,"21:30"
,"21:45"
,"22:00"
,"22:15"
,"22:30"
,"22:45"
,"23:00"
,"23:15"
,"23:30"
,"23:45"];
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
type: 'solid'// 实线
},
label:{
show: true,
margin: 0,
padding: [5, 5],
color: '#000000',
backgroundColor:'#FFFFFF'
}
},
formatter: function(params, ticket, callback) {
console.log(params)
}
},
legend: {
data: ['节点1','节点2','节点3']
},
xAxis: [{
//type: "time",
type: "value",
position:"top",
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
opacity: 0.3,
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#D3D3D3'
}
},
axisLabel: {
margin: 2,
padding: [4, 0],
inside: false,
textStyle: {
fontSize: 11,
color: function(value, index) {
return getColor(value, lastClose)
}
},
formatter: function(value, index) {
return value.toFixed(2)
},
rotate: 90 //刻度标签旋转的角度
}
},
{
//type: "time",
type: "value",
boundaryGap: false,
position: "bottom",
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
onZero: false,
lineStyle: {
color: '#D3D3D3'
}
},
axisLabel: {
margin: 2,
inside: false,
textStyle: {
fontSize: 11,
color: function(value, index) {
return getColor(value, lastClose)
}
},
formatter: function(value, index) {
return ((((value - lastClose) * 100) / lastClose).toFixed(2) + "%")
},
rotate: -90 //刻度标签旋转的角度
},
axisPointer: {
label: {
formatter: function(params) {
return ((((params.value - lastClose) * 100) / lastClose).toFixed(2) + "%")
},
rotate: 90 //刻度标签旋转的角度
}
}
}
],
yAxis: {
type: "category",
position: "left",
inverse :'true', //是否是反向坐标轴。
boundaryGap: false,
splitLine: {
show: false
},
// splitNumber: 5,
axisLine: {
lineStyle: {// x轴线颜色-浅灰色
color: '#D3D3D3'
}
},
axisLabel: {
// interval: false,
color: '#808080',// x轴刻度文字颜色-灰色
showMaxLabel: true,
formatter: function(value, index) {
// 格式化成月/日，只在第一个刻度显示年份
// let date = new Date(value);
// date = date.Format("hh:mm");
// if (index > 0 && date == "23:59") {
// date = "24:00";
// }
// return date
return value
},
rotate: -90 //刻度标签旋转的角度
},
axisPointer: {
label: {
formatter: function(params) {
// let date = new Date(params.value)
// date = date.Format("MM-dd hh:mm")
// return date
return params.value
},
rotate: 90 //刻度标签旋转的角度
}
},
data: times
},
dataZoom:[// 数据缩放
{
type: 'inside',//区域缩放
start: 0,
end: 10,
yAxisIndex: 0
}
],
series: [
{name: '节点1', type: 'line', smooth: 'true', showSymbol: false, hoverAnimation: false, lineStyle: {width: 1},markLine: {symbol: ['none', 'none'],
data: [{
name: '昨收盘基准线',
xAxis: lastClose,
label: {show: false},
lineStyle: {color: '#A9A9A9'}
}]},data: [90,91,89,78,74,100,110,111,120]},
{name: '节点2', type: 'line', smooth: 'true', showSymbol: false, hoverAnimation: false, lineStyle: {width: 1},markLine: {symbol: ['none', 'none'],
data: [{
name: '昨收盘基准线',
xAxis: lastClose,
label: {show: false},
lineStyle: {color: '#A9A9A9'}
}]},data: [89,94,79,68,44,105]},
{name: '节点3', type: 'line', smooth: 'true', showSymbol: false, hoverAnimation: false, lineStyle: {width: 1},markLine: {symbol: ['none', 'none'],
data: [{
name: '昨收盘基准线',
xAxis: lastClose,
label: {show: false},
lineStyle: {color: '#A9A9A9'}
}]},data: [79,98,69,88,84,110]}
]
}
### What is expected?
xy指示器标签能旋转指定的角度
### What is actually happening?
目前没有参数可配置
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org