pieDynamic.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. </head>
  7. <body>
  8. <style>
  9. html, body, #main {
  10. width: 100%;
  11. height: 100%;
  12. }
  13. </style>
  14. <div id="main"></div>
  15. <button id="random"></button>
  16. <script>
  17. require([
  18. 'echarts'
  19. // 'echarts/chart/pie',
  20. // 'echarts/component/legend',
  21. // 'echarts/component/grid',
  22. // 'echarts/component/tooltip'
  23. ], function (echarts) {
  24. var chart = echarts.init(document.getElementById('main'), null, {
  25. });
  26. var randomData = function () {
  27. return [
  28. {value:Math.random().toFixed(3), name:'a'},
  29. {value:Math.random().toFixed(3), name:'b'},
  30. {value:Math.random().toFixed(3), name:'c'},
  31. {value:Math.random().toFixed(3), name:'d'},
  32. {value:Math.random().toFixed(3), name:'e'}
  33. ];
  34. }
  35. var itemStyle = {
  36. normal: {
  37. // shadowBlur: 10,
  38. // shadowOffsetX: 0,
  39. // shadowOffsetY: 5,
  40. // shadowColor: 'rgba(0, 0, 0, 0.4)'
  41. }
  42. };
  43. chart.setOption({
  44. legend: {
  45. data:['a','b','c','d','e']
  46. },
  47. tooltip: {
  48. },
  49. series: [{
  50. name: 'pie',
  51. type: 'pie',
  52. stack: 'all',
  53. symbol: 'circle',
  54. symbolSize: 10,
  55. data: randomData(),
  56. itemStyle: itemStyle
  57. }]
  58. });
  59. setInterval(function () {
  60. chart.setOption({
  61. series: [{
  62. name: 'pie',
  63. data: randomData()
  64. }]
  65. })
  66. }, 1000)
  67. })
  68. </script>
  69. </body>
  70. </html>