pie.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. (function () {
  2. 'use strict';
  3. var myChart = echarts.init(document.getElementById('left-mid-nong'));
  4. // 指定图表的配置项和数据
  5. var option = {
  6. tooltip: {},
  7. legend: [{
  8. // 设置布局方向
  9. orient: 'vertical',
  10. // 文字和图形对齐方式
  11. align: 'left',
  12. right: '25%',
  13. top: '10%',
  14. // 图形形状
  15. icon: 'circle',
  16. padding: [20, 0, 0, 0],
  17. itemGap: 20,
  18. textStyle: {
  19. borderRadius: 100,
  20. color:'#fff'
  21. },
  22. data: ["荔枝", '黄瓜', "白菜", "蘑菇", "草莓"]
  23. },
  24. {
  25. orient: 'vertical',
  26. right: '6%',
  27. top: '10%',
  28. padding: [20, 0, 0, 0],
  29. itemGap: 20,
  30. // 文字和图形对齐方式
  31. align: 'left',
  32. // 图形形状
  33. icon: 'circle',
  34. textStyle: {
  35. borderRadius: 100,
  36. color:'#fff'
  37. },
  38. data: ["南果梨", "大葱", "西瓜", "花生", "棚"]
  39. }
  40. ],
  41. series: [{
  42. name: '销量',
  43. type: 'pie',
  44. radius: '50%',
  45. right: '40%',
  46. bottom:'10%',
  47. data: [{
  48. value: 200,
  49. name: '荔枝'
  50. },
  51. {
  52. value: 156,
  53. name: '黄瓜'
  54. },
  55. {
  56. value: 400,
  57. name: '白菜'
  58. },
  59. {
  60. value: 991,
  61. name: '蘑菇'
  62. },
  63. {
  64. value: 332,
  65. name: '草莓'
  66. },
  67. {
  68. value: 100,
  69. name: '南果梨'
  70. },
  71. {
  72. value: 455,
  73. name: '大葱'
  74. },
  75. {
  76. value: 378,
  77. name: '西瓜'
  78. },
  79. {
  80. value: 230,
  81. name: '花生'
  82. },
  83. {
  84. value: 50,
  85. name: '棚'
  86. }
  87. ]
  88. }]
  89. };
  90. // 使用刚指定的配置项和数据显示图表。
  91. myChart.setOption(option);
  92. window.addEventListener('resize',function(){
  93. myChart.resize();
  94. })
  95. })()