OfCarUseNum.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <div class="lun-main">
  3. <div style="padding: 10px 10px">
  4. <span style="color: #000; font-size: 18px">用车次数</span>
  5. <div style="margin-top: 60px; width: 100px; text-align: center">
  6. <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">168</div>
  7. <div style="color: #000; font-size: 14px">总体用车次数</div>
  8. </div>
  9. <div style="margin-top: 20px; width: 100px; text-align: center">
  10. <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">13</div>
  11. <div style="color: #000; font-size: 14px">本机构用车次数</div>
  12. </div>
  13. </div>
  14. <div style="padding: 10px 10px 10px 0">
  15. <div style="display: flex;">
  16. <a-radio-group name="radioGroup" :default-value="1">
  17. <a-radio :value="1"> 日 </a-radio>
  18. <a-radio :value="2"> 周 </a-radio>
  19. <a-radio :value="3"> 月 </a-radio>
  20. <a-radio :value="4"> 年 </a-radio>
  21. </a-radio-group>
  22. <a-range-picker
  23. :value="[startDate,endDate]"
  24. disabled
  25. style="width: 100%"
  26. v-model="daterangeCreateTime"
  27. valueFormat="YYYY-MM-DD"
  28. format="YYYY-MM-DD"
  29. allow-clear
  30. />
  31. </div>
  32. <div ref="chart" class="item" style="width: 380px; height: 260px" />
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import * as echarts from 'echarts'
  38. import moment from 'moment';
  39. export default {
  40. data() {
  41. return {
  42. daterangeCreateTime: [],
  43. dateFormat:'YYYY-MM-DD',
  44. startDate :'2023-08-28',
  45. endDate:'2023-08-28',
  46. moment: moment
  47. }
  48. },
  49. mounted() {
  50. // 获取dom容器
  51. const chartDom = this.$refs.chart
  52. // 初始化图表实例
  53. this.chart = echarts.init(chartDom)
  54. this.initChart()
  55. // console.log("da======ta", this.processData, this.maxNum);
  56. },
  57. methods: {
  58. initChart() {
  59. const data = [220, 182, 191, 234, 290, 330, 310]
  60. const sideData = data.map((item) => item + 4.5)
  61. const option = {
  62. tooltip: {
  63. trigger: 'axis',
  64. formatter: '{b} : {c}',
  65. axisPointer: {
  66. // 坐标轴指示器,坐标轴触发有效
  67. type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
  68. },
  69. },
  70. xAxis: {
  71. data: [
  72. '两江支队',
  73. '鸳鸯消防救援站',
  74. '翠云消防救援站',
  75. '龙头寺消防救援站',
  76. '大竹林特勤站',
  77. '礼嘉消防救援站',
  78. '奥园消防救援站',
  79. ],
  80. //坐标轴
  81. axisLine: {
  82. lineStyle: {
  83. color: '#3eb2e8',
  84. },
  85. },
  86. //坐标值标注
  87. axisLabel: {
  88. show: true,
  89. interval: 0,
  90. rotate: 30,
  91. textStyle: {
  92. color: '#3eb2e8',
  93. fontSize: 12,
  94. },
  95. },
  96. },
  97. yAxis: {
  98. //坐标轴
  99. axisLine: {
  100. show: false,
  101. },
  102. //坐标值标注
  103. axisLabel: {
  104. show: true,
  105. textStyle: {
  106. color: '#000',
  107. },
  108. },
  109. //分格线
  110. splitLine: {
  111. lineStyle: {
  112. color: '#ccc',
  113. },
  114. },
  115. },
  116. series: [
  117. {
  118. name: 'a',
  119. tooltip: {
  120. show: false,
  121. },
  122. type: 'bar',
  123. barWidth: 14.5,
  124. itemStyle: {
  125. normal: {
  126. color: new echarts.graphic.LinearGradient(
  127. 0,
  128. 1,
  129. 0,
  130. 0,
  131. [
  132. {
  133. offset: 0,
  134. color: '#0B4EC3', // 0% 处的颜色
  135. },
  136. {
  137. offset: 0.6,
  138. color: '#138CEB', // 60% 处的颜色
  139. },
  140. {
  141. offset: 1,
  142. color: '#17AAFE', // 100% 处的颜色
  143. },
  144. ],
  145. false
  146. ),
  147. },
  148. },
  149. data: data,
  150. barGap: 0,
  151. },
  152. {
  153. type: 'bar',
  154. barWidth: 0,
  155. itemStyle: {
  156. normal: {
  157. color: new echarts.graphic.LinearGradient(
  158. 0,
  159. 1,
  160. 0,
  161. 0,
  162. [
  163. {
  164. offset: 0,
  165. color: '#09337C', // 0% 处的颜色
  166. },
  167. {
  168. offset: 0.6,
  169. color: '#0761C0', // 60% 处的颜色
  170. },
  171. {
  172. offset: 1,
  173. color: '#0575DE', // 100% 处的颜色
  174. },
  175. ],
  176. false
  177. ),
  178. },
  179. },
  180. barGap: 0,
  181. data: sideData,
  182. },
  183. // {
  184. // name: 'b',
  185. // tooltip: {
  186. // show: false,
  187. // },
  188. // type: 'pictorialBar',
  189. // itemStyle: {
  190. // borderWidth: 1,
  191. // borderColor: '#0571D5',
  192. // color: '#1779E0',
  193. // },
  194. // symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
  195. // symbolSize: ['30', '12'],
  196. // symbolOffset: ['0', '-11'],
  197. // //symbolRotate: -5,
  198. // symbolPosition: 'end',
  199. // data: data,
  200. // z: 3,
  201. // },
  202. ],
  203. }
  204. this.chart.setOption(option)
  205. },
  206. },
  207. }
  208. </script>
  209. <style lang="less" scoped>
  210. .lun-main {
  211. width: 400px;
  212. height: 300px;
  213. display: flex;
  214. justify-content: space-between;
  215. margin-left: 10px;
  216. // background-color: aqua;
  217. border-left: 1px solid #ccc;
  218. pointer-events: all;
  219. padding-right: 10px;
  220. }
  221. </style>