Skip to content
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
Closed

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

Robotboy36 opened this issue Feb 16, 2017 · 6 comments

Comments

@Robotboy36
Copy link

Robotboy36 commented Feb 16, 2017

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
Copy link
Member

100pah commented Feb 17, 2017

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

@Robotboy36
Copy link
Author

Robotboy36 commented Feb 20, 2017

tooltip句柄

@Robotboy36
Copy link
Author

Robotboy36 commented Feb 22, 2017

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

@sevenen
Copy link

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
Copy link
Author

Robotboy36 commented Feb 23, 2017

@sevenen 非常感谢,我试试先

@100pah
Copy link
Member

100pah commented Apr 5, 2017

v3.5 已支持。参见 http://echarts.baidu.com/demo.html#candlestick-touch

@100pah 100pah closed this as completed Apr 5, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants