Newer
Older
DH_Apicture / src / components / Echarts / lineChart copy.vue
@zhangqy zhangqy on 29 Nov 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.  
  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. // let shiDuMax = Math.max(...props.data.ydata2);
  46. // let shiDuMin = Math.min(...props.data.ydata2);
  47. // //温度的最大值和最小值
  48. // let temMax = Math.max(...props.data.ydata1);
  49. // let temMin = Math.min(...props.data.ydata1);
  50.  
  51. // 绘制图表
  52. myChart.value.setOption({
  53. tooltip: {
  54. trigger: "axis",
  55. position: function (pt) {
  56. return [pt[0], "10%"];
  57. },
  58. },
  59. title: {
  60. left: "left",
  61. text: props.title,
  62. top: 10,
  63. bottom: 10,
  64. left: 10,
  65. textStyle: {
  66. color: "#545E75", //字体颜色
  67. fontSize: 16, //字体大小
  68. },
  69. },
  70. grid: {
  71. left: "3%",
  72. right: "7%",
  73. top: "15%",
  74. bottom: "15%",
  75. containLabel: true,
  76. },
  77. toolbox: {
  78. // feature: {
  79. // dataZoom: {
  80. // yAxisIndex: "none",
  81. // },
  82. // restore: {},
  83. // saveAsImage: {},
  84. // },
  85. },
  86. xAxis: {
  87. type: "category",
  88. boundaryGap: false,
  89. data: props.echartData.xAxisData,
  90. },
  91. yAxis: {
  92. type: "value",
  93. boundaryGap: [0, "100%"],
  94. },
  95. dataZoom: [
  96. {
  97. type: "inside",
  98. start: 0,
  99. end: 10,
  100. },
  101. {
  102. start: 0,
  103. end: 10,
  104. },
  105. ],
  106. series: [
  107. {
  108. name: props.echartData.seriesName,
  109. type: "line",
  110. symbol: "none",
  111. sampling: "lttb",
  112. itemStyle: {
  113. color: "rgb(255, 70, 131)",
  114. },
  115. areaStyle: {
  116. color: proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  117. {
  118. offset: 0,
  119. color: "rgb(255, 158, 68)",
  120. },
  121. {
  122. offset: 1,
  123. color: "rgb(255, 70, 131)",
  124. },
  125. ]),
  126. },
  127. data: props.echartData.seriesData,
  128. },
  129. ],
  130. });
  131. }
  132. onMounted(() => {
  133. intChart();
  134. window.addEventListener("resize", resizeTheChart);
  135. });
  136. </script>