echarts 设置仪表盘数字的位置_一个 ECharts 做的猜数小游戏

大概 1 年多之前，一位老同学找到我，问能不能帮他做一个非常简单的猜数字游戏，需求是这样的：

在 1 到 100 的整数里，随机选一个数字，让小朋友们猜；

如果猜错了，告知小朋友猜大了还是猜小了；
如果猜中了，游戏结束。

正好那段时间，我一直在用ECharts做统计图表。一听到这个需求，马上想到用ECharts的交互效果就能做，而且比直接写程序要省事得多。于是答应他中午午休给他做，1小时左右交差。

结果ECharts果然好用，1小时内实现功能 + 调了调细节交付，1 个 HTML 文件 + 2 个 JS 文件（自己写的 JS + echarts.min.js）就搞定了。思路大致是这样的：

用了基于直角坐标系的热力图（heatmap）和仪表盘图（gauge），去掉直角坐标系的坐标轴（xAxis.show = false, yAxis.show = false），去掉仪表盘指针和刻度值（axisLabel.show = false）等；

点击热力图猜数，仪表盘显示结果（监听 click 事件，设置回调函数更新图表），同时把用不到的数字按钮去掉。

关键代码部分

代码水平可能比较低…因为我是工作之余凭兴趣偶尔写写，请大家多多包涵

1、准备热力图数据

我需要准备 1 到 100 个数，填满热力图。为了偷懒，我弄了 0 到 100 共 101 个数，这样坐标（0, 1）对应的数字正好是 1，（1, 0）对应 10 ，看起来比较直观，省脑子…哈哈！

data

这是生成数据的代码，循环嵌套：

var

结果大致是这样的

[[

然后发现犯二了，x 坐标和 y 坐标位置弄反了，数字竖向排列了，赶紧交换下位置

（或者把 res.push() 里面的 i, j 顺序换下）

guessNumData

2、点击事件的监听处理

使用 myChart.on() 监听点击事件。

// 设置一个变量，如果猜对了将其赋值为 1

guess 函数做了什么？与预先生成的随机数比对，根据比对结果提供刷新图表的参数：

是否猜中，1 代表猜中，0 代表没猜中；
提示信息；
新的猜数范围最小值；
新的猜数范围最大值。

function

renewEcharts 函数又做了什么？根据 guess 函数提供的参数更新图表。

function

点击查看 ECharts Gallery 例子（建议PC查看）

ECharts Gallerygallery.echartsjs.com

echarts 设置仪表盘数字的位置_一个 ECharts 做的猜数小游戏相关推荐

echarts 设置仪表盘数字的位置_【Python代替Excel】11：用Python做数据仪表盘
今天要学习的,是用Python制作数据仪表盘,也就是用Python作图. 用到的库是matplotlib.pyplot,可以制作折线图.饼图.柱形图.堆积柱形图.组合图等等. 准备工作数据下载,共 ...
echarts 设置仪表盘数字的位置_全新数字高尔夫独具的特色！外观前卫紧跟潮流！...
近年来,汽车市场竞争特别激烈,目前国内许多紧凑型家庭轿车都是非常好的合资品牌,一汽-大众进入占据了紧凑型家庭轿车的领域.成为汽车市场的王者,不仅需要卓越的综合实力,还需要独特的特色,高尔夫可以说是大众 ...
echarts 设置仪表盘数字的位置_全新数字高尔夫独具的特色！外观前卫紧跟潮流...
近年来,汽车市场竞争特别激烈,目前国内许多紧凑型家庭轿车都是非常好的合资品牌,一汽-大众进入占据了紧凑型家庭轿车的领域.成为汽车市场的王者,不仅需要卓越的综合实力,还需要独特的特色,高尔夫可以说是大众 ...
android做一个坦克大战小游戏_一个 ECharts 做的猜数小游戏
大概 1 年多之前,一位老同学找到我,问能不能帮他做一个非常简单的猜数字游戏,需求是这样的: 在 1 到 100 的整数里,随机选一个数字,让小朋友们猜: 如果猜错了,告知小朋友猜大了还是猜小了: 如 ...
JavaScript：一个非常有趣的猜数小游戏
文章目录猜数字游戏猜数字游戏程序随机生成一个 1~ 50 之间的数字,并让用户输入一个数字, 如果大于该数字,就提示,数字大了,继续猜: 如果小于该数字,就提示数字小了,继续猜: 如果等于该数字 ...
10次机会 js 猜数_用JS实现简单的猜数小游戏
js的猜数游戏所用的知识点很少,主要的有随机产生一个随机整数,然后就是利用循环和if语句来做判断来实现游戏第一步:我们要先随机产生出一个1-1000之间的整数 var num=Math.round( ...
【日常练习】一个可以试玩五次的猜数小游戏
练习要求: 请设计一个猜数字小游戏,可以试玩5次.试玩结束之后,给出提示:游戏试玩结束,请付费. 小游戏代码 import java.util.Scanner;public class GuessNu ...
java math猜数小游戏_java猜数字小游戏
import java.util.Random; import java.util.Scanner; /** * 一个简单的猜数字游戏 * * @author chried * */ public c ...
python循环10次_开发一个循环 5 次计算的小游戏，设置随机种子为10，每次随机产生两个 1~10的数字以及随机选择...
开发一个循环 5 次计算的小游戏, 设置随机种子为10,每次随机产生两个 1~10的数字以及随机选择 "+.-.*"运算符,构成一个表达式, 让用户计算式子结果并输入结果,如果计算 ...

echarts 设置仪表盘数字的位置_一个 ECharts 做的猜数小游戏

关键代码部分

echarts 设置仪表盘数字的位置_一个 ECharts 做的猜数小游戏相关推荐

最新文章

热门文章