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绘制柱状图的完整示例 需求说明 一张会 ...
随机推荐
- C++经典面试算法题
转自:http://blog.csdn.net/f_r_e_e_x/article/details/50770907 //1.实现strcpy. char* MyStrCpy( char *pDest ...
- 《深入理解Java虚拟机》笔记02 -- 垃圾收集算法
1. 标记 - 清除算法 先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象.它是最基础的收集算法.其他收集算法都是根据其思路,改进其不足之处. 缺点:1) 标记和清除两个阶段的效率都不 ...
- 2017-9-9 NOIP模拟赛
站军姿 2bc*cosA=b^2+c^2-a^2 #include<cstdio> #include<cstdlib> #include<cmath> #inclu ...
- 洛谷P2687 [USACO4.3]逢低吸纳Buy Low, Buy Lower
P2687 [USACO4.3]逢低吸纳Buy Low, Buy Lower 题目描述 “逢低吸纳”是炒股的一条成功秘诀.如果你想成为一个成功的投资者,就要遵守这条秘诀: "逢低吸纳,越低越 ...
- 洛谷P3688/uoj#291. [ZJOI2017]树状数组
传送门(uoj) 传送门(洛谷) 这里是题解以及我的卡常数历程 话说后面那几组数据莫不是lxl出的这么毒 首先不难发现这个东西把查询前缀和变成了查询后缀和,结果就是查了\([l-1,r-1]\)的区间 ...
- Java基础--环境配置、简介
一.环境配置 1.傻瓜式安装JDK,若提示安装JRE,将其置于JDK同一安装目录即可. 2.配置JAVA_HOME, 指向JDK的安装目录.比如 JAVA_HOME = %JDK安装目录% 3.配置 ...
- iOS 根据文字字数动态确定Label宽高
iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UI ...
- Zookeeper入门看这篇就够了!!
Zookeeper是什么 官方文档上这么解释zookeeper,它是一个分布式服务框架,是Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名 ...
- scrapy-redis 分布式哔哩哔哩网站用户爬虫
scrapy里面,对每次请求的url都有一个指纹,这个指纹就是判断url是否被请求过的.默认是开启指纹即一个URL请求一次.如果我们使用分布式在多台机上面爬取数据,为了让爬虫的数据不重复,我们也需要一 ...
- Hadoop数据管理
本节主要从三方面介绍Hadoop数据管理:分布式文件系统HDFS.分部式数据库HBase和数据仓库工具Hive. 1. HDFS的数据管理 HDFS是分布式计算的存储基石,Hadoop分布式文件系统和 ...