real3d-portalsite/src/views/cockpitNew1/stxf.vue

<template>
  <div class="stxf">
    <div class="box">
      <div class="title">生态修复</div>
      <div class="item">
        <p class="text">
          <span>·</span>
          综合整治项目
          <span>66</span>
          个
        </p>
        <p class="text">
          <span>·</span>
          土地整治面积
          <span>354.56</span>
          KM2
        </p>
      </div>
      <Bar3d id="stxf_echart" ref="echartRef"></Bar3d>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Bar3d from "../../components/echartsTemplate/3dBar.vue";

export default {
  components: { Bar3d },
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  methods: {
    // //第二个图表
    echarts2() {
      let v = {
        xData: ["农用地", "建设用地", "生态修复", "历史文化保护"],
        yData: [
          [10, 10, 10, 10],
          [10, 10, 30, 10],
          [10, 10, 10, 40],
        ],

        legend: [""],
      };
      this.$nextTick(() => {
        this.$refs.echartRef.setOptions(v);
      });
      // let option = this.options3d(v);
      // myChart.setOption(option);
    },
  },
  mounted() {
    // this.getRenKou();

    this.echarts2();
  },
};
</script>
<style lang="scss" scoped>
.stxf {
  border-width: 0px;
  position: absolute;
  left: 1366px;
  top: 35%;
  width: 534px;
  height: 260px;
  display: flex;
}

.title {
  border-width: 0px;
  width: 100%;
  height: 40px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  color: #00ffff;
  padding: 2%;
  text-align: justify;
}

.box {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  text-align: center;
  line-height: normal;
  text-transform: none;
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 535px;
  height: 260px;
  background: inherit;
  background-color: rgba(3, 25, 67, 0.698039215686274);
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

#stxf_echart {
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
  //   left: -28%;
  //   top: 7%;
}

.item {
  p {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    margin-top: 3%;
    margin-right: 3%;
  }

  span {
    color: #00ffff;
    font-weight: 1000;
  }
}
</style>