图表样式

WX

2023-09-18 286c96cd573c60d1af5d6d332df1825b4c600289

 src/components/BarGraph.vue

@@ -1,8 +1,8 @@
<template>
  <div
    :id="`myEcharts${chartsId}`"
    :style="{ width: width, height: height }"
  ></div>
  <div class="title">
    {{ layerData.layerName }}
  </div>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
</template>
<script lang="ts" setup>
import {
@@ -24,7 +24,6 @@
  width: String,
  height: String,
  layerData: Object,
  chartsId: String,
});
let myEcharts = echarts;
let seriesData = ref([]);
@@ -48,13 +47,11 @@
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
        label: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
        },
      });
@@ -81,13 +78,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 +110,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,
    },
@@ -166,7 +161,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 +186,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>