Newer
Older
KaiFengPC / src / views / project / projectIndex / queryChat.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.  
  7. const assetEchart = ref(null);
  8. let {
  9. data: {
  10. xData,
  11. legend,
  12. yData: { contractCount, paymentMoney, contractMoney },
  13. },
  14. } = defineProps(['data']);
  15. let options = reactive({
  16. tooltip: {
  17. trigger: 'axis',
  18. axisPointer: {
  19. type: 'cross',
  20. crossStyle: {
  21. color: '#fff',
  22. },
  23. },
  24. },
  25. legend: {
  26. data: legend,
  27. textStyle: {
  28. color: '#c6c6c6',
  29. },
  30. },
  31. grid: {
  32. left: '3%',
  33. right: '3%',
  34. bottom: '5%',
  35. containLabel: true,
  36. },
  37. xAxis: [
  38. {
  39. type: 'category',
  40. data: xData,
  41. axisPointer: {
  42. type: 'shadow',
  43. },
  44. axisLabel: {
  45. color: '#fff',
  46. },
  47. },
  48. ],
  49. yAxis: [
  50. {
  51. type: 'value',
  52. name: '数量',
  53. min: 0,
  54. interval: 10,
  55. axisLabel: {
  56. formatter: '{value}',
  57. color: '#fff',
  58. },
  59. },
  60. {
  61. type: 'value',
  62. name: legend[2],
  63. interval: 5,
  64. axisLabel: {
  65. formatter: '{value}',
  66. color: '#fff',
  67. },
  68. },
  69. ],
  70. series: [
  71. {
  72. barWidth: '18px',
  73. name: legend[0],
  74. type: 'bar',
  75. tooltip: {
  76. valueFormatter: function (value) {
  77. return value;
  78. },
  79. },
  80. data: paymentMoney,
  81. itemStyle: {
  82. color: '#0f69ff',
  83. },
  84. },
  85. {
  86. name: legend[1],
  87. type: 'line',
  88. yAxisIndex: 1,
  89. tooltip: {
  90. valueFormatter: function (value) {
  91. return value;
  92. },
  93. },
  94. data: contractMoney,
  95.  
  96. smooth: true,
  97. itemStyle: {
  98. normal: {
  99. color: '#ffa773', //折线点的颜色
  100. borderColor: '#fff', //拐点边框颜色
  101. borderWidth: 5, //拐点边框大小
  102. },
  103. },
  104. lineStyle: {
  105. color: '#ffa773', //折线的颜色
  106. },
  107. },
  108. ],
  109. });
  110. onMounted(() => {
  111. const chart = init(assetEchart.value);
  112. chart.setOption(options);
  113. window.addEventListener('resize', () => {
  114. chart.resize();
  115. });
  116. });
  117. </script>
  118.  
  119. <style lang="scss" scoped>
  120. .asset_echart {
  121. // width: 530px;
  122. height: calc(100% - 20px);
  123. // margin: 10px 14px 0 16px;
  124. // padding: 24px;
  125. &_echart {
  126. width: 100%;
  127. height: 100%;
  128. }
  129. }
  130. </style>