Newer
Older
KaiFengPC / src / components / Echarts / lineOneChart.vue
@zhangdeliang zhangdeliang on 23 May 3 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.  
  13. const props = defineProps({
  14. //刷新标志
  15. refresh: {
  16. type: [String, Number],
  17. default: 1,
  18. },
  19. //标题
  20. title: {
  21. type: String,
  22. default: '',
  23. },
  24. //数据
  25. echartData: {
  26. type: Object,
  27. default: {},
  28. },
  29. });
  30. watch(
  31. () => props.refresh,
  32. value => {
  33. //先销毁实例
  34. myChart.value && myChart.value.dispose();
  35. setTimeout(() => {
  36. intChart();
  37. });
  38. },
  39. { immediate: true }
  40. );
  41.  
  42. //自适应
  43. function resizeTheChart() {
  44. if (myChart.value) {
  45. myChart.value.resize();
  46. }
  47. }
  48. function intChart() {
  49. myChart.value = proxy.echarts.init(document.getElementById(id));
  50. myChart.value.clear();
  51. // 绘制图表
  52. myChart.value.setOption({
  53. color: pinias.$state.chartColor,
  54. tooltip: {
  55. trigger: 'axis',
  56. confine: true, //是否将 tooltip 框限制在图表的区域内
  57. },
  58. dataZoom: [
  59. { type: 'slider', start: 10, end: 60 }, // start 左边在 10% 的位置 end 右边在 60% 的位置
  60. { type: 'inside', start: 10, end: 60 }, //鼠标控制滚轮缩放
  61. ],
  62. // 显示暂无数据
  63. graphic: {
  64. type: 'text', // 类型:文本
  65. left: 'center',
  66. top: 'middle',
  67. silent: true, // 不响应事件
  68. invisible: props.echartData.xAxisData.length > 0 ? true : false, // 有数据就隐藏
  69. style: {
  70. fill: '#c6c6c6',
  71. fontWeight: 'bold',
  72. text: '暂无数据',
  73. fontFamily: 'Microsoft YaHei',
  74. fontSize: '18px',
  75. },
  76. },
  77. title: {
  78. left: 'left',
  79. text: '',
  80. top: 10,
  81. bottom: 10,
  82. left: 10,
  83. textStyle: {
  84. color: '#545E75', //字体颜色
  85. fontSize: 16, //字体大小
  86. },
  87. },
  88. grid: {
  89. left: '5%',
  90. right: '7%',
  91. top: '10%',
  92. bottom: '14%',
  93. containLabel: true,
  94. },
  95. legend: {
  96. top: '2%',
  97. orient: 'horizontal', //horizontal
  98. left: 'center', //left ,center
  99. textStyle: {
  100. color: 'inherit',
  101. },
  102. },
  103. xAxis: [
  104. {
  105. type: 'category',
  106. boundaryGap: false,
  107. data: props.echartData.xAxisData,
  108. axisLabel: {
  109. color: '#c6c6c6',
  110. },
  111. axisLine: {
  112. lineStyle: {
  113. color: '#066592',
  114. },
  115. },
  116. },
  117. ],
  118. yAxis: [
  119. {
  120. name: props.echartData.yAxisName,
  121. type: 'value',
  122. nameLocation: 'end', // 坐标轴名称显示位置
  123. nameGap: 15, // 坐标轴名称与轴线之间的距离
  124. nameTextStyle: {
  125. color: '#c6c6c6', //字体颜色
  126. fontSize: 12, //字体大小
  127. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  128. },
  129. axisLabel: {
  130. color: '#c6c6c6',
  131. },
  132. splitLine: {
  133. lineStyle: {
  134. type: 'dashed',
  135. color: '#066592',
  136. },
  137. },
  138. },
  139. ],
  140. series: props.echartData.seriesData,
  141. });
  142. }
  143. onMounted(() => {
  144. window.addEventListener('resize', resizeTheChart);
  145. });
  146. </script>