月球大数据地理空间分析展示平台-【前端】-月球2期前端
WX
2023-09-21 6435d34a649f7b00855a5fca975a3fed92230a89
src/components/BarGraph.vue
@@ -2,10 +2,7 @@
  <div class="title">
    {{ layerData.layerName }}
  </div>
  <div
    :id="`myEcharts${chartsId}`"
    :style="{ width: width, height: height }"
  ></div>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
</template>
<script lang="ts" setup>
import {
@@ -27,7 +24,6 @@
  width: String,
  height: String,
  layerData: Object,
  chartsId: String,
});
let myEcharts = echarts;
let seriesData = ref([]);
@@ -43,7 +39,7 @@
      xAxisData.value.push(e.len);
    });
    data = trans(props.layerData.points);
    console.log(data);
    seriesData.value = [];
    data.forEach((e) => {
      seriesData.value.push({
@@ -51,18 +47,15 @@
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
        label: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
        },
      });
    });
    console.log(seriesData.value);
    nextTick(() => {
      initChart();
@@ -84,13 +77,11 @@
      type: "line",
      smooth: true,
      symbol: "none", //取消折点圆圈
      itemStyle: {
        normal: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
      label: {
        label: {
          show: false,
          position: "top",
          formatter: "{c}",
        },
      },
    });
@@ -118,7 +109,7 @@
}
function initChart() {
  let chart = myEcharts.init(
    document.getElementById(`myEcharts${props.chartsId}`),
    document.getElementById(`myEcharts`),
    "purple-passion"
  );
  chart.setOption({
@@ -169,7 +160,7 @@
          backgroundColor: "#6a7985",
        },
      },
      formatter: "距离:{b}m <br> 数值:{c}", //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
      formatter: "数值:{c} <br> 距离:{b}m", //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
    },
    yAxis: {
      type: "value",