代码更新

Surpriseplus

2023-10-10 77f9937b32f67f5b7d5476b0a1db19956702c0c8

 src/components/BarGraph.vue

@@ -3,7 +3,7 @@
    {{ layerData.layerName }}
  </div>
  <div
    :id="`myEcharts${chartsId}`"
    id="myEcharts"
    :style="{ width: width, height: height }"
  ></div>
</template>
@@ -27,7 +27,6 @@
  width: String,
  height: String,
  layerData: Object,
  chartsId: String,
});
let myEcharts = echarts;
let seriesData = ref([]);
@@ -43,7 +42,7 @@
      xAxisData.value.push(e.len);
    });
    data = trans(props.layerData.points);
    console.log(data);

    seriesData.value = [];
    data.forEach((e) => {
      seriesData.value.push({
@@ -51,18 +50,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 +80,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 +112,7 @@
}
function initChart() {
  let chart = myEcharts.init(
    document.getElementById(`myEcharts${props.chartsId}`),
    document.getElementById(`myEcharts`),
    "purple-passion"
  );
  chart.setOption({
@@ -145,15 +139,15 @@
      name: "米（m）",
      type: "category",
      data: xAxisData.value,
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: false, // 不显示坐标轴刻度线
        show: true, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
        show: true, // 不显示坐标轴线
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
        show: true, // 不显示坐标轴上的文字
        showMinLabel: true, // 强制显示最小值标签
        showMaxLabel: true, // 强制显示最大值标签
      },
@@ -169,22 +163,22 @@
          backgroundColor: "#6a7985",
        },
      },
      formatter: "距离：{b}m <br> 数值：{c}", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      formatter: "数值：{c} <br> 距离：{b}m", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
    },
    yAxis: {
      type: "value",
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: false, // 不显示坐标轴刻度线
        show: true, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
        show: true, // 不显示坐标轴线
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
        show: true, // 不显示坐标轴上的文字
      },
      splitLine: {
        show: false, // 不显示网格线
        show: true, // 不显示网格线
      },
    },
    series: seriesData.value,