Newer
Older
DH_Apicture / src / components / Echarts / lineChart.vue
@zhangqy zhangqy on 29 Nov 4 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.  
  10. const props = defineProps({
  11. //刷新标志
  12. refresh: {
  13. type: [String, Number],
  14. default: 1,
  15. },
  16. //标题
  17. title: {
  18. type: String,
  19. default: '',
  20. },
  21. //数据
  22. echartData: {
  23. type: Object,
  24. default: {},
  25. },
  26. });
  27. watch(
  28. () => props.refresh,
  29. value => {
  30. //先销毁实例
  31. myChart.value && myChart.value.dispose();
  32. intChart();
  33. }
  34. );
  35.  
  36. //自适应
  37. function resizeTheChart() {
  38. if (myChart.value) {
  39. myChart.value.resize();
  40. }
  41. }
  42. function intChart() {
  43. myChart.value = proxy.echarts.init(document.getElementById(id));
  44. // 绘制图表
  45. myChart.value.setOption({
  46. tooltip: {
  47. trigger: 'axis',
  48. confine: true, //是否将 tooltip 框限制在图表的区域内
  49. },
  50. title: {
  51. left: 'left',
  52. text: '',
  53. top: 10,
  54. bottom: 10,
  55. left: 10,
  56. textStyle: {
  57. color: '#545E75', //字体颜色
  58. fontSize: 16, //字体大小
  59. },
  60. },
  61. grid: [
  62. {
  63. left: 60,
  64. right: 50,
  65. height: '35%',
  66. },
  67. {
  68. left: 60,
  69. right: 50,
  70. top: '55%',
  71. height: '35%',
  72. },
  73. ],
  74. toolbox: {
  75. feature: {
  76. // dataZoom: {
  77. // yAxisIndex: "none",
  78. // },
  79. // restore: {},
  80. // saveAsImage: {},
  81. },
  82. },
  83. axisPointer: {
  84. link: [
  85. {
  86. xAxisIndex: 'all',
  87. },
  88. ],
  89. },
  90. xAxis: [
  91. {
  92. type: 'category',
  93. boundaryGap: false,
  94. axisLine: { onZero: true },
  95. data: props.echartData.xAxisData,
  96. show: false,
  97. },
  98. {
  99. gridIndex: 1,
  100. type: 'category',
  101. boundaryGap: false,
  102. axisLine: { onZero: true },
  103. data: props.echartData.xAxisData,
  104. position: 'bottom',
  105. },
  106. ],
  107. yAxis: [
  108. {
  109. name: props.echartData.yAxisName1,
  110. type: 'value',
  111. nameLocation: 'end', // 坐标轴名称显示位置
  112. nameGap: 15, // 坐标轴名称与轴线之间的距离
  113. nameTextStyle: {
  114. color: '#545E75', //字体颜色
  115. fontSize: 16, //字体大小
  116. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  117. fontWeight: 'bold',
  118. },
  119. },
  120. {
  121. gridIndex: 1,
  122. name: props.echartData.yAxisName2,
  123. type: 'value',
  124. nameLocation: 'end', // 坐标轴名称显示位置
  125. nameGap: 15, // 坐标轴名称与轴线之间的距离
  126. nameTextStyle: {
  127. color: '#545E75', //字体颜色
  128. fontSize: 16, //字体大小
  129. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  130. fontWeight: 'bold',
  131. },
  132. },
  133. ],
  134. dataZoom: [
  135. {
  136. show: true,
  137. realtime: true,
  138. start: 30,
  139. end: 70,
  140. xAxisIndex: [0, 1],
  141. },
  142. {
  143. type: 'inside',
  144. realtime: true,
  145. start: 30,
  146. end: 70,
  147. xAxisIndex: [0, 1],
  148. },
  149. ],
  150. series: [
  151. {
  152. name: '修复前:' + props.echartData.seriesName,
  153. type: 'line',
  154. symbolSize: 8,
  155. data: props.echartData.seriesData1,
  156. itemStyle: {
  157. color: 'rgb(255, 70, 131)',
  158. },
  159. areaStyle: {
  160. color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  161. {
  162. offset: 0,
  163. color: 'rgb(255, 158, 68)',
  164. },
  165. {
  166. offset: 1,
  167. color: 'rgb(255, 70, 131)',
  168. },
  169. ]),
  170. },
  171. },
  172. {
  173. name: '修复后:' + props.echartData.seriesName,
  174. type: 'line',
  175. xAxisIndex: 1,
  176. yAxisIndex: 1,
  177. symbolSize: 8,
  178. data: props.echartData.seriesData2,
  179. itemStyle: {
  180. color: 'rgb(4, 192, 144)',
  181. },
  182. areaStyle: {
  183. color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  184. {
  185. offset: 0,
  186. color: 'rgb(4, 192, 144)',
  187. },
  188. {
  189. offset: 1,
  190. color: 'rgb(4, 205, 144)',
  191. },
  192. ]),
  193. },
  194. },
  195. ],
  196. });
  197. }
  198. onMounted(() => {
  199. intChart();
  200. window.addEventListener('resize', resizeTheChart);
  201. });
  202. </script>