最近突发奇想&＃xff0c;用 3D 的堆叠柱图&＃xff0c;做了一个搭积木的小游戏。
主要思路
- 用一个几乎透明的 series-bar3D 铺满整个 grid3D&＃xff0c;作为操作区&＃xff0c;监听鼠标点击事件、完成堆积木的操作&＃xff1b;
- 用多层数据为 0 的 series-bar3D 放在操作层 bar3D 下方&＃xff0c;堆积木时&＃xff0c;按照从下向上的顺序&＃xff0c;更新其数据 series-bar3D.data&＃xff08;包括数值和样式&＃xff0c;即 value 和 itemStyle&＃xff09;&＃xff1b;
- 用一个 series-heatmap 制作菜单&＃xff0c;也是监听鼠标点击事件&＃xff0c;实现撤销、重做、重置、修改积木样式&＃xff08;高度、颜色和透明度&＃xff09;等功能。
效果演示
家里的笔记本屏幕小&＃xff0c;菜单按钮上的文字几乎全都显示不全了……关键代码
generateData &＃61; (length) &＃61;> {let ret &＃61; {x: [],y: [],boxWidth: length,boxDepth: length,boxHeight: length,operatingSeriesData: [],brickSeriesData: []};let brickSeriesDataItem &＃61; [];for (let i &＃61; 0; i };
由于一开始对 3D 堆叠柱图的堆叠机制了解不够深入&＃xff08;自以为是&＃xff0c;没仔细看配置项手册[1]&＃xff0c;大家不要学我哈- -&＃xff09;&＃xff0c;所以一上来就把所有可能用到的砖块数据都生成出来了……也不管最终是否会用到。这里还有优化的空间……
generateMenuData &＃61; (colorList, sizeList) &＃61;> {let ret &＃61; [];for (let i &＃61; 0; i };
generateSeries &＃61; (src) &＃61;> {ret &＃61; [];for (let i &＃61; 0; i {if (params.name &＃61;&＃61;&＃61; &＃39;color&＃39;) {return &＃96;点击更换“积木”颜色为 ${params.color}&＃96;;}if (params.name &＃61;&＃61;&＃61; &＃39;size&＃39;) {return &＃96;点击更换“积木”高度为 ${params.value[2]}&＃96;;}return {undo: &＃39;撤销&＃39;, redo: &＃39;重做&＃39;, reset: &＃39;清空&＃39;, save: &＃39;导出游戏数据&＃xff0c;
供下次赋值给 loadData 使用&＃39;, load: &＃39;功能开发中…&＃39; }[params.name]; }},label: {normal:{formatter: params &＃61;> { if (params.name &＃61;&＃61;&＃61; &＃39;color&＃39;) {return params.color;}if (params.name &＃61;&＃61;&＃61; &＃39;size&＃39;) {return params.value[2]; }return params.name;}}},itemStyle: {borderColor: &＃39;#AAA&＃39;,borderWidth: 4},data: generateMenuData(menuConfig.colorList, menuConfig.sizeList)});return ret;
};
通过 tooltip.formatter 和 label.normal.formatter 定义按钮的文字和提示框内容
// 撤销
undo &＃61; () &＃61;> {if (history.undoList.length &＃61;&＃61;&＃61; 0) {alert(&＃39;操作历史记录为空&＃xff0c;撤销未执行…&＃39;);return console.log(&＃39;操作历史记录为空&＃xff0c;撤销未执行…&＃39;);}// undoList 最后一条记录“剪切”到 redoListlet historyObj &＃61; history.undoList.pop();history.redoList.push(historyObj);// 将上一步操作/重做的 series[seriesIndex].data[dataIndex] 重置为初始值let val &＃61; series[historyObj.seriesIndex].data[historyObj.dataIndex].value;val[2] &＃61; 0;series[historyObj.seriesIndex].data[historyObj.dataIndex] &＃61; {value: val};myChart.setOption({series: series});console.log(&＃39;撤销成功&＃39;);
};// 重做
redo &＃61; () &＃61;> {if (history.redoList.length &＃61;&＃61;&＃61; 0) {alert(&＃39;操作历史记录为空&＃xff0c;重做未执行…&＃39;);return console.log(&＃39;操作历史记录为空&＃xff0c;重做未执行…&＃39;);}// redoList 最后一条记录“剪切”到 undoListlet historyObj &＃61; history.redoList.pop();history.undoList.push(historyObj);// 将上一步重置的 series[seriesIndex].data[dataIndex] 重设为撤销前的状态series[historyObj.seriesIndex].data[historyObj.dataIndex].value[2] &＃61; historyObj.brickConfig.size;series[historyObj.seriesIndex].data[historyObj.dataIndex].itemStyle &＃61; {color: historyObj.brickConfig.color,opacity: historyObj.brickConfig.opacity};myChart.setOption({series: series});console.log(&＃39;重做成功&＃39;);
};// 撤销/重做 所用的操作历史记录
let history &＃61; {undoList: [],redoList: []
};
// 监听鼠标点击事件
myChart.on(&＃39;click&＃39;, params &＃61;> {// 菜单操作处理if (params.seriesName &＃61;&＃61;&＃61; &＃39;menu&＃39;) {if (params.name &＃61;&＃61;&＃61; &＃39;color&＃39;) {brickConfig.color &＃61; params.color;brickConfig.opacity &＃61; 1;myChart.setOption({title:{subtext: &＃96;当前颜色&＃xff1a;${brickConfig.color}n当前尺寸&＃xff1a;${brickConfig.size}n当前透明度&＃xff1a;${brickConfig.opacity}&＃96;}});return console.log(&＃96;砖块颜色更换为${params.color}&＃96;);}if (params.name &＃61;&＃61;&＃61; &＃39;empty&＃39;) {brickConfig.color &＃61; params.color;brickConfig.opacity &＃61; 0;myChart.setOption({title:{subtext: &＃96;当前颜色&＃xff1a;${brickConfig.color}n当前尺寸&＃xff1a;${brickConfig.size}n当前透明度&＃xff1a;${brickConfig.opacity}&＃96;}});return console.log(&＃96;砖块颜色更换为透明&＃96;);}if (params.name &＃61;&＃61;&＃61; &＃39;size&＃39;) {brickConfig.size &＃61; params.value[2];myChart.setOption({title:{subtext: &＃96;当前颜色&＃xff1a;${brickConfig.color}n当前尺寸&＃xff1a;${brickConfig.size}n当前透明度&＃xff1a;${brickConfig.opacity}&＃96;}});return console.log(&＃96;砖块 size 更换为${params.value[2]}&＃96;);}if (params.name &＃61;&＃61;&＃61; &＃39;load&＃39;) {// loadalert(&＃39;开发中…&＃39;);return console.log(&＃39;开发中…&＃39;);}if (params.name &＃61;&＃61;&＃61; &＃39;reset&＃39;) {data &＃61; generateData(xLength);series &＃61; generateSeries(data);myChart.setOption({series: series});return console.log(&＃39;清空数据成功&＃39;);}if (params.name &＃61;&＃61;&＃61; &＃39;save&＃39;) {let uri &＃61; &＃39;data:application/json;base64,&＃39;;//console.log(data);window.location.href &＃61; uri &＃43; base64(JSON.stringify(data));return console.log(&＃39;导出数据成功&＃39;);}if (params.name &＃61;&＃61;&＃61; &＃39;undo&＃39;) {return undo();}if (params.name &＃61;&＃61;&＃61; &＃39;redo&＃39;) {return redo();}}//alert(&＃96;正在 (${params.data[0]}, ${params.data[1]}) 处堆积一个砖块&＃96;);// 堆积木&＃xff08;砖块&＃xff09;操作处理for (let i in series) {if (series[i].name &＃61;&＃61;&＃61; &＃39;bricks&＃39; && series[i].data[params.data[0] * xLength &＃43; params.data[1]].value[2] &＃61;&＃61;&＃61; 0) {series[i].data[params.data[0] * xLength &＃43; params.data[1]].value[2] &＃61; brickConfig.size;series[i].data[params.data[0] * xLength &＃43; params.data[1]].itemStyle &＃61; {color: brickConfig.color,opacity: brickConfig.opacity};history.undoList.push({seriesIndex: i, dataIndex: params.data[0] * xLength &＃43; params.data[1], brickConfig: JSON.parse(JSON.stringify(brickConfig)) // 深拷贝});history.redoList &＃61; [];return myChart.setOption({series: series}); }}
});
主要就是通过 echartsInstance.on 绑定事件处理函数&＃xff0c;也就是 myChart.on(&＃39;click&＃39;, function(){}) 的形式。
ECharts Gallerygallery.echartsjs.com
参考
- ^柱状图堆叠&＃xff0c;相同 stack 值的柱状图系列数据会有叠加。注意不同系列需要叠加的数据项在数组中的索引必须是一样的。 https://echarts.apache.org/zh/option-gl.html#series-bar3D.stack
京公网安备 11010802041100号