echarts定时加载动画数据
生活随笔
收集整理的這篇文章主要介紹了
echarts定时加载动画数据
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先看看效果:
?
接下在看看代碼:
?
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script><script type="text/javascript" src="js/echarts.min.js" ></script> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小(寬高)的Dom --><div id="main" style="width: 600px;height:400px;"></div></body><script type="text/javascript">function charts1(){// 基于準(zhǔn)備好的dom,初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));//清楚畫(huà)布 myChart.clear();// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: 'ECharts 入門(mén)示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},//動(dòng)畫(huà)加載時(shí)長(zhǎng)為3秒animationDuration: 3000,series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option)}charts1(); setInterval(charts1, 3000);</script></html>?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的echarts定时加载动画数据的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: C 语言简单编程速成
- 下一篇: echarts中国地图线性动画特效