Newer
Older
urbanLifeline_YanAn / src / components / Echarts / barChart.vue
@zhangqy zhangqy on 3 Oct 2 KB first commit
  1. <template>
  2. <div :id="id" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script setup>
  5. import { guid } from "@/utils/ruoyi";
  6. const { proxy } = getCurrentInstance();
  7. const id = guid();
  8. const myChart = shallowRef("");
  9. const props = defineProps({
  10. //刷新标志
  11. refresh: {
  12. type: [String, Number],
  13. default: 1,
  14. },
  15. //数据
  16. echartData: {
  17. type: Object,
  18. default: {},
  19. },
  20. //标题
  21. title: {
  22. type: String,
  23. default: "",
  24. },
  25. //X轴type
  26. xAxisType: {
  27. type: String,
  28. default: "category",
  29. },
  30. //Y轴type
  31. yAxisType: {
  32. type: String,
  33. default: "value",
  34. },
  35. //是否堆叠
  36. stack: {
  37. type: String,
  38. default: "",
  39. },
  40. //图列的排列方式
  41. legend: {
  42. type: Object,
  43. default: {
  44. top: "2%",
  45. orient: "horizontal", //horizontal
  46. left: "center", //left ,center
  47. },
  48. },
  49. //Y轴标题名称
  50. yAxisName: {
  51. type: String,
  52. default: "",
  53. },
  54. //X轴标题
  55. xAxisName: {
  56. type: String,
  57. default: "",
  58. },
  59. });
  60.  
  61. watch(
  62. () => props.refresh,
  63. (value) => {
  64. //先销毁实例
  65. myChart.value && myChart.value.dispose();
  66. intChart();
  67. }
  68. );
  69.  
  70. //自适应
  71. function resizeTheChart() {
  72. if (myChart.value) {
  73. myChart.value.resize();
  74. }
  75. }
  76. //初始化
  77. function intChart() {
  78. myChart.value = proxy.echarts.init(document.getElementById(id));
  79. // 绘制图表
  80. myChart.value.setOption({
  81. title: { text: props.title },
  82. tooltip: {
  83. trigger: "axis",
  84. showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
  85. axisPointer: {
  86. // 坐标轴指示器,坐标轴触发有效
  87. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  88. },
  89. },
  90. grid: {
  91. left: "3%",
  92. right: "7%",
  93. top: "25%",
  94. bottom: "3%",
  95. containLabel: true,
  96. },
  97. legend: props.legend,
  98. xAxis: {
  99. type: props.xAxisType,
  100. boundaryGap: [0, 0.01],
  101. data: props.echartData.xAxisData,
  102. name: props.xAxisName,
  103. axisLabel: {
  104. textStyle: {
  105. color: "#222",
  106. },
  107. },
  108. },
  109. yAxis: {
  110. type: props.yAxisType,
  111. data: props.echartData.yAxisData,
  112. name: props.yAxisName,
  113. minInterval: 1,
  114. nameTextStyle: {
  115. color: "#222",
  116. fontSize: 12,
  117. },
  118. axisLabel: {
  119. textStyle: {
  120. color: "#222", //字体颜色
  121. fontSize: 12, //字体大小
  122. },
  123. },
  124. },
  125. series: props.echartData.seriesData,
  126. });
  127. }
  128. onMounted(() => {
  129. intChart();
  130. window.addEventListener("resize", resizeTheChart);
  131. });
  132. </script>