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. 洛谷 - P1631 - 序列合并 - 堆

    https://www.luogu.org/problemnew/show/P1631 序列a中每个数首先都和序列b中的最小元素配对(虽然好像不是很必要这么早插进来?) 每次从堆顶取出最小的和输出答案 ...

  2. 计算机视觉(CV)前沿国际国内期刊与会议

    计算机视觉(CV)前沿国际国内期刊与会议1.国际会议 2.国际期刊 3.国内期刊 4.神经网络 5.CV 6.数字图象 7.教育资源,大学 8.常见问题 1. 国际会议现在,国际上计算机视觉方面的三大 ...

  3. 学习SpringMVC时遇到的一些问题

    1. 找不到mapping 比较弱智的问题,忘了在对应的类上加上 @Controller 注解了 2. Model中设置的值不显示 Eclipse 自动生成的web.xml 是 2.3版本的,网上说改 ...

  4. 设计模式-命令模式(Command)

    关注公众号 JavaStorm 获取更多成长. 大约需要6分钟读完.建议收藏后阅读. 命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请求排队或者记录请求日 ...

  5. git 的基本设置以及使用

    https://www.linuxidc.com/Linux/2018-05/152611.htm 详解git add , git commit , git push, 等命令 https://blo ...

  6. Spring配置文件xsi:schemaLocation无法解析导致启动失败的解决方案

    今天遇到过情况,spring的配置文件在本地读取没有问题,扔到线上服务器运行就报无法解析xml,找了很久问题,发现是因为线上服务器无法上网,导致无法下载相关的xsd文件,没办法不能上网就只有使用本地的 ...

  7. ios Realm的使用 本地数据存储

    引入需要的文件 pod 'RealmSwift' pod 'Realm' 然后在命令行使用 (首先应该cd到项目的根目录)输入 pod install 等待下载就行了(这个下载有点费劲,其他的插件包下 ...

  8. VlAN-9-存储VLAN配置

    vlan和vtp配置可能存储在vlan.dat和运行配置中 对于vtp v3来说无论哪种模式正常和拓展范围的vlan都被存储在vlan.dat文件中,如果为透明或off,vlan配置也会出现在运行配置 ...

  9. Codeforces Round #565 (Div. 3) C. Lose it!

    链接: https://codeforces.com/contest/1176/problem/C 题意: You are given an array a consisting of n integ ...

  10. AD7606笔记

    V1~V8共8个ADC通道: REFIN/OUT:基准电源,可选择内部(REF_SLECT=1)的或者外部的(REF_SLECT=0) VDIRVE:MCU的的VCC,2.3~5V.逻辑电平指的是需要 ...