饼图设计 可自动跳转

闻人浩波
2023-12-01

function setrelitu3(relitu3){
     var relitu3Chart = echarts.init(relitu3);
     var app = {};
     option = {
         title:{
             text:'总体控制评价',
             left:'center'
         },
         tooltip:{
             trigger:'item',
             formatter:'{a}<br/>{b}:{c}{d}%'
         },
         legend:{
             orient:'vertical', //图例列表的布局朝向。'horizontal''vertical'
             left:'left',
             data:['优','良','中','差']
         },
         color: ['#99FFCC', '#CC6666', '#FFFF66', '#FF0066'],
         series:[
             {
                 name:'总体控制评价',
                 type:'pie',
                 radius:'55%',
                 center:['50%','60%'],
                 data:[
                     {value:335,name:'优'},
                     {value:310,name:'良'},
                     {value:234,name:'中'},
                     {value:135,name:'差'},
                 ],
                 emphasis:{
                     itemStyle:{
                         shadowBlur:10,
                         shadowOffsetX:0,
                         shadowColor:'rgba(0,0,0,0.5)'
                     }
                 }
             }
         ]
     };
     
     app.currentIndex = -1;

     setInterval(() => {
         var dataLen = option.series[0].data.length;
         //取消之前高亮的图形
         relitu3Chart.dispatchAction({
             type:'downplay',
             seriesIndex:0,
             dataIndex:app.currentIndex
         });
         app.currentIndex = (app.currentIndex + 1) % dataLen;
         //高亮当前图形
         relitu3Chart.dispatchAction({
             type:'highlight',
             seriesIndex:0,
             dataIndex:app.currentIndex
         });
         //显示tooltip
         relitu3Chart.dispatchAction({
             type:'showTip',
             seriesIndex:0,
             dataIndex:app.currentIndex
         })
     }, 1500);
     relitu3Chart.setOption(option);
    
    
}

 类似资料: