| | |
| | | let dataLength; |
| | | let data = []; |
| | | let isshow = ref(true); |
| | | let myChart = null; |
| | | let optionData = []; |
| | | watch( |
| | | () => props.layerData, |
| | | (nVal, oVal) => { |
| | |
| | | xAxisData.value.push(e.len); |
| | | }); |
| | | data = trans(props.layerData.points); |
| | | |
| | | optionData = props.layerData.points; |
| | | seriesData.value = []; |
| | | |
| | | data.forEach((e) => { |
| | | seriesData.value.push({ |
| | | data: e, |
| | |
| | | xAxisData.value.push(e.len); |
| | | }); |
| | | data = trans(props.layerData.points); |
| | | optionData = props.layerData.points; |
| | | seriesData.value = []; |
| | | data.forEach((e) => { |
| | | seriesData.value.push({ |
| | | data: e, |
| | | type: "line", |
| | | smooth: true, |
| | | symbol: "none", //取消折点圆圈 |
| | | |
| | | label: { |
| | | label: { |
| | | show: false, |
| | |
| | | }, |
| | | }); |
| | | }); |
| | | |
| | | nextTick(() => { |
| | | initChart(); |
| | | }); |
| | |
| | | return result; |
| | | } |
| | | function initChart() { |
| | | let chart = myEcharts.init( |
| | | if (myChart) { |
| | | myChart.clear(); |
| | | } |
| | | myChart = myEcharts.init( |
| | | document.getElementById(`myEcharts`), |
| | | "purple-passion" |
| | | ); |
| | | chart.setOption({ |
| | | myChart.setOption({ |
| | | // title: { |
| | | // text: props.layerData.layerName, |
| | | // left: "center", |
| | |
| | | backgroundColor: "#6a7985", |
| | | }, |
| | | }, |
| | | formatter: "数值:{c} <br> 距离:{b}m", //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比) |
| | | |
| | | // formatter: "数值:{c} <br> 距离:{b}m", //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比) |
| | | formatter: (result) => { |
| | | var val = result[0]; |
| | | if (optionData) { |
| | | for (var i in optionData) { |
| | | var res = optionData[i]; |
| | | |
| | | if ( |
| | | optionData[val.dataIndex].len == res.len && |
| | | res.vals[0] == val.data |
| | | ) { |
| | | return ( |
| | | "数值: " + |
| | | val.data + |
| | | " <br> 距离:" + |
| | | val.dataIndex + |
| | | "m<br> 经度:" + |
| | | res.x.toFixed(6) + |
| | | "<br> 纬度:" + |
| | | res.y.toFixed(6) |
| | | ); |
| | | break; |
| | | } |
| | | } |
| | | return "数值: " + val.data + " <br> 距离:" + val.dataIndex + "m"; |
| | | } else { |
| | | return "数值: " + val.data + " <br> 距离:" + val.dataIndex + "m"; |
| | | } |
| | | }, |
| | | }, |
| | | |
| | | grid: { |
| | | left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字 |
| | | |
| | | right: "10%", |
| | | |
| | | containLabel: true, //grid 区域是否包含坐标轴的刻度标签, |
| | | }, |
| | | |
| | | yAxis: { |
| | | type: "value", |
| | | show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 |
| | |
| | | series: seriesData.value, |
| | | }); |
| | | window.onresize = function () { |
| | | chart.resize(); |
| | | myChart.resize(); |
| | | }; |
| | | } |
| | | </script> |