pieDynamic.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="esl.js"></script>
  5. <script src="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. renderer: 'canvas'
  26. });
  27. var randomData = function () {
  28. return [
  29. {value:Math.random().toFixed(3), name:'a'},
  30. {value:Math.random().toFixed(3), name:'b'},
  31. {value:Math.random().toFixed(3), name:'c'},
  32. {value:Math.random().toFixed(3), name:'d'},
  33. {value:Math.random().toFixed(3), name:'e'}
  34. ];
  35. }
  36. var itemStyle = {
  37. normal: {
  38. // shadowBlur: 10,
  39. // shadowOffsetX: 0,
  40. // shadowOffsetY: 5,
  41. // shadowColor: 'rgba(0, 0, 0, 0.4)'
  42. }
  43. };
  44. chart.setOption({
  45. legend: {
  46. data:['a','b','c','d','e']
  47. },
  48. tooltip: {
  49. },
  50. series: [{
  51. name: 'pie',
  52. type: 'pie',
  53. stack: 'all',
  54. symbol: 'circle',
  55. symbolSize: 10,
  56. data: randomData(),
  57. itemStyle: itemStyle
  58. }]
  59. });
  60. setInterval(function () {
  61. chart.setOption({
  62. series: [{
  63. name: 'pie',
  64. data: randomData()
  65. }]
  66. })
  67. }, 1000)
  68. })
  69. </script>
  70. </body>
  71. </html>