left2_3.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. //军事训练情况--参训人次
  2. var myChart1 = echarts.init(document.getElementById('left2_3'), 'vintage');
  3. var names = ['优良','及格', '未及格'];
  4. var values = [547, 50,20];
  5. // 计算总数
  6. var total = values.reduce((p, v) => {
  7. return p + v;
  8. }, 0);
  9. var colorList = [
  10. "#f0422a",
  11. "#00f0ff",
  12. "#e6923e",
  13. ];
  14. var data = [];
  15. for (var i = 0; i < names.length; i++) {
  16. data.push({
  17. name: names[i],
  18. value: values[i],
  19. });
  20. }
  21. data.reverse();
  22. // 公用调整
  23. var itemStyle = {
  24. normal: {
  25. color: function (params) {
  26. return colorList[params.dataIndex];
  27. },
  28. },
  29. };
  30. var leftCenter = ['45%', '50%'];
  31. var radius1 = ['0', '35%']; // 饼图
  32. var radius3 = ['40%', '41%']; // 线圈
  33. // 公用调整-end
  34. option = {
  35. title: {
  36. text: '参训人次',
  37. bottom:35,
  38. left: 75,
  39. textStyle: {
  40. color: '#fff',
  41. fontSize: 12,
  42. },
  43. },
  44. tooltip: {
  45. trigger: 'item',
  46. formatter: "{a} <br/>{b} : {c}人 ({d}%)",
  47. },
  48. series: [
  49. {
  50. name: "参训人次",
  51. type: 'pie',
  52. zlevel: 3,
  53. radius: radius1,
  54. center: leftCenter,
  55. // itemStyle: itemStyle,
  56. itemStyle: {
  57. normal: {
  58. color: function (params) {
  59. return colorList[params.dataIndex];
  60. },
  61. },
  62. },
  63. labelLine: {
  64. show: false,
  65. normal: {
  66. length: 5,
  67. length2: 0,
  68. lineStyle: {
  69. color: 'transparent',
  70. },
  71. },
  72. },
  73. label: {
  74. normal: {
  75. formatter: (params) => {
  76. return '●';
  77. },
  78. textStyle: {
  79. color: '#00f0ff',
  80. fontSize: 12,
  81. },
  82. },
  83. },
  84. data: data,
  85. },
  86. {
  87. // 最外圆圈
  88. type: 'pie',
  89. zlevel: 1,
  90. silent: true, //取消高亮
  91. radius: radius3,
  92. center: leftCenter,
  93. itemStyle: {
  94. normal: {
  95. color: function (params) {
  96. return colorList[params.dataIndex];
  97. },
  98. },
  99. },
  100. labelLine: {
  101. show: false,
  102. normal: {
  103. length: 10,
  104. length2: 0,
  105. lineStyle: {
  106. color: 'transparent',
  107. },
  108. },
  109. },
  110. label: {
  111. show: true,
  112. textStyle: {
  113. color: '#00f0ff',
  114. fontSize: 12,
  115. fontWeight:'bolder'
  116. },
  117. },
  118. data: data,
  119. },
  120. ],
  121. };
  122. myChart1.setOption(option);