代码更新

Surpriseplus

2023-10-10 77f9937b32f67f5b7d5476b0a1db19956702c0c8

 src/components/BarGraph.vue

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

    seriesData.value = [];
    data.forEach((e) => {
      seriesData.value.push({
@@ -48,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();
@@ -81,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}",
        },
      },
    });
@@ -115,26 +112,26 @@
}
function initChart() {
  let chart = myEcharts.init(
    document.getElementById(`myEcharts${props.chartsId}`),
    document.getElementById(`myEcharts`),
    "purple-passion"
  );
  chart.setOption({
    title: {
      text: props.layerData.layerName,
      left: "center",
      textStyle: {
        //文字颜色
        color: "#fff",
        // //字体风格,'normal','italic','oblique'
        // fontStyle: "normal",
        // //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        // fontWeight: "bold",
        // //字体系列
        // fontFamily: "sans-serif",
        // //字体大小
        // fontSize: 18,
      },
    },
    // title: {
    //   text: props.layerData.layerName,
    //   left: "center",
    //   textStyle: {
    //     //文字颜色
    //     color: "#fff",
    //     // //字体风格,'normal','italic','oblique'
    //     // fontStyle: "normal",
    //     // //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
    //     // fontWeight: "bold",
    //     // //字体系列
    //     // fontFamily: "sans-serif",
    //     // //字体大小
    //     fontSize: 14,
    //   },
    // },
    legend: {
      // data: xAxisData.value,
    },
@@ -142,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, // 强制显示最大值标签
      },
@@ -166,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,
@@ -191,4 +188,14 @@
  };
}
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.title {
  width: 100%;
  word-wrap: break-word;
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>