pie.js 2.6 KB

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