关于Echarts的显示问题,求助大神啊

baymax123 2018-05-16 02:22:57
目前想做这么一个功能,就是利用echarts的饼图,做一个自动动的图像,每隔1000毫秒扇形区域就会向上弹一下,同时出发高亮显示的文字信息,目前人资信息就是不自动显示,只有鼠标移上去才显示,目前效果如图:

想要的效果如图:


我贴上我的代码:
const myChart_pie = echarts.init(document.getElementById('main_pie'));
var canvas = document.createElement('canvas');
var count = 0;
var data = this.data;
const option_pie = {
series: [
{
type:'pie',
radius: [0, '0%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data:data
},
{
type:'pie',
radius: ['40%', '55%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
},
color: '#fff',
formatter: "{b}\n({d}%)"
}
},
data:data
}]
};
setInterval (function() {
var r = count % data.length;
option_pie.series[0].data[r].selected = false;
option_pie.series[1].data[r].selected = false;
count++;
var s = count % data.length;
option_pie.series[0].data[s].selected = true;
option_pie.series[1].data[s].selected = true;
myChart_pie.setOption(option_pie,true);
}, 1000);
...全文
1053 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
2018-05-20
  • 打赏
  • 举报
回复
自动触发事件

app.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:548, name:'搜索引擎'}
            ]
        }
    ]
};

var index = 0, prev = -1, max = 5;
setInterval(function(){
    if(prev >= 0){
        myChart.dispatchAction({
            type: 'pieUnSelect',
            seriesIndex: 0,
            dataIndex: prev
        });
    }
    myChart.dispatchAction({
        type: 'pieSelect',
        seriesIndex: 0,
        dataIndex: index
    });
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
    });
    prev = index;
    if(++index >= max){
        index = 0;
    }
}, 1000);

baymax123 2018-05-16
  • 打赏
  • 举报
回复
自己再顶一下
baymax123 2018-05-16
  • 打赏
  • 举报
回复
哇,就这样沉了吗?
baymax123 2018-05-16
  • 打赏
  • 举报
回复
大神都不在吗?急啊,在线等

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧