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控制 #5039

Closed
amykiki opened this issue Feb 9, 2017 · 3 comments
Closed

不同实例可否有不同的tooltip控制 #5039

amykiki opened this issue Feb 9, 2017 · 3 comments

Comments

@amykiki
Copy link

amykiki commented Feb 9, 2017

One-line summary [问题简述]

不同实例可否有不同的tooltip控制
有一个堆叠类目轴,一个饼图。
如果把tooltip的trigger方式设置为item,那么类目轴tooltip触发的时候,只显示一个item的值,不能显示堆叠的各项目值。饼图tooltip可以正常显示
如果把tooltip的trigger方式设置为axis,类目轴tooltip触发的是,可以显示堆叠各项目值,但饼图tooltip就无法显示了.

是否能让类目轴和饼图tooltip不一样。那么类目轴tooltip触发方式是axis,饼图触发方式为item

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:
    3.4

  • Browser version [浏览器类型和版本]:
    chrome 56.0.2924.87

  • OS Version [操作系统类型和版本]:
    win7 64位

Expected behaviour [期望结果]

不同图例组件有不同tooltip设置,方便控制

ECharts option [ECharts配置项]

option = {
backgroundColor: "#344b58",
    "title": {
        "text": "本年商场顾客男女人数统计",
        "subtext": "test",
        x: "4%",

        textStyle: {
            color: '#fff',
            fontSize: '22'
        },
        subtextStyle: {
            color: '#90979c',
            fontSize: '16',

        },
    },
    // 类目轴希望的trigger方式
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#fff"
            }

        },
    },
    // 饼图希望的trigger方式
    /*"tooltip": {
        "trigger": "item",
    },*/
    "grid": {
        "borderWidth": 0,
        "top": 110,
        "bottom": 95,
        "right": "40%",
        textStyle: {
            color: "#fff"
        }
    },
    "legend": {
        x: '4%',
        top: '11%',
        textStyle: {
            color: '#90979c',
        },
        "data": ['女', '男', '平均']
    },
     

    "calculable": true,
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: '#90979c'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "data": ["1月份", "2月份", "3月份", "4月份", "5月份", "6月份", "7月份"],
    }],
    "yAxis": [{
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            lineStyle: {
                color: '#90979c'
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "splitArea": {
            "show": false
        },

    }],
  
    "series": [{
            "name": "女",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
                "normal": {
                    "color": "rgba(255,144,128,1)",
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#fff"
                        },
                        "position": "insideTop",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [
                709,
                1917,
                2455,
                2610,
                1719,
                1433,
                1544,
                /*3285,
                5208,
                3372,
                2484,
                4078*/
            ],
        },

        {
            "name": "男",
            "type": "bar",
            "stack": "总量",
            "itemStyle": {
                "normal": {
                    "color": "rgba(0,191,183,1)",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [
                327,
                1776,
                507,
                1200,
                800,
                482,
                204,
               /* 1390,
                1001,
                951,
                381,
                220*/
            ]
        },
         {
             name: '访问来源',
            type: 'pie',
            radius : '25%',
            center: ['75%', '30%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
         }
    ]
}

Other comments [其他信息]

@sevenen
Copy link

sevenen commented Feb 9, 2017

你可以直接在pie图里面写tooltip:{trigger:'item'}就行
这个应该是为了兼容echarts2留下的吧。以前每个系列都有自己的tooltip。不知道以后还能不能用。

@amykiki
Copy link
Author

amykiki commented Feb 9, 2017

谢谢。刚刚试了,这种方法可以。以前没有用过echarts2,不知道这个用法。谢谢了。这个问题困扰了我好几天。

@amykiki amykiki closed this as completed Feb 9, 2017
@100pah
Copy link
Member

100pah commented Apr 5, 2017

v3.5 对这个功能已支持。

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