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