Newer
Older
DH_Apicture / src / components / Echarts / sevenDayWeatherLine.vue
@zhangqy zhangqy on 29 Nov 3 KB first commit
  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 { nextTick } from "vue";
  8. const { proxy } = getCurrentInstance();
  9. const id = guid();
  10. const myChart = shallowRef("");
  11. const props = defineProps({
  12. //刷新标志
  13. refresh: {
  14. type: [String, Number],
  15. default: 1,
  16. },
  17. //数据
  18. data: {
  19. type: Object,
  20. default: {},
  21. },
  22. });
  23.  
  24. watch(
  25. () => props.data,
  26. (value) => {
  27. //先销毁实例
  28. myChart.value && myChart.value.dispose();
  29. init();
  30. },
  31. {
  32. deep: true,
  33. }
  34. );
  35.  
  36. function init() {
  37. myChart.value = proxy.echarts.init(document.getElementById(id));
  38. console.log(myChart.value);
  39. var option = {
  40. xAxis: {
  41. type: "category",
  42. data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  43. boundaryGap: false,
  44. axisTick: {
  45. show: false, // 不显示坐标轴刻度线
  46. },
  47. axisLine: {
  48. show: false, // 不显示坐标轴线
  49. },
  50. axisLabel: {
  51. show: false, // 不显示坐标轴上的文字
  52. },
  53. splitLine: {
  54. show: false, // 不显示网格线
  55. },
  56. },
  57. grid: {
  58. left: "40px",
  59. right: "40px",
  60. top: "35px",
  61. bottom: "20px",
  62. },
  63. yAxis: {
  64. type: "value",
  65. axisTick: {
  66. show: false, // 不显示坐标轴刻度线
  67. },
  68. axisLine: {
  69. show: false, // 不显示坐标轴线
  70. },
  71. axisLabel: {
  72. show: false, // 不显示坐标轴上的文字
  73. },
  74. splitLine: {
  75. show: false, // 不显示网格线
  76. },
  77. },
  78.  
  79. series: [
  80. {
  81. data: props.data.ydata2,
  82. type: "line",
  83. lineStyle: {
  84. color: "#FF9C40",
  85. },
  86. itemStyle: {
  87. normal: {
  88. color: "#FF9C40", //折点颜色
  89. label: {
  90. show: true, //是否显示
  91. position: "top", //显示在顶部
  92. textStyle: {
  93. color: "#FF9C40", //字体颜色
  94. fontSize: 12, //字体大小
  95. fontFamily: "Source Han Sans CN",
  96. },
  97. formatter: "{c}℃",
  98. },
  99. },
  100. },
  101. smooth: true,
  102. },
  103. {
  104. data: props.data.ydata1,
  105. type: "line",
  106. lineStyle: {
  107. color: "#7EC1FF",
  108. },
  109. itemStyle: {
  110. normal: {
  111. color: "#7EC1FF", //折点颜色
  112. label: {
  113. show: true, //是否显示
  114. position: "bottom",
  115. textStyle: {
  116. color: "#7EC1FF", //字体颜色
  117. fontSize: 12, //字体大小
  118. fontFamily: "Source Han Sans CN",
  119. },
  120. formatter: "{c}℃",
  121. },
  122. },
  123. },
  124. smooth: true,
  125. },
  126. ],
  127. };
  128.  
  129. option && myChart.value.setOption(option);
  130. }
  131.  
  132. function resizeTheChart() {
  133. if (myChart.value) {
  134. myChart.value.resize();
  135. }
  136. }
  137. onMounted(() => {
  138. nextTick(() => {
  139. init();
  140. window.addEventListener("resize", resizeTheChart);
  141. });
  142. });
  143. </script>