呱呱工具箱
百度echarts饼图定时跳动
首页
娱乐
便民
开发
游戏
建站
<div id="main" style="width: 100%;height:100vh;"></div> <script src="js/jquery-1.9.0.min.js"></script> <script src="js/echarts.min.js"></script> <script> // 基于准备好的dom,初始化echarts实例 let index = 0; var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']; function fun() { var timer = setInterval(function() { console.log(index) myChart.dispatchAction({ type: 'hideTip', seriesIndex: 0, dataIndex: index }); // 显示提示框 myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); // 取消高亮指定的数据图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index == 0 ? 5 : index - 1 }); myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index }); index++; if (index > 5) { index = 0; } }, 3000) } fun() var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '定时跳动', x: 'center', y: 'center', textStyle: { fontSize: 20, color: '#fff' } }, tooltip: { trigger: 'item' }, series: [{ type: 'pie', center: ['52%', '50%'], radius: ['40%', '60%'], clockwise: true, avoidLabelOverlap: true, hoverOffset: 20, emphasis:{ itemStyle:{ borderColor: '#071a44', borderWidth: 5 } }, itemStyle: { normal: { color: function(params) { return colorList[params.dataIndex] } } }, label: { show: true, position: 'outside', formatter: '{a|{b}:{d}%}\n{hr|}', rich: { hr: { backgroundColor: 't', borderRadius: 3, width: 3, height: 3, padding: [3, 3, 0, -12] }, a: { padding: [-30, 15, -20, 15] } } }, labelLine: { normal: { length: 20, length2: 30, lineStyle: { width: 1 } } }, data: [{ 'name': '北京', 'value': 5600 }, { 'name': '上海', 'value': 3600 }, { 'name': '广州', 'value': 1500 }, { 'name': '深圳', 'value': 2000 }, { 'name': '未知', 'value': 899 }, { 'name': '海外', 'value': 4000 }], }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); </script>
点击运行
还原