New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tooltip默认显示和句柄拖动设置 #5091

Closed
Robotboy36 opened this Issue Feb 16, 2017 · 6 comments

Comments

Projects
None yet
3 participants
@Robotboy36

One-line summary [问题简述]

1、如何让tooltip默认显示在指定的x轴刻度上?

2、如何在X轴增加句柄拖动tooltip, 在百度移动统计端有看到那种效果

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]: 3.0
  • Browser version [浏览器类型和版本]: chrome
  • OS Version [操作系统类型和版本]: ios 和 安卓

Expected behaviour [期望结果]

Uploading image.png…

ECharts option [ECharts配置项]

option = {
tooltip: {
            trigger: 'axis',
            alwaysShowContent:true,
            confine: true, 
            padding: 10,
            textStyle: {
                fontSize: 12
            },

            // 提示框中标尺线的样式
            axisPointer: {
                // animation: false,
                lineStyle: {
                    color: '#ffd200',
                    width: 1,
                    opacity: 1
                }
            }
        }
}

Other comments [其他信息]

@100pah

This comment has been minimized.

Show comment
Hide comment
@100pah

100pah Feb 17, 2017

Member
  1. 可以使用 http://echarts.baidu.com/api.html#action.tooltip.showTip
  2. 你的图片我不能看到,不知是什么效果?
Member

100pah commented Feb 17, 2017

  1. 可以使用 http://echarts.baidu.com/api.html#action.tooltip.showTip
  2. 你的图片我不能看到,不知是什么效果?
@Robotboy36

This comment has been minimized.

Show comment
Hide comment

@100pah 100pah added the new-feature label Feb 20, 2017

@Robotboy36

This comment has been minimized.

Show comment
Hide comment
@Robotboy36

Robotboy36 Feb 22, 2017

有实现办法吗? 百度统计的移动端有这个效果,不知道是改的源代码还是api里面有这个配置

有实现办法吗? 百度统计的移动端有这个效果,不知道是改的源代码还是api里面有这个配置

@sevenen

This comment has been minimized.

Show comment
Hide comment
@sevenen

sevenen Feb 23, 2017

我试了试,只有一个半成品,或者是一个思路。拖动小黑点是可以让句柄移动的。小黑点是可以隐藏的,有隐藏属性。每次拖动小黑点之后,也可以重新改变他的位置。现在还有很多问题。你看看能不能做出来。如果你用在线编辑的话,记得用这几个网址,其他的可能会出错。
[+] 开放图形元素设置:graphic。参见http://echarts.baidu.com/gallery/editor.html?c=line-y-categoryhttp://echarts.baidu.com/gallery/editor.html?c=line-draggablehttp://echarts.baidu.com/gallery/editor.html?c=map-province。
或者可以直接用graphic做整个的手柄。
`option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
grid:{},
xAxis: [ {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}],
graphic:[{
type:'circle',
shape:{
cx:89.4,
cy:630,
r:10
},
zlevel:2,
draggable:'true',
ondragend:dragFunc,
invisible:false
}],
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
symbol:['pin',null],
symbolSize:[30,40],
data: [
{xAxis:0}
]
}
}
]
};
function dragFunc(){
var data0 = myChart.convertFromPixel('grid',[this.position[0],this.position[1]])[0];
myChart.setOption(
{
series:
[
{
markLine:{
data:[{
xAxis:data0
}]

                }
                
            }
        ]
        
    }
);

}
`

sevenen commented Feb 23, 2017

我试了试,只有一个半成品,或者是一个思路。拖动小黑点是可以让句柄移动的。小黑点是可以隐藏的,有隐藏属性。每次拖动小黑点之后,也可以重新改变他的位置。现在还有很多问题。你看看能不能做出来。如果你用在线编辑的话,记得用这几个网址,其他的可能会出错。
[+] 开放图形元素设置:graphic。参见http://echarts.baidu.com/gallery/editor.html?c=line-y-categoryhttp://echarts.baidu.com/gallery/editor.html?c=line-draggablehttp://echarts.baidu.com/gallery/editor.html?c=map-province。
或者可以直接用graphic做整个的手柄。
`option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
grid:{},
xAxis: [ {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}],
graphic:[{
type:'circle',
shape:{
cx:89.4,
cy:630,
r:10
},
zlevel:2,
draggable:'true',
ondragend:dragFunc,
invisible:false
}],
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
symbol:['pin',null],
symbolSize:[30,40],
data: [
{xAxis:0}
]
}
}
]
};
function dragFunc(){
var data0 = myChart.convertFromPixel('grid',[this.position[0],this.position[1]])[0];
myChart.setOption(
{
series:
[
{
markLine:{
data:[{
xAxis:data0
}]

                }
                
            }
        ]
        
    }
);

}
`

@Robotboy36

This comment has been minimized.

Show comment
Hide comment
@Robotboy36

Robotboy36 Feb 23, 2017

@sevenen 非常感谢,我试试先

@sevenen 非常感谢,我试试先

@100pah

This comment has been minimized.

Show comment
Hide comment

@100pah 100pah closed this Apr 5, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment