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