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绘制柱状图的完整示例 需求说明 一张会 ...
随机推荐
- 模板 - 动态规划 - 数位dp
#include<bits/stdc++.h> using namespace std; #define ll long long ]; ll dp[][/*可能需要的状态2*/];//不 ...
- 【实验吧】该题不简单——writeup
题目地址:http://ctf5.shiyanbar.com/crack/3/ 一定要注意读题: 要求找出用户名为hello的注册码,这八成就是 要写注册机啊! ——————————————————— ...
- day6作业详解
1.day6题目 1,老男孩好声⾳选秀⼤赛评委在打分的时候呢, 可以进⾏输入. 假设, 老男孩有10个评委. 让10个评委进⾏打分, 要求, 分数必须⼤于5分, 小于10分. 电影投票. 程序先给出⼀ ...
- 利用Hough变换识别图像中的直线
引入 近期看到2015年数学建模A题太阳影子定位中的第四问,需要根据附件中视频里的直杆的太阳影子的变化确定拍摄地点.其实确定拍摄地点这个问题并不是十分困难,因为有前三问的铺垫,我们已经得出了太阳影子长 ...
- Sanic框架
Sanic框架 1. 入门 Sanic 是一款类似Flask的Web服务器,它运行在Python 3.5+上. 除了与Flask功能类似之外,它还支持异步请求处理,这意味着你可以使用Python3.5 ...
- HDU-2767-ProvingEquivalences
链接:https://vjudge.net/problem/HDU-2767 题意: 给一个图,求最少需要几条边将其连成一个强连通图 思路: tarjan,缩点,考虑缩点后的图,出度为0的点和入度为0 ...
- sublime下Docblocker插件自定义配置
1.下载安装Docblocker插件 栏目preferences-->Package Control 输入 Docblocker 搜索插件,单击安装 简单使用: 在函数头部输入: /** 按 ...
- 解决Linux下SSH等终端乱码问题
1.vi /etc/sysconfig/i18n Centos5.5原来内容是: //LANG="en_US.UTF-8" //SYSFONT="latarcyrheb- ...
- Ionic开发-搭建开发环境
1安装node.js 2安装ionic & cordova: 命令行输入:npm install –g cordova ionic 注:-g表示全局安装,也可以进入指定的目录安装,但这里推荐全 ...
- form-data、x-www-form-urlencoded、raw、binary的区别
1.form-data: 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件时 ...