index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <div shadow="never" class="homeBoxCard" v-loading="loading">
  3. <div :style="'height:' + Height" id="worksChartRef" ref="worksChartRef" />
  4. </div>
  5. </template>
  6. <script>
  7. import { computed, defineComponent, onMounted, ref ,watch} from 'vue'
  8. import { useStore } from 'vuex'
  9. import * as echarts from 'echarts'
  10. // import { ChartDataType } from "../../data";
  11. export default defineComponent({
  12. name: 'CurveCom',
  13. props: {
  14. Height: String,
  15. echartsData:Object
  16. },
  17. setup(props) {
  18. const store = useStore()
  19. // 总数
  20. const total = computed(() => store.state.Home.worksChartData.total)
  21. // num
  22. const num = computed(() => store.state.Home.worksChartData.num)
  23. // 读取数据 func
  24. const loading = ref(true)
  25. const getData = async () => {
  26. console.log(props.echartsData.name)
  27. loading.value = false
  28. }
  29. function echarts2(){
  30. let myChart = echarts.init(document.getElementById('worksChartRef'))
  31. // 绘制图表
  32. myChart.setOption({
  33. tooltip: {
  34. trigger: 'axis',
  35. },
  36. grid: {
  37. left: '3%',
  38. right: '4%',
  39. bottom: '5%',
  40. containLabel: true,
  41. },
  42. legend: {
  43. data: ['(kw)'],
  44. bottom: '5',
  45. },
  46. toolbox: {
  47. show: true,
  48. feature: {
  49. // dataView: { show: true, readOnly: false },
  50. // magicType: { show: true, type: ["line", "bar"] },
  51. // restore: { show: true },
  52. saveAsImage: { show: true, color: 'black' , title:'',name:'图表下载'},
  53. },
  54. iconStyle: {
  55. borderColor: '#666',
  56. },
  57. },
  58. xAxis: [
  59. {
  60. type: 'category',
  61. data:props.echartsData.listDate,
  62. boundaryGap: true,
  63. axisTick: {
  64. show: false, //去除刻度线
  65. },
  66. axisLabel: {
  67. color: 'black', // 文本颜色
  68. },
  69. axisLine: {
  70. show: true, // 去除轴线
  71. },
  72. },
  73. ],
  74. yAxis: [
  75. {
  76. name: 'kw',
  77. type: 'value',
  78. nameTextStyle: {
  79. color: 'black',
  80. fontSize: 10,
  81. },
  82. axisTick: {
  83. show: true, //去除刻度线
  84. },
  85. axisLabel: {
  86. color: 'black', // 文本颜色
  87. },
  88. axisLine: {
  89. show: true, // 去除轴线
  90. lineStyle: {
  91. color: 'black',
  92. },
  93. },
  94. splitNumber: 5,
  95. splitLine: {
  96. show: false,
  97. lineStyle: {
  98. color: '#9d9d9d',
  99. },
  100. },
  101. },
  102. ],
  103. series: [
  104. {
  105. name: '(kw)',
  106. type: 'bar',
  107. data:props.echartsData.list,
  108. markPoint: {
  109. data: [
  110. { type: 'max', name: 'Max' },
  111. // { type: "min", name: "Min" },
  112. ],
  113. },
  114. },
  115. ],
  116. })
  117. window.addEventListener('resize', () => {
  118. myChart.resize()
  119. })
  120. }
  121. const writeValue = (val) => {
  122. val
  123. echarts2()
  124. getData()
  125. }
  126. //监听变化
  127. watch(
  128. () => props.echartsData,
  129. (newVal, oldVal, clear) => {
  130. // 执行异步任务,并得到关闭异步任务的 id
  131. // alert(1)
  132. console.log(newVal)
  133. let id = writeValue(newVal, oldVal)
  134. // 如果 watch 监听被重复执行了,则会先清除上次未完成的异步任务
  135. clear(() => clearTimeout(id))
  136. },
  137. { lazy: true }
  138. )
  139. onMounted(() => {
  140. getData()
  141. echarts2()
  142. })
  143. return {
  144. loading,
  145. total,
  146. num,
  147. echarts2
  148. }
  149. },
  150. })
  151. </script>
  152. <style lang="scss" scoped>
  153. .homeBoxCard {
  154. // margin-bottom: 24px;
  155. ::v-deep(.el-card__header) {
  156. padding-left: 12px;
  157. padding-right: 12px;
  158. }
  159. ::v-deep(.el-card__body) {
  160. padding: 12px;
  161. font-size: 14px;
  162. line-height: 1.5715;
  163. }
  164. ::v-deep(.el-divider) {
  165. margin: 8px 0;
  166. }
  167. .num {
  168. font-size: 30px;
  169. color: #515a6e;
  170. }
  171. }
  172. </style>