月球大数据地理空间分析展示平台-【前端】-月球2期前端
WX
2023-09-18 2e81dd5430b7a5b27c081b576889010f06f4bd48
src/components/BarGraph.vue
@@ -1,4 +1,7 @@
<template>
  <div class="title">
    {{ layerData.layerName }}
  </div>
  <div
    :id="`myEcharts${chartsId}`"
    :style="{ width: width, height: height }"
@@ -119,22 +122,22 @@
    "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,
    },
@@ -166,7 +169,7 @@
          backgroundColor: "#6a7985",
        },
      },
      formatter: "距离:{b}m <br> 数值:{c}", //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
      formatter: "数值:{c} <br> 距离:{b}m", //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
    },
    yAxis: {
      type: "value",
@@ -191,4 +194,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>