Newer
Older
urbanLifeline_YanAn / src / views / oneMap / FloodStuationReview / chartCl.vue
@鲁yixuan 鲁yixuan on 7 Oct 6 KB updata
  1. <template>
  2. <div class="chartBox" :id="id"></div>
  3. </template>
  4. <script setup name="pieChartGszl">
  5. import { guid } from '@/utils/ruoyi';
  6. const { proxy } = getCurrentInstance();
  7. import { nowSize } from '@/utils/util.js';
  8. import moment from 'moment';
  9. const emit = defineEmits(['updateKey']);
  10. const props = defineProps({
  11. //刷新标志
  12. refresh: {
  13. type: [String, Number],
  14. default: 1,
  15. },
  16. //数据
  17. echartData: {
  18. type: Object,
  19. default: {},
  20. },
  21. });
  22.  
  23. const id = guid();
  24. const myChart = shallowRef('');
  25. let activeName = ref(null);
  26.  
  27. watch(
  28. () => props.refresh,
  29. value => {
  30. //先销毁实例
  31. myChart.value && myChart.value.dispose();
  32. intChart();
  33. }
  34. );
  35. //自适应
  36. function resizeTheChart() {
  37. if (myChart.value) {
  38. myChart.value.resize();
  39. }
  40. }
  41. //初始化
  42. function intChart() {
  43. myChart.value = proxy.echarts.init(document.getElementById(id));
  44. myChart.value.clear();
  45. // 绘制图表
  46. myChart.value.setOption({
  47. legend: {
  48. top: nowSize(10, 1920),
  49. itemHeight: nowSize(10, 1920),
  50. itemWidth: nowSize(10, 1920),
  51. x: '34%',
  52. itemGap: nowSize(50, 1920),
  53. textStyle: {
  54. color: '#FFFFFF',
  55. fontSize: 14,
  56. },
  57. orient: 'horizontal',
  58. icon: 'circle',
  59. },
  60. tooltip: {
  61. trigger: 'axis',
  62. axisPointer: {
  63. type: 'shadow',
  64. },
  65. formatter: function (params) {
  66. if (params[0].seriesName == '行驶里程') {
  67. return params[0].seriesName + ' : ' + params[0].value + '公里';
  68. } else {
  69. return params[0].seriesName + ' : ' + params[0].value + '分钟';
  70. }
  71. },
  72. },
  73. grid: [
  74. {
  75. show: false,
  76. left: '20%',
  77. top: nowSize(44, 1920),
  78. bottom: nowSize(6, 1920),
  79. containLabel: true,
  80. width: '38%',
  81. },
  82. {
  83. show: false,
  84. left: '20%',
  85. top: nowSize(44, 1920),
  86. bottom: nowSize(26, 1920),
  87. width: '0',
  88. containLabel: false,
  89. },
  90. {
  91. show: false,
  92. right: '4%',
  93. top: nowSize(44, 1920),
  94. bottom: nowSize(6, 1920),
  95. containLabel: true,
  96. width: '38%',
  97. },
  98. ],
  99. xAxis: [
  100. {
  101. type: 'value',
  102. inverse: true,
  103. axisTick: {
  104. show: false,
  105. },
  106. axisLabel: {
  107. show: true,
  108. color: '#D8F1FF',
  109. fontSize: nowSize(12, 1920),
  110. },
  111. splitLine: {
  112. //网格线
  113. lineStyle: {
  114. type: 'dashed',
  115. color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
  116. },
  117. show: true, //隐藏或显示
  118. },
  119. },
  120. {
  121. gridIndex: 1,
  122. show: false,
  123. },
  124. {
  125. gridIndex: 2,
  126. axisTick: {
  127. show: false,
  128. },
  129. axisLabel: {
  130. show: true,
  131. color: '#D8F1FF',
  132. fontSize: nowSize(12, 1920),
  133. },
  134. splitLine: {
  135. //网格线
  136. lineStyle: {
  137. type: 'dashed',
  138. color: 'rgba(255, 255, 255, 0.2)', //设置网格线类型 dotted:虚线 solid:实线
  139. },
  140. show: true, //隐藏或显示
  141. },
  142. },
  143. ],
  144. yAxis: [
  145. {
  146. type: 'category',
  147. inverse: true,
  148. position: 'right',
  149. splitArea: {
  150. show: true,
  151. areaStyle: {
  152. color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
  153. },
  154. },
  155. axisLine: {
  156. show: false,
  157. },
  158.  
  159. axisTick: {
  160. show: false,
  161. },
  162. axisLabel: {
  163. show: false,
  164. },
  165. data: props.echartData.xData,
  166. },
  167. {
  168. gridIndex: 1,
  169. type: 'category',
  170. inverse: true,
  171. position: 'left',
  172. triggerEvent: true,
  173. axisLine: {
  174. show: false,
  175. },
  176. axisTick: {
  177. show: false,
  178. },
  179. axisLabel: {
  180. // color: "rgba(255, 255, 255, 1)",
  181. fontSize: nowSize(14, 1920),
  182. color: (value, index) => {
  183. if (activeName.value == index) {
  184. return '#2CBBB6';
  185. } else {
  186. return 'rgba(255, 255, 255, 1)';
  187. }
  188. },
  189. },
  190. data: props.echartData.xData,
  191. },
  192. {
  193. gridIndex: 2,
  194. type: 'category',
  195. inverse: true,
  196. position: 'left',
  197. splitArea: {
  198. show: true,
  199. areaStyle: {
  200. color: ['rgba(77, 149, 217, 0.15)', 'rgba(77, 149, 217,0)'],
  201. },
  202. },
  203. axisLine: {
  204. show: false,
  205. lineStyle: {
  206. color: 'rgba(255, 255, 255, 0.5)',
  207. },
  208. },
  209. axisTick: {
  210. show: false,
  211. },
  212. axisLabel: {
  213. show: false,
  214. },
  215. data: props.echartData.xData,
  216. },
  217. ],
  218. series: [
  219. {
  220. name: '行驶里程',
  221. type: 'bar',
  222. barWidth: 12,
  223. stack: '1',
  224. barWidth: nowSize(10, 1920),
  225. itemStyle: {
  226. barBorderRadius: nowSize(5, 1920),
  227. color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
  228. {
  229. offset: 0,
  230. color: 'rgba(0, 238, 253, 1)',
  231. },
  232. {
  233. offset: 1,
  234. color: 'rgba(0, 238, 253, 0)',
  235. },
  236. ]),
  237. },
  238. data: props.echartData.data1,
  239. },
  240. {
  241. name: '行驶时长',
  242. type: 'bar',
  243. stack: '2',
  244. barWidth: 12,
  245. xAxisIndex: 2,
  246. yAxisIndex: 2,
  247. barWidth: nowSize(10, 1920),
  248. itemStyle: {
  249. barBorderRadius: nowSize(5, 1920),
  250. color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
  251. {
  252. offset: 0,
  253. color: 'rgba(255, 255, 0, 0)',
  254. },
  255. {
  256. offset: 1,
  257. color: 'rgba(255, 255, 0, 1)',
  258. },
  259. ]),
  260. },
  261. data: props.echartData.data2,
  262. },
  263. ],
  264. });
  265. myChart.value.on('click', params => {
  266. activeName.value = params.dataIndex;
  267. emit('updateKey', activeName.value);
  268. myChart.value.resize();
  269. });
  270. }
  271. onMounted(() => {
  272. intChart();
  273. window.addEventListener('resize', resizeTheChart);
  274. });
  275. </script>
  276.  
  277. <style lang="scss" scoped>
  278. .chartBox {
  279. width: 100%;
  280. height: 100%;
  281. }
  282. </style>