let a = parseInt(Math.random() * (2 + 1), 10);
let arr = [];
arr.push(res[a]);
let option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
}, series: [
{
name: "舆论占比",
type: "gauge",
// detail: { formatter: "{value}%" },
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.1, "#91c7ae"], [0.2, "#3366ff"], [1, "#00b5ff"]]
}
},
axisLabel:{
show:false
},
// data: [{ value: 50, name: "完成率" }]
data: arr,
title: { color:'white' },
detail: {
formatter: "{value}%",
offsetCenter: [0, "90%"] // x, y,百分比下移
}
}
]
}; this.protimer = setInterval(() => {
option.series[0].data[0] = res[parseInt(Math.random() * (2 + 1), 10)];
myChart.setOption(option, true);
}, 2000);

vue 要清除定时器哈,这儿没写,

        option.series[0].data[0] = res[parseInt(Math.random() * (2 + 1), 10)];
最重要的是这一句代码,
因为这个数据是我写的,只有好评中评差评三个数据,所以要取0-2随机数,取到之后,data[取到的随机数] 就是其中一个(随机好评 差评 中评),就达到了他要的动起来的效果, 这里又来复习一遍js基础了
Math.random() 函数返回一个浮点,  伪随机数在范围[0,1),也就是说,从0(包括0)往上,但是不包括1(排除1)
Math.random()--->0.2910379900668536(随机),既然他不能生成1 那我们就假象最大能生成1 ,则
Math.random()*5表示最大值是5(这是假象的,最大不可能是5 ,只能说无限接近5),so,生成0-2之间(包括2就简单了啊)
Math.random()*3--->最大才3(不包括)最小0 满足要求,注意这里生成的浮点数,要转整数,so
parseInt(Math.random() * 3, 10)这里又有问题了啊,这个10又是什么鬼,说白了就是以10进制为基数,你不写默认为10,
你也可以不用parseInt 用Math.floor 地板流一样的


												

echarts实现仪表盘(自己动起来,没有后端,顺便重温math.random的更多相关文章

  1. Echarts关于仪表盘

    https://blog.csdn.net/zc763375777/article/details/53837391 来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如 ...

  2. ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

    ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...

  3. Echarts——更改仪表盘方向和颜色

    做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...

  4. echarts gauge 仪表盘去除外发光效果

    textStyle中加shadow选项: textStyle: { shadowColor : '#000', //默认透明 shadowBlur: 0 }

  5. ECharts学习(4)--仪表盘

    1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...

  6. echarts 专题

    todo:缩放 5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的 ...

  7. ECharts 之一——入门

    一.简介 ECharts是一个来自百度的开源的javascript图标库.通过ECharts我们可以呈现出多种类型的图表.ECharts底层基于ZRender(一个全新的轻量级canvas类库),创建 ...

  8. echarts对每个data[i]的图片添加点击事件

    1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...

  9. Django+Echarts画图实例

    所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法 获取一个Django+Echarts绘制柱状图的完整示例 需求说明 一张会 ...

随机推荐

  1. Solr 6.7学习笔记(03)-- 样例配置文件 solrconfig.xml

    位于:${solr.home}\example\techproducts\solr\techproducts\conf\solrconfig.xml <?xml version="1. ...

  2. python2与python3 版本区别

    目录 编码 输入输出 中文 除法 长整形 内置函数map xrange init reduce 字符串类型 dict字典 经典类 新式类 未完待补充 编码 python2默认编码器为ascii码(只支 ...

  3. 【TIDB】4、业界使用情况

    一.小米 1.背景 小米关系型存储数据库首选 MySQL,单机 2.6T 磁盘.由于小米手机销量的快速上升和 MIUI 负一屏用户量的快速增加,导致负一屏快递业务数据的数据量增长非常快, 每天的读写量 ...

  4. layui实现下拉分类多级

    Layui tree 下拉菜单树   1.效果: 2.html  代码: <!DOCTYPE html> <html> <head> <meta charse ...

  5. blur和focus的运用

    这两个事件不仅仅只能运用与input.span之类的元素.还可以运用于window. 可以切换title. 当切换当前页面时,改变title的文字为‘离开了’. <!DOCTYPE html&g ...

  6. Python面向对象之结构与成员

    1.面向对象结构分析: ----面相对象整体大致分为两块区域: --------第一部分:静态字段(静态变量)部分 --------第二部分:方法部分 --每个大区域可以分为多个小部分: class ...

  7. BZOJ 1036 && Luogu P2590 [ZJOI2008]树的统计 树链剖分

    链剖裸题...你值得一做~ 用线段树多维护一个mx,少写一个tag #include<cstdio> #include<iostream> #define ll long lo ...

  8. 长春理工大学第十四届程序设计竞赛(重现赛)B.Bowling Game

    链接:https://ac.nowcoder.com/acm/contest/912/B 题意: 链接:https://ac.nowcoder.com/acm/contest/912/B来源:牛客网 ...

  9. 引入clipboard.js

    引入clipboard.js var clipboardJS = new ClipboardJS('#accept-data'); // 括号内的是选择器

  10. spring tx:advice事务配置

    http://blog.csdn.net/bao19901210/article/details/17226439 http://blog.csdn.net/rong_wz/article/detai ...