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. hdu1506 直方图中最大的矩形 单调栈入门

    hdu1506 直方图中最大的矩形 单调栈入门 直方图是由在公共基线对齐的矩形序列组成的多边形.矩形具有相同的宽度,但可能具有不同的高度.例如,左侧的数字显示了由高度为2,1,4,5,1,3,3的矩形 ...

  3. Sublime Text 3 最新注册码激活码 和 Sublime Text 2 注册码

    Sublime是一款很好用的很轻巧的编辑器,堪称一代神级编辑器.此篇文章用于简单学习记录下神器的激活码,不作其他用途.如有侵权,请联系删除,谢谢~~   1.官方下载地址: http://www.su ...

  4. Java基础--常用API--日期相关API

    一.java.util.Date 1.只用于显示系统时间,其大部分操作由Calendar代替. 格林威治时间(GMT):指的是1970年1月1日0时,不同地区有时间差. 默认输出格式:星期.月.日.时 ...

  5. day6作业详解

    1.day6题目 1,老男孩好声⾳选秀⼤赛评委在打分的时候呢, 可以进⾏输入. 假设, 老男孩有10个评委. 让10个评委进⾏打分, 要求, 分数必须⼤于5分, 小于10分. 电影投票. 程序先给出⼀ ...

  6. JXl常用解析详解

    目的: java解析 excel 无非就是apache poi 或者 jxl 两者在使用上其实都差不多,关键还是看你自己熟悉那个,用那个!我也是初次接触jxl 看很多博客说 jxl只适用于处理小数据量 ...

  7. php:两个文件夹递归地比较,没有的文件自动复制过去

    仿站时,通常默认模板文件和新的模板文件大部分都是一样的,下面代码可以用于比较文件是否缺失(和默认模板做比较) 如果缺失自动复制过去~~ <?php /** * used:新模板和default模 ...

  8. Java EE学习笔记(十)

    MyBatis与Spring的整合 1.整合环境搭建 1).要实现MyBatis与Spring的整合,很明显需要这两个框架的JAR包,但是只使用这两个框架中所提供的JAR包是不够的,还需要其他的JAR ...

  9. 去掉 Ctrl + A 全选

    import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.table.*; public ...

  10. Android 下的 SQLite 操作封装 —— DatabaseUtil

    看到别人写的代码不错,对自己目前的开发很有用,所以转载一下,希望也能帮助到其他人: 1.DatabaseUtil.java(封装的类) package com.dbexample; import an ...