echarts实现仪表盘(自己动起来,没有后端,顺便重温math.random
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的更多相关文章
- Echarts关于仪表盘
https://blog.csdn.net/zc763375777/article/details/53837391 来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如 ...
- ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...
- Echarts——更改仪表盘方向和颜色
做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...
- echarts gauge 仪表盘去除外发光效果
textStyle中加shadow选项: textStyle: { shadowColor : '#000', //默认透明 shadowBlur: 0 }
- ECharts学习(4)--仪表盘
1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...
- echarts 专题
todo:缩放 5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的 ...
- ECharts 之一——入门
一.简介 ECharts是一个来自百度的开源的javascript图标库.通过ECharts我们可以呈现出多种类型的图表.ECharts底层基于ZRender(一个全新的轻量级canvas类库),创建 ...
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
- Django+Echarts画图实例
所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法 获取一个Django+Echarts绘制柱状图的完整示例 需求说明 一张会 ...
随机推荐
- 渲染路径-Unity5 的新旧推迟渲染Deferred Lighting Rendering Path
Unity5 的新旧延迟渲染Deferred Lighting Rendering Path unity5 的render path ,比4的区别就是使用的新的deferred rendering,之 ...
- DOM事件-级别
DOM事件0~3 不同级别的DOM事件因其实现方式不同,都有自己的特性. 0级:是在dom元素上提供相关事件类型属性,js程序可以通过这些特定类型的属性注册事件处理程序. 特性:一个元素同种类型的事件 ...
- ZROI WC Round1 题解
ZROI WC Round1 题解 Problem A 题意 一个 \(n \times m\) 格子图,一个人从左上角出发,每次向右或者向下走一格,方法如下: 如果他在最下面一排,那么他会往右行走. ...
- csdn自动展开+去广告+净化剪切板+免登陆(如有侵权,立即删博)
对于csdn的广告大家想必......又没钱充VIP,怎么办,下面是脚本源码: 重要的事说三遍:如有侵权,立即删除!如有侵权,立即删除!如有侵权,立即删除! // ==UserScript== // ...
- 2017ACM/ICPC广西邀请赛 A Math Problem
解法:发现..最多15个,那么..暴力一下啦 #include <iostream> #include <stdio.h> #include <vector> #i ...
- net core 认证及简单集群
net core 认证及简单集群 在Asp.net WebAPI中,认证是通过AuthenticationFilter过滤器实现的,我们通常的做法是自定义AuthenticationFilter,实现 ...
- B. Batch Sort
http://codeforces.com/contest/724/problem/B 被坑了,一开始以为如果有一行已经是排好序了,然后有一行需要转换的次数 >= 2的话,那就直接no了. 因为 ...
- (转)磁盘阵列RAID原理、种类及性能优缺点对比
磁盘阵列RAID原理.种类及性能优缺点对比 原文:http://www.cnblogs.com/chuncn/p/6008173.html 磁盘阵列(Redundant Arrays of Indep ...
- Zeppelin的入门使用系列之使用Zeppelin来创建临时表UserTable(三)
不多说,直接上干货! 前期博客 Zeppelin的入门使用系列之使用Zeppelin运行shell命令(二) 我们必须要先使用Spark 语句创建临时表UserTable,后续才能使用Spark SQ ...
- code review的意义
https://blog.csdn.net/brodycai/article/details/19636621