01.饼图.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>01.饼图</title>
  8. <script src="lib/echarts.min.js"></script>
  9. </head>
  10. <body>
  11. <div style="width: 600px;height:400px"></div>
  12. <script>
  13. //1.是ECharts最基本的代码结构
  14. //2、准备数据[{name:???,value:???},{}]
  15. //3、将type的值设置为pie
  16. var mCharts = echarts.init(document.querySelector("div"))
  17. //pieData就是需要设置给饼图的数据,数组,数组中包含一个有一个的对象,每一个对象中,需要有name和value
  18. var pieData = [
  19. {
  20. name:'淘宝',
  21. value:1121
  22. },
  23. {
  24. name:'京东',
  25. value:2103
  26. },
  27. {
  28. name:'唯品会',
  29. value:120
  30. },
  31. {
  32. name:'苏宁易购',
  33. value:522
  34. }
  35. ]
  36. var option = {
  37. series:[
  38. {
  39. type:'pie',
  40. data:pieData
  41. }
  42. ]
  43. }
  44. mCharts.setOption(option)
  45. </script>
  46. </body>
  47. </html>