vue,echarts同一div连续使用两次同一组件

最新推荐文章于 2023-09-01 16:56:48 发布

小葡萄吖

最新推荐文章于 2023-09-01 16:56:48 发布

阅读量398

点赞数

文章标签： vue echarts

本文链接：https://blog.csdn.net/qq_41944263/article/details/118391888

版权

父组件：

    <div class="Vcircles">
      <Progresscir :tabledata="yhzgl"
                   :id="123"
                   :title='"隐患整改率"'>
      </Progresscir>
      <Progresscir :tabledata="wdgcysl"
                   :id="456"
                   :title='"危大工程验收率"'>
      </Progresscir>
    </div>

子组件

<template>
  <div class="processcir"
       id="processcir1">

    <!-- <div>{{tabledata}}</div> -->
    <div :id="id"
         class="PiePlace1"></div>
    <div class="title-text">{{title}}</div>
    <!-- <div class="star-text"></div> -->

    <!-- <dv-decoration-9 style="width:1.08rem;height:1.08rem;margin-top: 0.2rem;color:#2FFFFF">{{ tabledata }}</dv-decoration-9> -->
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "index",
  components: {
  },
  data () {
    return {
      correctRate: 72,

    }
  },
  watch: {
    tabledata: function (newVal, oldVal) {
      console.log("##################newData", newVal)
      this.correctRate = newVal.substring(0, 5)
      this.setOptions()
    },
  },
  methods: {
    setOptions () { //更新数据
      console.log("########tabledata", this.correctRate)
      this.Progresscir = echarts.init(document.getElementById(this.id));
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}({d}%)'
        },
        series: [
          {
            name: "完成率",
            type: "pie",
            radius: ["60%", "87%"],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'center',
                  formatter: this.correctRate + "%",
                  textStyle: {
                    color: '#3D414B',
                    fontSize: '14',
                    fontFamily: 'Arial',
                    fontWeight: 'bold',
                    color: '#2FFFFF'
                  }
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100 - this.correctRate,
                name: "未完成",
                itemStyle: {
                  color: '#004970'
                }
              },
              {
                value: this.correctRate,
                name: "完成",
                itemStyle: {
                  normal: {//颜色渐变

                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        { offset: 0, color: '#00D2FF' },
                        { offset: 0.5, color: '#0CB9FF' },
                        { offset: 1, color: '#F0FF00' }
                      ]
                    )
                  }
                }
              }
            ]

          }
        ],
      };

      this.Progresscir.clear();
      this.Progresscir.resize(
        {
          width: document.getElementById(this.id).width,
          height: document.getElementById(this.id).heidth
        }
      )


      this.Progresscir.setOption(option,)
    },

  },
  props: {
    id: String,
    // 数值
    tabledata: {
      type: String,
      default: "99",
    },
    // 标题
    title: {
      type: String,
      default: "0",
    },


  },

  mounted () {
    this.setOptions();
  }
}
</script>

<style scoped>
.PiePlace1 {
  width: 100%;
  height: 80%;
}
.title-text {
  /* width: 100%; */
  height: 20%;
  margin-bottom: 0.125rem;
  margin-left: 0.09rem;
  font-size: 0.175rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.PiePlace {
  width: 87px;
  height: 87px;
}
.processcir {
  width: 100%;
  height: 100%;
  font-size: 0.18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.title-text {
  display: flex;
  align-items: center;
}
</style>