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

4 篇文章 0 订阅

背景:当时项目上,请求数据后,出现两条数据,一条是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 }
    ]
  },

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
⼤数据全样⽽⾮抽样原理_⼀⽂带你了解什么是⼤数据 科技是第⼀⽣产⼒。进⼊世纪的第⼀个20年以来,⼈们越来越多地将关注的领域集中在⼤数据、⼈⼯智能、云计算、物联⽹、移动互联 ⽹、GIS、AR与VR、5G、区块链、数字化与智慧化等,尤其为最近的风⼝"ABC"。笔者也⼀直在关注这⽅⾯的研究与学习,最近趁着 有时间,将把⼀些科普性的概念写出来,以帮助关注该领域的⼈更好地理解这⼏个热点领域的知识,本次分享将介绍⼀下⼤数据的产⽣、概 念、影响以及技术⽀撑。 1、Why.为什么会产⽣⼤数据? 我们遇到⼀个概念或者⼀个问题的思路就是去问"为什么?"同样,提起到⼤数据,我们会想,之前为什么不是⼤数据时代(DT),为什么现 在是?这⾥我分享⼏点我的看法。⼀个⽅⾯,产⽣⼤数据的⼀个基础是我们的计算存储技术发⽣了⾰命性的变化,从数据⼤⼩的单位来看, 数据⼤⼩的单位可以分为Bit 现在我们称为⼤数据,我相信单位⾄少是PB级别的,因为TB已经在我们的⽣活中很常见。存储技术的发展使得计算机的存储能⼒得到了飞 速的进步,我们不会再像以前那样为了节省空间会清理掉部分的数据,⽽是基本上在那个地⽅放着。基于⾜够性价⽐、⾜够低成本的存储技 术,这使得数据变得"⼤"有了最基本的⽀撑。另⼀个⽅⾯,数据产⽣的主体与范围发⽣了重要的变化,之前数据的产⽣只靠计算⼯作⼈员 与运营⼈员的输⼊,⽽现在随着⾃媒体的发展,⼈⼈都是数据的⽣产者,数据的量呈指数增长,最近⼜随着物联⽹、感知监测设备、GIS等 技术的发展,不仅⼈是数据产⽣的组成部分,其他⾮⼈物体、地⾯信息、空⽓检测信息都能作为数据产⽣源,并且⽆时⽆刻都在产⽣数据。 总结来说,过去我们对数据做"减法",现在我们不减,⽽且持续在做"加法"。 2、what,⼤数据的概念及特征 ⼤数据主要体现在⼀个"⼤"⼤字上⾯,谈及⼤数据,我们经常⽤"4V"来描述,第⼀,Volume,即容量⼤、体积⼤,正如前⾯所说,⼤ 数据的单位应该以PB起步,企业甚⾄可以到EB。第⼆个,Velocity,即⾼速,速率快,⼤数据产⽣的速度是很快的,有个知名的说法,即⼤ 数摩尔定律,据测算,现在每两年数据就会翻⼀倍,这个增长量是及其可怕的。第三个,Variety多样性,之前产⽣的数据多半是结构化的 数据,⽐如多是数值型,⽽现在越来越多产⽣⽚,⾳频,视频,⽹页等半结构化的数据,数据类型的多样性也是⼤数据的重要体现。第四 个,Value,即有价值但⼜密度低,⼤数据的背后藏着丰富的商业价值,但是因为海量数据,真正有价值的数据却很难挖掘,数据的价值密度 很低。 3、⼤数据的影响 ⼤数据的影响可以主要概括为,全样⽽⾮抽样,效率⽽⾮准确,相关⽽⾮推断。以前我们获得数据很难,我们会抽样作分析,现在随着⼤数 据的⽀撑,我们做全样研究很简洁⽅便。基于之前的抽样研究,我们往往追求模型的准确性,⽽忽略了效率,⼤数据的时代,分秒必争,在 这⼀秒,数据是有价值的,⽽到下⼀秒,数据就会失去价值,所以⼤数据时代,效率是王道。最后我们不会再关注特征与特征之间,或者说 变量与变量之间的因果推断,⽽是发现他们相关即可,这在智能推送过程中显得尤为重要。 4、⼤数据的技术⽀撑 ⼤数据的技术⽀撑主要体现在四个⽅⾯,主要是数据采集,数据存储与管理、数据处理与分析、数据隐私与安全。其中最为核⼼的是存储与 处理,两者都采⽤分布式原理,即分布式存储,主要有HDFS,NoSQL,NewSQL;分布式处理,即MapReduce。数据的存储利⽤分布式⽂ 件系统,云数据库,实现对结构化、半结构化和⾮结构化海量数据进⾏存储。⽽数据处理利⽤分布式并⾏编程模型,集合机器学习与数据挖 掘算法,实现对海量数据的处理与分析,并对分析结构进⾏可视化呈现。
要在Echarts中创建一个带有动效果的环形,可以按照以下步骤进行操作: 1. 首先,确保已经引入了Echarts库,并在页面中创建一个容器,用于显示表。例如: ```html <div id="chartContainer" style="width: 600px; height: 400px;"></div> ``` 2. 在JavaScript中,使用Echarts的初始化方法创建一个表实例,并指定容器的id: ```javascript var myChart = echarts.init(document.getElementById('chartContainer')); ``` 3. 定义环形的数据和样式。这里以简单的示例为例,创建一个包含两个数据项的环形: ```javascript var data = [ {value: 335, name: '数据项1'}, {value: 310, name: '数据项2'} ]; ``` 4. 设置环形的配置项,包括标题、例、动效果等: ```javascript var option = { title: { text: '环形示例', x: 'center' }, legend: { orient: 'vertical', right: 10, top: 30, data: ['数据项1', '数据项2'] }, series: [ { name: '环形', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: data } ] }; ``` 5. 最后,将配置项应用到表实例中,并使用setOption方法来渲染表: ```javascript myChart.setOption(option); ``` 通过以上步骤,你就可以在Echarts中创建一个带有动效果的环形了。可以根据实际需求修改数据和样式配置来自定义表的显示效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值