left2_2.js 2.9 KB

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