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