echarts饼图自动播放提示案例

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<div class="mod-hd">
	<span>土壤环境</span>
</div>
<div class="mod-bd">
	<div class="pic-wrap2" style="text-align: center;width:100%;height:200px;" id="trhj">
	</div>
</div>
<script>
	$(function(){
		$.getJSON("${ctx}/pages/kit/cockpit/pages/template/home/ajax/cockpitHomeProcessor.jsp",{
			method:"getTrhj"
		} ,function(json){
			console.log(json);
			//legendData
			//data
			var trhj = echarts.init(document.getElementById('trhj'));
			var option_trhj = {
				color : ['#159BFE','#85FD2A','#FFF638','#FF9C33','#FF3D55', '#91b353'],
					/* [ '#9a84f3', '#fbcf6d', '#41d1c9', '#33b4a8', '#76cbfe', '#76a3fd',
			    			'#f9ac5b', '#59affd', '#42d963', '#f86d82', '#b37fd0', '#c79b73',
			    			'#f973cf', '#53afe2', '#91b353' ], */
			    title : {
			        text: '',
			        subtext: '',
			        x:'center',
			        show:false
			    },
			    /* tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    }, */
			    tooltip: {
                    show: true,
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    backgroundColor: '#F7F9FB',
                    borderColor: '#92DAFF',
                    borderWidth: '1px',
                    textStyle:{
                        color:'#000',
                    }
                },
			    legend: {
			    	orient:'horizontal',
			        x : 'center',
			        y : 'bottom',
			        itemWidth : 10,
					itemHeight : 8,
			        textStyle:{
			        	color:'#FFF'
			        },
			        data:json.legendData
			        //['石油','金属','皮革','电子元件','化学原料','钢','水泥及石膏','其他']
			    },
			    series : [
			        {
			            name:'企业数',
			            type:'pie',
			            radius : [20, 80],
			            center : ['60%', '40%'],
			            roseType : 'radius',
			            label: {
			                normal: {
			                    show: false
			                },
			                emphasis: {
			                    show: false
			                }
			            },
			            lableLine: {
			                normal: {
			                    show: false
			                },
			                emphasis: {
			                    show: false
			                }
			            },
			            tooltip:{
							show:true,
							formatter: '{b}\n{d}%',
						},
			            data: json.data
			        }   
			    ]
			};
			trhj.setOption(option_trhj);
			//饼图自动播放
			var currentIndex = 0;
            setInterval(function () {
                var dataLen = option_trhj.series[0].data.length;
                // 取消之前高亮的图形
                trhj.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                currentIndex = (currentIndex + 1) % dataLen;
                // 高亮当前图形
                trhj.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                // 显示 tooltip
                trhj.dispatchAction({ 
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }, 1500);
		});
	});
</script>

请您注意

·自觉遵守：爱国、守法、自律、真实、文明的原则
·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品，NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款