简体   繁体   中英

echarts.js pie chart tooltip on hover not working

I have pie chart using echarts.min.js . Problem is on hovering, tooltip is not showing. My code is

var echartPie = echarts.init(document.getElementById('mediaUserChart'));

    echartPie.setOption({

        tooltip: {
            trigger: 'item',
            formatter: "{a} - {b} : {c} ({d}%)"


        },
        hover:true,
        legend: {

            x: 'center',
            y: 'bottom',
            data:

            ['others', 'just dial', 'trade india', 'india mart']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore: {
                    show: false,
                    title: "Restore"
                },
                saveAsImage: {
                    show: false,
                    title: "Save Image"
                }
            }
        },
        calculable: true,
        series: [{
            name: 'Media Users',
            type: 'pie',
            radius: '55%',
            center: ['50%', '48%'],
            data:

                [{
            value: 335,
            name: 'others'
        }, {
            value: 234,
            name: 'just dial'
        }, {
            value: 135,
            name: 'trade india'
        }, {
            value: 1548,
            name: 'india mart'
        }]

        }]
    });

I used tooltip option here. still its not showing tooltip. Can anybody knows the solution for this problem ?

https://jsfiddle.net/n8rvq66r/

我将<canvas id="mediaUserChart" ></canvas>更改为<div id="mediaUserChart" style="height:350px;"></div>它对我<div id="mediaUserChart" style="height:350px;"></div> ...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM