Newer
Older
urbanLifeline_YanAn / src / views / oneMap / Echarts / ChartLs.vue
@zhangqy zhangqy on 13 Nov 16 KB 调整
  1. <template>
  2. <div class="chartBox" :id="Eid"></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 { nextTick, reactive } from "vue";
  9. const props = defineProps({
  10. //刷新标志
  11. refresh: {
  12. type: [String, Number],
  13. default: 1,
  14. },
  15. //数据
  16. echartData: {
  17. type: Object,
  18. default: {},
  19. },
  20. });
  21.  
  22. const AllData = reactive({
  23. Options: {},
  24. });
  25. const Eid = guid();
  26. const myChart = shallowRef("");
  27.  
  28. watch(
  29. () => props.refresh,
  30. (value) => {
  31. //先销毁实例
  32. if (props.echartData.activeIndex > 0) {
  33. // myChart.value.resize();
  34. reasizeFun();
  35. } else {
  36. myChart.value && myChart.value.dispose();
  37. intChart();
  38. }
  39. }
  40. );
  41. watch(
  42. () => props.echartData,
  43. (value) => {
  44. nextTick(() => {
  45. intChart();
  46. });
  47. }
  48. );
  49. //自适应
  50. function resizeTheChart() {
  51. nextTick(() => {
  52. if (myChart.value) {
  53. myChart.value.resize();
  54. }
  55. });
  56. }
  57. // 重绘之前的样式填充
  58. function reasizeFun() {
  59. // debugger;
  60. if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "中雨") {
  61. // AllData.Options.visualMap.pieces[
  62. // (Number(props.echartData.activeIndex) - 1) * 2
  63. // ].color = "rgba(222, 230, 0, 1)";
  64. // AllData.Options.visualMap.pieces[
  65. // (Number(props.echartData.activeIndex) - 1 + 1) * 2
  66. // ].color = "rgba(222, 230, 0, 1)";
  67. AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
  68. "rgba(222, 230, 0, 1)";
  69. } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "小雨") {
  70. // AllData.Options.visualMap.pieces[
  71. // (Number(props.echartData.activeIndex) - 1) * 2
  72. // ].color = "rgba(0, 191, 253, 1)";
  73. // AllData.Options.visualMap.pieces[
  74. // (Number(props.echartData.activeIndex) - 1 + 1) * 2
  75. // ].color = "rgba(0, 191, 253, 1)";
  76. AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
  77. "rgba(0, 191, 253, 1)";
  78. } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "大雨") {
  79. // AllData.Options.visualMap.pieces[
  80. // (Number(props.echartData.activeIndex) - 1) * 2
  81. // ].color = "rgba(255, 184, 15, 1)";
  82. // AllData.Options.visualMap.pieces[
  83. // (Number(props.echartData.activeIndex) - 1 + 1) * 2
  84. // ].color = "rgba(255, 184, 15, 1)";
  85. AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
  86. "rgba(255, 184, 15, 1)";
  87. } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "暴雨") {
  88. // AllData.Options.visualMap.pieces[
  89. // (Number(props.echartData.activeIndex) - 1) * 2
  90. // ].color = "rgba(255, 26, 26, 1)";
  91. // AllData.Options.visualMap.pieces[
  92. // (Number(props.echartData.activeIndex) - 1 + 1) * 2
  93. // ].color = "rgba(255, 26, 26, 1)";
  94. AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
  95. "rgba(255, 26, 26, 1)";
  96. } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "大暴雨") {
  97. // AllData.Options.visualMap.pieces[
  98. // (Number(props.echartData.activeIndex) - 1) * 2
  99. // ].color = "rgba(255, 26, 26, 1)";
  100. // AllData.Options.visualMap.pieces[
  101. // (Number(props.echartData.activeIndex) - 1 + 1) * 2
  102. // ].color = "rgba(255, 26, 26, 1)";
  103. AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
  104. "rgba(255, 26, 26, 1)";
  105. } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "特大暴雨") {
  106. // AllData.Options.visualMap.pieces[
  107. // (Number(props.echartData.activeIndex) - 1) * 2
  108. // ].color = "rgba(255, 26, 26, 1)";
  109. // AllData.Options.visualMap.pieces[
  110. // (Number(props.echartData.activeIndex) - 1 + 1) * 2
  111. // ].color = "rgba(255, 26, 26, 1)";
  112. AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
  113. "rgba(255, 26, 26, 1)";
  114. } else {
  115. // AllData.Options.visualMap.pieces.push({
  116. // gt: props.echartData.activeIndex,
  117. // lte: props.echartData.activeIndex,
  118. // color: "rgba(121, 159, 200, 1)",
  119. // });
  120. }
  121. console.log(AllData.Options.visualMap);
  122. myChart.value.setOption(AllData.Options, true);
  123. // myChart.value.resize();
  124. // intChart();
  125. // myChart.value = proxy.echarts.init(document.getElementById(id));
  126. // myChart.value.clear();
  127.  
  128. // myChart.value.setOption(AllData.Options);
  129. }
  130.  
  131. //初始化
  132. function intChart() {
  133. if (document.getElementById(Eid) == null) {
  134. return;
  135. }
  136. proxy.echarts.dispose(document.getElementById(Eid));
  137. myChart.value = proxy.echarts.init(document.getElementById(Eid));
  138. myChart.value.clear();
  139. // 处理数据
  140. let XData = [];
  141. props.echartData.rainTrend.forEach((element, index) => {
  142. if (index == 0) {
  143. XData.push("");
  144. XData.push(element);
  145. XData.push("");
  146. } else {
  147. XData.push(element);
  148. XData.push("");
  149. }
  150. });
  151. console.log(`1231`, XData);
  152. let Servers = [];
  153. props.echartData.history.forEach((element, index) => {
  154. if (index == 0) {
  155. Servers.push(Number(element));
  156. Servers.push(Number(element));
  157. } else {
  158. Servers.push((Number(element) + Number(props.echartData.history[index - 1])) / 2);
  159. Servers.push(Number(element));
  160. }
  161. });
  162. console.log(`1232`, Servers);
  163. // 绘制图表
  164. // 设置图形配置项
  165. AllData.Options = {
  166. tooltip: {
  167. trigger: "axis",
  168. axisPointer: {
  169. type: "shadow",
  170. },
  171. formatter: function (params) {
  172. console.log(params);
  173. let str = "";
  174. if (params[0].name == "") {
  175. str = "";
  176. } else {
  177. str =
  178. "<div style='padding:0 5px;width:100%;height:32px;line-height:16px;border-radius:3px;'>" +
  179. params[0].name +
  180. "<br />" +
  181. params[0].data +
  182. "(mm)</div>";
  183. }
  184. return str;
  185. },
  186. },
  187. grid: {
  188. top: nowSize(20, 1920),
  189. bottom: nowSize(6, 1920), //也可设置left和right设置距离来控制图表的大小
  190. left: nowSize(50, 1920),
  191. right: nowSize(20, 1920),
  192. },
  193. xAxis: {
  194. // data: props.echartData.rainTrend,
  195. data: XData,
  196. axisLine: {
  197. show: false, //隐藏X轴轴线
  198. lineStyle: {
  199. color: "rgba(44, 110, 189, 1)",
  200. },
  201. },
  202. axisTick: {
  203. show: false, //隐藏X轴刻度
  204. lineStyle: {
  205. color: "rgba(44, 110, 189, 1)",
  206. },
  207. },
  208. axisLabel: {
  209. show: false,
  210. },
  211. boundaryGap: false,
  212. },
  213. yAxis: {
  214. type: "value",
  215. axisTick: {
  216. show: false, //隐藏X轴刻度
  217. lineStyle: {
  218. color: "rgba(44, 110, 189, 1)",
  219. },
  220. },
  221. axisLine: {
  222. show: false,
  223. },
  224. axisLabel: {
  225. show: true,
  226. color: "#FFFFFF",
  227. fontSize: nowSize(12, 1920),
  228. },
  229. splitLine: {
  230. //网格线
  231. lineStyle: {
  232. type: "dashed",
  233. color: "rgba(255, 255, 255, 0.2)", //设置网格线类型 dotted:虚线 solid:实线
  234. },
  235. show: true, //隐藏或显示
  236. },
  237. },
  238. visualMap: {
  239. type: "piecewise",
  240. show: false,
  241. dimension: 0,
  242. seriesIndex: 0,
  243. pieces: [],
  244. zlevel: 4,
  245. },
  246.  
  247. series: [
  248. {
  249. type: "line",
  250. // data: props.echartData.history,
  251. data: Servers,
  252. barWidth: nowSize(10, 1920),
  253. areaStyle: {},
  254. // itemStyle: {},
  255. zlevel: 1,
  256. symbol: "circle",
  257. symbolSize: nowSize(6, 1920),
  258. // lineStyle: {
  259. // shadowColor: "rgba(0, 0, 0, .5)",
  260. // shadowBlur: nowSize(5, 1920),
  261. // shadowOffsetY: nowSize(5, 1920),
  262. // shadowOffsetX: nowSize(5, 1920),
  263. // // color: (parms) => {
  264. // // debugger;
  265. // // let yanse = "";
  266. // // let colorType = props.echartData.rainTrend[value.dataIndex];
  267. // // if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
  268. // // yanse = "rgba(0, 191, 253, 1)";
  269. // // } else if (
  270. // // value.dataIndex <= props.echartData.activeIndex &&
  271. // // colorType == "中雨"
  272. // // ) {
  273. // // yanse = "rgba(222, 230, 0, 1)";
  274. // // } else if (
  275. // // value.dataIndex <= props.echartData.activeIndex &&
  276. // // colorType == "大雨"
  277. // // ) {
  278. // // yanse = "rgba(255, 184, 15, 1)";
  279. // // } else if (
  280. // // (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
  281. // // colorType == "大暴雨" ||
  282. // // colorType == "特大暴雨"
  283. // // ) {
  284. // // yanse = "rgba(255, 26, 26, 1)";
  285. // // } else {
  286. // // yanse = "rgba(121, 159, 200, 1)";
  287. // // }
  288. // // console.log("lineStyle", yanse);
  289. // // return yanse;
  290. // // },
  291. // color: "rgba(255, 26, 26, 1)",
  292. // },
  293. itemStyle: {
  294. borderColor: "rgba(57, 247, 255, 0.3)",
  295. borderWidth: nowSize(6, 1920),
  296. borderRadius: nowSize(6, 1920),
  297. // color: "rgba(255, 255, 255, 1)",
  298. color: (value) => {
  299. // let yanse=''
  300. // let colorType=props.echartData.rainTrend[value.dataIndex]
  301. // if(value.dataIndex<=props.echartData.activeIndex&&colorType=='小雨'){
  302. // yanse="rgba(0, 191, 253, 1)"
  303. // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='中雨'){
  304. // yanse= "rgba(222, 230, 0, 1)"
  305. // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='大雨'){
  306. // yanse= "rgba(255, 184, 15, 1)"
  307. // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='暴雨'||colorType=='大暴雨'||colorType=='特大暴雨'){
  308. // yanse= "rgba(255, 26, 26, 1)"
  309. // }else{
  310. // yanse= "rgba(121, 159, 200, 1)"
  311. // }
  312. // console.log('lineStyle',yanse)
  313. // return yanse
  314. let colorType = props.echartData.rainTrend[value.dataIndex];
  315. let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  316. {
  317. offset: 0,
  318. color: "rgba(0, 191, 253, 1)",
  319. },
  320. {
  321. offset: 1,
  322. color: "rgba(0, 191, 253, 0.2)",
  323. },
  324. ]);
  325. let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  326. {
  327. offset: 0,
  328. color: "rgba(222, 230, 0, 1)",
  329. },
  330. {
  331. offset: 1,
  332. color: "rgba(222, 230, 0, 0.2)",
  333. },
  334. ]);
  335. let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  336. {
  337. offset: 0,
  338. color: "rgba(255, 184, 15, 1)",
  339. },
  340. {
  341. offset: 1,
  342. color: "rgba(255, 184, 15, 0.2)",
  343. },
  344. ]);
  345. let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  346. {
  347. offset: 0,
  348. color: "rgba(255, 26, 26, 1)",
  349. },
  350. {
  351. offset: 1,
  352. color: "rgba(255, 26, 26, 0.2)",
  353. },
  354. ]);
  355. let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  356. {
  357. offset: 0,
  358. color: "rgba(121, 159, 200, 1)",
  359. },
  360. {
  361. offset: 1,
  362. color: "rgba(121, 159, 200, 0.2)",
  363. },
  364. ]);
  365. let yanse = "";
  366. if (value.dataIndex < props.echartData.activeIndex && colorType == "小雨") {
  367. yanse = color1;
  368. } else if (
  369. value.dataIndex < props.echartData.activeIndex &&
  370. colorType == "中雨"
  371. ) {
  372. yanse = color2;
  373. } else if (
  374. value.dataIndex < props.echartData.activeIndex &&
  375. colorType == "大雨"
  376. ) {
  377. yanse = color3;
  378. } else if (
  379. value.dataIndex < props.echartData.activeIndex &&
  380. (colorType == "暴雨" || colorType == "大暴雨" || colorType == "特大暴雨")
  381. ) {
  382. yanse = color4;
  383. } else {
  384. yanse = color5;
  385. }
  386. // console.log(yanse)
  387. return yanse;
  388. },
  389. },
  390. // areaStyle: {
  391. // // color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  392. // // {
  393. // // offset: 0,
  394. // // color: "rgba(0, 191, 253, 1)",
  395. // // },
  396. // // {
  397. // // offset: 1,
  398. // // color: "rgba(0, 191, 253, 0.2)",
  399. // // },
  400. // // ]),
  401. // color: (value) => {
  402. // debugger;
  403. // let colorType = props.echartData.rainTrend[value.dataIndex];
  404. // let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  405. // {
  406. // offset: 0,
  407. // color: "rgba(0, 191, 253, 1)",
  408. // },
  409. // {
  410. // offset: 1,
  411. // color: "rgba(0, 191, 253, 0.2)",
  412. // },
  413. // ]);
  414. // let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  415. // {
  416. // offset: 0,
  417. // color: "rgba(222, 230, 0, 1)",
  418. // },
  419. // {
  420. // offset: 1,
  421. // color: "rgba(222, 230, 0, 0.2)",
  422. // },
  423. // ]);
  424. // let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  425. // {
  426. // offset: 0,
  427. // color: "rgba(255, 184, 15, 1)",
  428. // },
  429. // {
  430. // offset: 1,
  431. // color: "rgba(255, 184, 15, 0.2)",
  432. // },
  433. // ]);
  434. // let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  435. // {
  436. // offset: 0,
  437. // color: "rgba(255, 26, 26, 1)",
  438. // },
  439. // {
  440. // offset: 1,
  441. // color: "rgba(255, 26, 26, 0.2)",
  442. // },
  443. // ]);
  444. // let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  445. // {
  446. // offset: 0,
  447. // color: "rgba(121, 159, 200, 1)",
  448. // },
  449. // {
  450. // offset: 1,
  451. // color: "rgba(121, 159, 200, 0.2)",
  452. // },
  453. // ]);
  454. // let yanse = "";
  455. // if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
  456. // yanse = color1;
  457. // } else if (
  458. // value.dataIndex <= props.echartData.activeIndex &&
  459. // colorType == "中雨"
  460. // ) {
  461. // yanse = color2;
  462. // } else if (
  463. // value.dataIndex <= props.echartData.activeIndex &&
  464. // colorType == "大雨"
  465. // ) {
  466. // yanse = color3;
  467. // } else if (
  468. // (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
  469. // colorType == "大暴雨" ||
  470. // colorType == "特大暴雨"
  471. // ) {
  472. // yanse = color4;
  473. // } else {
  474. // yanse = color5;
  475. // }
  476. // console.log(yanse);
  477. // return yanse;
  478. // },
  479. // },
  480. },
  481. ],
  482. };
  483. for (let index = 0; index < XData.length; index++) {
  484. AllData.Options.visualMap.pieces.push({
  485. gte: index * 2,
  486. lte: (index + 1) * 2,
  487. color: "rgba(121, 159, 200, 1)",
  488. });
  489. }
  490. myChart.value.setOption(AllData.Options, true);
  491. }
  492. onMounted(() => {
  493. // intChart();
  494. window.addEventListener("resize", resizeTheChart);
  495. });
  496. onBeforeUnmount(() => {
  497. myChart.value && myChart.value.dispose();
  498. });
  499. </script>
  500.  
  501. <style lang="scss" scoped>
  502. .chartBox {
  503. width: 100%;
  504. height: 100%;
  505. }
  506. </style>