<template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import * as echarts from "echarts"; import { guid } from "@/utils/ruoyi"; import { reactive, toRefs, onMounted, watch, onUnmounted } from "vue"; import bus from "@/bus"; export default { name: "line-chart", props: { data: Object, refresh: Number, ClickData: String, }, setup(props) { const allData = reactive({ series: [], legend: [], id: guid(), chart: null, timer: null, }); const resizeTheChart = () => { if (allData.chart) { allData.chart.resize(); } }; const init = () => { // let chartDom = echarts.init(document.getElementById(allData.id)); //先获取Dom上的实例 let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id)); //然后判断实例是否存在,如果不存在,就创建新实例 if (chartDom == null) { chartDom = echarts.init(document.getElementById(allData.id)); } var barWidth = 13; var option; option = { color: ["#3FFFC2", "#FFF21C"], tooltip: { trigger: "axis", backgroundColor: "#004284", borderColor: "#0B9BFF", borderRadius: 6, // 设置圆角大小 // 自定义提示框文本样 textStyle: { // 字体颜色 color: "white", // 字体大小 fontSize: 14, }, formatter: (params) => { // console.log(params); var relVal = "" + params[0].name; for (var i = 0, l = params.length; i < l; i++) { if (params[i].seriesName) { let unit = props.data.yAxis2_Name == "点位数" ? "个" : "km"; relVal += "<br/>" + params[i].marker + params[i].seriesName + " " + params[i].value + unit; } } return relVal; }, }, grid: { bottom: "0%", right: "0%", left: "0%", top: 30, containLabel: true, }, xAxis: [ { type: "category", axisLine: { show: false, lineStyle: { width: 2, color: "#58b2ed", }, }, splitLine: { show: false, }, axisTick: { show: false, }, axisLabel: { color: "#EBFEFF", fontSize: 12, fontFamily: "AlibabaPuHuiTi", formatter: function (params) { var str = ""; // 最终拼接成的字符串 var paramsLen = params.length; // 获取每项文字的个数 var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数(根据实际情况自己设置) var rowNumber = Math.ceil(paramsLen / len); // 换行的话,需要显示几行,向上取整 if (paramsLen > len) { //大于设定的len就换行,不大于就不变化 for (var i = 0; i < rowNumber; i++) { var temp = ""; // 表示每一次截取的字符串 var start = i * len; // 开始截取的位置 var end = start + len; // 结束截取的位置 if (i == rowNumber - 1) { // 最后一次不换行 temp = params.substring(start, paramsLen); } else { // 每一次拼接字符串并换行 temp = params.substring(start, end) + "\n"; } str += temp; // 最终拼成的字符串 } } else { // 给新的字符串赋值 str = params; } return str; //返回字符串 }, }, data: props.data.xAxis, }, ], yAxis: [ { name: props.data.yAxis2_Name == "点位数" ? "个" : "km", type: "value", minInterval: 1, axisLabel: { color: "#AAC1CF", show: true, }, nameTextStyle: { color: "#AAC1CF", }, splitLine: { lineStyle: { type: "dashed", color: "#2161a8", }, }, alignTicks: true, }, ], dataZoom: [ { // show: true, show: false, height: 4, bottom: 18, start: 0, end: 100, handleSize: "100%", fillerColor: "#94FA41", borderColor: "transparent", backgroundColor: "rgba(148, 250, 65, 0.2)", handleStyle: { color: "#94FA41", }, moveHandleSize: 0, textStyle: { color: "#fff", }, }, { type: "inside", show: true, height: 15, start: 1, end: 35, }, ], series: [], }; if (props.data.yAxis != null) { option.series.push( { name: props.data.yAxis_Name, type: "pictorialBar", symbolSize: [barWidth, 6], symbolOffset: [0, -3], symbolPosition: "end", z: 12, itemStyle: { color: "#FF6464", }, data: props.data.yAxis, }, { name: "", type: "bar", barWidth: barWidth, itemStyle: { // normal: { color: function (params) { return "rgba(255,100,100)"; }, opacity: 0.6, // }, }, data: props.data.yAxis, } ); } if (props.data.yAxis2 != null) { option.series.push( { name: props.data.yAxis2_Name, type: "pictorialBar", symbolSize: [barWidth, 6], symbolOffset: [0, -3], symbolPosition: "end", z: 11, itemStyle: { color: "#19D6FF", }, data: props.data.yAxis2, }, { name: "", type: "bar", barWidth: barWidth, itemStyle: { // normal: { color: "rgba(25,214,255,0.8)", opacity: 0.6, // }, }, data: props.data.yAxis2, barGap: "-100%", } ); } // 报告数量 if (props.data.yAxis3_line != null) { option.series.push({ name: props.data.yAxis3_line_Name, data: props.data.yAxis3_line, type: "line", lineStyle: { color: "#FFF441", width: 2, type: "solid", }, // smooth: true, }); } if (props.data.yAxis4_line != null) { } option && chartDom.setOption(option, true); allData.chart = chartDom; animateChart(); // 监听点击事件 allData.chart.on("click", function (params) { console.log("echarts点击事件", params.name, props.ClickData); bus.emit("openJXFXDialog", { name: params.name, ClickData: props.ClickData, }); // 在这里可以执行相应的逻辑 }); }; watch( () => props.refresh, () => { console.log(props, "propspropsprops"); if (allData.chartDom) { allData.chartDom.dispose(); allData.chartDom = null; } allData.chart.off("click"); setTimeout(() => { init(); }, 0); } ); // echarts动画 function animateChart() { let length = props.data.xAxis.length; let i = 0; if (allData.timer) clearInterval(allData.timer); allData.timer = setInterval(() => { allData.chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: i, }); i++; if (i == length) i = 0; }, 3000); } onMounted(() => { init(); window.addEventListener("resize", resizeTheChart); }); onUnmounted(() => { allData.chart.off("click"); if (allData.timer) clearInterval(allData.timer); }); return { ...toRefs(allData), resizeTheChart, init, }; }, }; </script>