Newer
Older
KaiFengPC / src / views / project / projectIndex / homeEcharts.vue
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. <template>
  2. <div ref="assetEchart" class="asset_echart"></div>
  3. </template>
  4. <script setup>
  5. import { init } from 'echarts';
  6. const assetEchart = ref(null);
  7. let {
  8. data: { type, xData, center, padding, itemStyle, x, y },
  9. } = defineProps(['data']);
  10. console.log('xData', xData);
  11. const all = xData.reduce((n, v) => {
  12. return n + v.value;
  13. }, 0);
  14. const initM = () => {
  15. const chart = init(assetEchart.value);
  16. window.addEventListener('resize', () => {
  17. chart.resize();
  18. });
  19. chart.setOption({
  20. title: {
  21. text: all + '(个)',
  22. subtext: '总数',
  23. x,
  24. y,
  25. textStyle: {
  26. fontSize: 16,
  27. fontWeight: 'normal',
  28. color: '#fff',
  29. },
  30. subtextStyle: {
  31. fontSize: 20,
  32. fontWeight: 'normal',
  33. align: 'center',
  34. color: '#fff',
  35. },
  36. },
  37. tooltip: {
  38. // formatter: `{a} {c} <br/> {b}({d}%)`,
  39. formatter: params => {
  40. return params.name + ': ' + params.value + '(个)' + '<br/>' + '占比:' + ((params.value / all) * 100).toFixed(2) + '%';
  41. },
  42. padding: [10, 10],
  43. axisPointer: {
  44. type: 'shadow',
  45. shadowStyle: {
  46. color: 'rgba(67,100,247,0.08)',
  47. },
  48. },
  49. },
  50. legend: {
  51. icon: 'circle',
  52. align: 'left',
  53. orient: 'vertical',
  54. x: 'right',
  55. y: 'center',
  56. padding,
  57. show: false,
  58. formatter: function (name) {
  59. let total = 0;
  60. let tarValue;
  61. let arr = name;
  62. for (let i = 0; i < xData.length; i++) {
  63. total += xData[i].value;
  64. // if (name.length > 20) {
  65. // name =name.slice(20, name.length) + "...";
  66. // xData[i].name=arr.slice(20, arr.length) + "...";
  67. // }
  68. if (xData[i].name == name) {
  69. tarValue = xData[i].value;
  70. }
  71. }
  72. return `${name} ${tarValue}(个)`;
  73. },
  74. },
  75.  
  76. series: [
  77. {
  78. avoidLabelOverlap: 10,
  79. label: {
  80. show: true, // 设置为false,否则会重复
  81. },
  82. emphasis: {
  83. label: {
  84. show: false, // 显示
  85. },
  86. },
  87. labelLine: {
  88. show: true,
  89. },
  90. type,
  91. // name: xData[0].name,
  92. radius: ['40%', '70%'],
  93. center,
  94. data: xData,
  95. itemStyle,
  96. },
  97. ],
  98. });
  99. };
  100. onMounted(() => {
  101. initM();
  102. });
  103. </script>
  104.  
  105. <style lang="scss" scoped>
  106. .asset_echart {
  107. // width: 498px;
  108. height: calc(100% - 20px);
  109. // margin: 10px 14px 0 16px;
  110.  
  111. &_echart {
  112. width: 100%;
  113. height: 100%;
  114. }
  115. }
  116. </style>