v-charts环图不显示问题

最新推荐文章于 2024-07-16 15:41:11 发布

qdcxy0

最新推荐文章于 2024-07-16 15:41:11 发布

阅读量1.7k

点赞数 2

分类专栏： vue 随录 echarts

本文链接：https://blog.csdn.net/xx_ll_/article/details/111303096

版权

vue 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

随录

8 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

本文档介绍了一个Vue项目中遇到的v-charts环图在van-swipe组件内不显示的问题及解决方案。通过在`created()`钩子中使用 `$nextTick` 并调用 `resize` 方法，确保环图在滑动切换后能正确渲染。示例代码展示了如何结合vant组件和v-charts组件创建滑动显示不同环图的效果。

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

解决v-charts环图不显示问题

在vue项目中使用vant组件和v-charts组件来实现滑动展示两个不同的环图，开始的时候环图一直显示不出来，解决办法：

   created() {
    this.$nextTick(() => {
      // 解决v-charts不显示问题
      // 调用以下的方法实现环图重新渲染
      this.$refs.chart_one.echarts.resize()
      this.$refs.chart_two.echarts.resize()
    })
  },

显示效果如下：
左右滑动显示不同的环图

在这里插入图片描述
完整代码：

<template>
  <div class="content">
    <div class="top-content">
      <van-swipe :loop="false" :height="400">
        <van-swipe-item>
          <div class="chartBox">
            <div class="title">水果汇总</div>
            <div class="objCount">总个数：{{ count1 }}个</div>
            <ve-ring
              ref="chart_one"
              style="height:400px"
              :extend="chartExtend"
              :data="chartData1"
              :settings="chartSettings"
              :events="chartEvents"
            />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="chartBox">
            <div class="title">颜色汇总</div>
            <div class="objCount">总个数：{{ count2 }}个</div>
            <ve-ring
              ref="chart_two"
              style="height:400px"
              :extend="chartExtend"
              :data="chartData2"
              :settings="chartSettings"
              :events="chartEvents"
            />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 设置环形图半径
    this.chartSettings = {
      radius: [60, 100],
      // offsetY: 300
      label: {
        formatter: params => {
          return `${params.data.name}:${params.data.value}个`
        }
      }
    }
    // 提示框内容
    // this.tooltip = {
    //   trigger: 'axis'
    // }
    this.chartExtend = {
      legend: {
        show: true,
        bottom: 'bottom'
      }
    }
    // 饼图点击事件
    const _this = this
    this.chartEvents = {
      click: function(e) {
        console.log(e)
        _this.getData()
      }
    }
    return {
      count1: 56, 
      chartData1: {
        columns: ['name', 'number'],
        rows: [
          {
            name: '菠萝',
            number: 10
          }, {
            name: '红西柚',
            number: 22
          }, {
            name: '猕猴桃',
            number: 16
          }, {
            name: '苹果',
            number: 18
          }

        ]
      },
      count2: 66,
      chartData2: {
        columns: ['name', 'number'],
        rows: [
          {
            name: '红色',
            number: 77
          }, {
            name: '黄色',
            number: 55
          }, {
            name: '绿色',
            number: 88
          }, {
            name: '白色',
            number: 66
          }
        ]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      // 解决v-charts不显示问题
      // 调用以下的方法实现环图重新渲染
      this.$refs.chart_one.echarts.resize()
      this.$refs.chart_two.echarts.resize()
    })
  },
  methods: {
    // 获取数据
    getData() {
      // .......
    }
  }
}
</script>
<style lang="less" scoped>
.content{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.2rem;
  margin-bottom: 1.33333rem;
  overflow-y: scroll;
  .top-content{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: white;
    padding-bottom: 10px;
  }
  // 环形图样式
  .chartBox{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    border: 1px solid #F2F2F2;
    border-radius: 0.2rem;
    margin-bottom: 0.2rem;
    .objCount{
      position: absolute;
      // z-index: 10000;
      top: 46%;
      left: 37%;
      width:100px;
      font-size: 0.4rem;
      color: #666666;
    }
    .title{
      position: absolute;
      left: 40%;
      top: 30px;
      font-size: 0.4rem;
      font-weight: 600;
      color: #666666;
    }
  }
  // 小圆点显示位置
  /deep/.van-swipe__indicators {
    position: absolute;
    bottom: 40px;
  }

}
</style>