echarts symbol 回调函数_ECharts 做的另一种猜数小游戏

最新推荐文章于 2022-08-04 22:22:54 发布

weixin_39576066

最新推荐文章于 2022-08-04 22:22:54 发布

阅读量300

点赞数

文章标签： echarts symbol 回调函数 echarts symbol回调函数 echarts title位置 echarts tooltip提示框内容太多时 echarts 点击事件 echarts点击事件

昨天突然想起上学时玩的文曲星（电子词典），里面有个猜数字的小游戏，于是拿 ECharts 试着做了一下，大体思路如下：

heatmap 数据准备

// 准备 heatmap 的按钮数据，用 '-1' 作为退格按钮、'-2'作为猜数按钮

heatmap 所在 x、y 坐标轴数据

var

heatmap 部分配置项

option

grid：直角坐标系位置等配置
tooltip：隐藏提示框
xAxis 和 yAxis：x 轴和 y 轴配置
series[i]-heatmap：热力图配置，其中 label.formatter 使用回调函数把 '-1' 和 '-2' 分别换成 '←' 和 '猜'，data 绑定之前准备好的heatmap 数据

输入框、提示框生成函数（ 4个方块数字框 + 提示框），这个函数返回的 JSON 对象用于 option.graphic 配置

// 输入框、提示框生成函数（ 4个方块数字框 + 提示框）

监听 heatmap 上的点击事件

// 点击热力图时调用 btnClick 函数

params：用于传入图表的点击事件的基本参数
- params.seriesId：对应 option.series[i]-id
- params.data：对应 option.series[i]-data，此处 params.data[0] 对应 xAxis坐标，params.data[1] 对应 yAxis 坐标，params.data[2] 是该坐标对应的数值（也就是此前生成的按钮数据）
times：用于记录还剩下几次猜数字机会

btnClick 函数定义

// 按钮点击响应函数

inputList：预先定义好的，用于存放猜数列表的数组变量
<表达式1> ? <表达式2> : <表达式3> 三元表达式，如果<表达式1> 为真，则执行<表达式2>，否则执行<表达式3>
btnID：传入的按钮数据
- 当 btnID 等于 '-1' 时，删除 inputList 最后一个数字
- 当 btnID 等于 '-2' 时，猜数字或提示不足 4 位数字
- 当 btnID 等于其他值时（0 到 9），在 inputList 末尾插入或替换一个数字
myChart.setOption(option)：更新图表，默认将 option 与之前的图标配置项合并
myChart.setOption(option, false)：更新图表，用此 option 替换原配置项

guess 函数定义

猜数函数

变量 A：数字和位置都猜对的数量
变量 B：仅数字猜对但位置猜错的数量
通过 for 循环分别匹配每一位所猜数字，根据匹配结果 A++ 或者 B++
- Array.indexOf(item) 方法，从 array 里查找 item ，如果存在则返回匹配的 Index ，否则返回 -1
匹配完成后，如果 A === 4 则猜对了，否则通过类似 0A1B 的方式提示猜数的结果，通过 myChart.setOtion() 更新图表的提示区

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

ECharts Gallerygallery.echartsjs.com

关注