echarts 环形图出现画闪烁,画两次的现象。

背景:当时项目上,请求数据后,出现两条数据,一条是0,一条的正常数据情况, 发现有闪烁问题。把初始值,改得不一样的时候,发现也是有闪动现象,感觉画了两次,

问题:仔细观察了一下。发现因为设置了初始值的问题。因为初始化的时候 echarts设置了初始值,后面网络请求成功后,拿到数据后,又画了一次 ,所以导致了画两次的现象,也就是闪动。

解决办法:就是把初始值干掉就可以了。


 初始化init
 drawChart_circular(id) {
      this.c_chart = this.$echarts.init(document.getElementById(id))
      // 使用刚指定的配置项和数据显示图表。
      this.c_chart.setOption(circular_option)
    },

	//网络请求部分
   queryData() {
      queryStatistics({
        // 请求参数
        departDateFrom: this.startDateTime,
        departDateTo: this.endDateTime
      }).then(({ success, data }) => {
        if (success) {
          this.datas = data
          //设置标题
          circular_option.title.text = data.containerCount + ''
          //设置数据 dataset 
          circular_option.dataset.source = [
            { value: data.cityInCount, name: '数据名称1' },
            { value: data.cityOutCount, name: '数据名称2' }
          ]
          this.c_chart.clear()
          this.c_chart.setOption(circular_option)

        }
      })
    }

option的data 数据部分 注释掉dataset数据或者data数据如下:

  series: [
    {
      name: '',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      // clockwise: false,
      label: { //  饼图图形上的文本标签
        normal: { // normal 是图形在默认状态下的样式
          show: true,
          position: 'top',
          color: '#384744',
          fontSize: 12,
          formatter: p => {
            console.log(p)
            return Math.round(p.percent) + '%'
          }
        }
      },
	//注释掉data数据 防止请求数据后画两次
      // data: [
      //   { value: 10, name: '流向市内' },
      //   { value: 0, name: '流向市外' },
      // ]
    }
  ],
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中,
    // 默认把第一个维度映射到 X 轴上,第二个维度映射到 Y 轴上。
    // 如果不指定 dimensions,也可以通过指定 series.encode
    // 完成映射,参见后文。
    dimensions: ['name', 'value'],
    //	//注释掉data数据 防止请求数据后画两次
    source: [
      // { name: '', 'value': 0, },
      // { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      // { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      // { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值