月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-10-10 616b8ab8998bfbec69929152612dc94d3112c2a9
src/components/BarGraph.vue
@@ -34,6 +34,8 @@
let dataLength;
let data = [];
let isshow = ref(true);
let myChart = null;
let optionData = [];
watch(
  () => props.layerData,
  (nVal, oVal) => {
@@ -42,8 +44,9 @@
      xAxisData.value.push(e.len);
    });
    data = trans(props.layerData.points);
    optionData = props.layerData.points;
    seriesData.value = [];
    data.forEach((e) => {
      seriesData.value.push({
        data: e,
@@ -73,13 +76,14 @@
    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,
@@ -89,6 +93,7 @@
      },
    });
  });
  nextTick(() => {
    initChart();
  });
@@ -111,11 +116,14 @@
  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",
@@ -163,8 +171,46 @@
          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, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
@@ -184,7 +230,7 @@
    series: seriesData.value,
  });
  window.onresize = function () {
    chart.resize();
    myChart.resize();
  };
}
</script>