Vue 中循环渲染多个相同 echarts 图表,并传入不同的数据

最新推荐文章于 2024-08-19 13:30:48 发布

weixin_49035434

最新推荐文章于 2024-08-19 13:30:48 发布

阅读量3.1k

点赞数 3

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/weixin_49035434/article/details/120748137

版权

该博客展示了如何在Vue.js应用中使用v-for指令动态创建多个ECharts图表，每个图表对应不同的数据。通过监听levelNameList数据变化，实现了图表的更新。同时，利用窗口的resize事件确保图表自适应调整大小。文章详细阐述了组件结构、数据处理以及ECharts的配置和初始化过程。

摘要由CSDN通过智能技术生成

在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。

例如:


<template>
  <div class="projectCost">
    <div class='overviewModel'> 
      <div class='one'  v-for="(item,index) in levelNameList" :key="index">
        <div class="roseChart" :id='forId(index)'></div> 
        <p class='title'>{{item.levelName}}</p>
        <div class='list'>
            <echarts-list 
            v-for="(el, i) in item.boilers"
            :key="i"
            :color="colorList[i]"
            :data="el"></echarts-list>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import EchartsList from './EchartList'
import { echartsFont } from "@/utils/util"; 
export default {
  props:{
    levelNameList:{   //父组件传递过来的数据
      type: Array,
      default: () => {return []}
    }
  },
  components: {EchartsList},
  data(){
    return {
        colorList: [
            "#0a9aea",
            "#FFC100",
            "#e50ec2",
            "#4fdd14",
            "#0780ed",
        ],
        getId: [],
    }
  },
  mounted(){
    //每一个echarts都做到自适应
    window.addEventListener("resize", () => {
        this.getId && this.getId.forEach((item,index) => {
            this.getId[index].resize()
        });
    });
  },
  methods:{
    forId(index) {
      return 'roseChart' + index
    },
    drawRose(){
      this.$nextTick(function(){
        for(var i = 0;i < this.levelNameList.length;i++ ){ 
          this.getId.push(echarts.init(document.getElementById('roseChart'+i)));
          this.getId[i].setOption({
              title: {
                            //这个地方是计算总数的
                  text: "{a|" + this.levelNameList[i].boilers.reduce((pre, cur) => {return pre + cur.value*1},0) + "}\n{c|" + "总数" + "}",
                  x: "center",
                  y: "center",
                  textStyle: {
                    rich: {
                      a: {
                          fontSize: echartsFont(0.25),
                          color: "#333",
                          fontWeight: "600",
                          lineHeight: 40,
                      },
                      c: {
                          fontSize: echartsFont(0.14),
                          color: "#666",
                          padding: [5, 0],
                      },
                    },
                  },
              },
              tooltip: {
                  trigger: 'item',
                  show: false,
              },
              legend: {
                  top: '5%',
                  left: 'center'
              },
              color: this.colorList,
              series: [
                {
                  name: '最外层细圆环',
                  type: 'pie',
                  radius: ['70%', '97%'],
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  silent: true,
                  hoverAnimation: false,
                  label: {
                      show: false,
                  },
                  labelLine: {
                      show: false
                  },
                    //展示要渲染的数据,渲染不同的内容
                  data: this.levelNameList[i].boilers.map(item => item.value)
                }
              ]
          })
        }
      })
    }
  },
  watch: {
    levelNameList:{
      immediate: true,
      deep: true,
      handler(value) {
        if(!value) return
        this.getId = []
        console.log('监听levelNameList的变化',value);
        this.drawRose()
      }
    }
  }
}

</script>

<style lang="less" scoped>
.projectCost{
    width: 100%;
    height: 100%;
  .overviewModel{
    width: 100%;
    overflow-y: auto;
    height: 100%;
    padding-right: 13px;
    .one{
      position: relative;
      width: 100%;
      border-bottom: 2px solid #e9e9e9;
      .roseChart{
        width: 35%;
        margin-top: 1.25vw;
        height: 14vw !important;
      }
    }
    .one:last-child{
      border: none;
    }
    .title{
      position: absolute;
      font-size: 0.926vw;
      font-weight: 500;
      top: 0;
      left: 0;
      color: #333333;
      width: 100%;
      height: 30px;
      z-index: 1;
    }
    .list{
      z-index: 2;
      position: absolute;
      top: 0.925vw;
      width: calc(65% - 30px);
      right: 20px;
      box-sizing: border-box;
    }
  }
}
</style>