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

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

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

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

正好那段时间，我一直在用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. 是否猜中，1 代表猜中，0 代表没猜中；
2. 提示信息；
3. 新的猜数范围最小值；
4. 新的猜数范围最大值。

function 

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

function 

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

ECharts Gallery​gallery.echartsjs.com