本文分享自华为云社区《》，作者：DevUI。
前言
一个网页中可以创建多个 echarts 实例。 每个 echarts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。 准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echa。
echarts是一个很强大的图表库，除了我们常见的图表功能，echarts有一个自定义图形的功能，这个功能可以让我们很简单地在画布上绘制一些非常规的图形，基于此，我们来玩一些花哨的。
Flappy Bird小游戏体验地址（看看你能玩几分）：
foolmadao.github.io/echart-flap…
下面我们来一步步实现他。
首先要去echarts和zrender官网上下载需要的文件 然后将下载下来的文件放在你项目的目录下，我将文件都放在我项目的js目录下。需要注意的是导入的zrender文件夹名不要改变，zrender和echarts在同一个目录下面。在项目中引用相关。
1 在坐标系中画一只会动的小鸟
首先实例化一个echart容器，再从网上找一个像素小鸟的图片，将散点图的散点形状，用自定义图片的方式改为小鸟。
方法一：加一个div使用绝对定位存放副标题 方法二：使用伪元素绝对定位存放副标题 2、饼图的series列表下的label即在外部显示又。
const myChart = echarts.init(document.getElementById(&39;));option = {series: [{name: &39;， type: &39;， symbolSize: 50，pycharm中怎么导入pyecharts， symbol: &39;， data: [[50，80]]， animation: false}， ]};myChart.setOption(option);
要让小鸟动起来，就需要给一个向右的速度和向下的加速度，并在每一帧的场景中刷新小鸟的位置。而小鸟向上飞的动作，则可以靠角度的旋转来实现，向上飞的触发条件设置为空格事件。
option = {series: [{xAxis: {show: false， type: &39;， min: 0， max: 200， }， yAxis: {show: false， min: 0， max: 100}， name: &39;， type: &39;， symbolSize: 50， symbol: &39;， data: [[50，80]]， animation: false}， ]};// 设置速度和加速度let a = 0.05;let vh = 0;let vw = 0.5timer = setInterval(() => {// 小鸟位置和仰角调整vh = vh - a;option.series[0].data[0][1] += vh;option.series[0].data[0][0] += vw;option.series[0].symbolRotate = option.series[0].symbolRotate ? option.series[0].symbolRotate - 5 : 0;// 坐标系范围调整option.xAxis.min += vw;option.xAxis.max += vw;myChart.setOption(option);}，25);
效果如下
2 用自定义图形绘制障碍物
echarts自定义系列，渲染逻辑由开发者通过renderItem函数实现。该函数接收两个参数params和api，params包含了当前数据信息和坐标系的信息，api是一些开发者可调用的方法集合，常用的方法有：
api.value(…)，意思是取出 dataItem 中的数值。例如 api.value(0) 表示取出当前 dataItem 中第一个维度的数值。
api.coord(…)，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0)，api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。
api.size(…)， 可以得到坐标系上一段数值范围对应的长度。
api.style(…)，可以获取到series.itemStyle 中定义的样式信息。
灵活使用上述api，就可以将用户传入的Data数据转换为自己想要的坐标系上的像素位置。
renderItem函数返回一个echarts中的graphic类，可以多种图形组合成你需要的形状，graphic类型。对于我们游戏中的障碍物只需要使用矩形即可绘制出来，我们使用到下面两个类。
并和步骤1创建的js函数进行交互 懒加载一个wkwebView对象 懒加载一个button 响应button的点击事件，当button被点击时，创建一个json字符串，传递给html页面，这样就可以完成echarts图形的绘制 。
type: group，组合类，可以将多个图形类组合成一个图形，子类放在children中。
type: rect， 矩形类，通过定义矩形左上角坐标点，和矩形宽高确定图形。
/ 数据项定义为[x坐标，下方水管上侧y坐标， 上方水管下侧y坐标]data: [[150，50，80]， ...]renderItem: function (params，api) {// 获取每个水管主体矩形的起始坐标点let start1 = api.coord([api.value(0) - 10，api.value(1)]);let start2 = api.coord([api.value(0) - 10，100]);// 获取两个水管头矩形的起始坐标点let startHead1 = api.coord([api.value(0) - 12，api.value(1)]);let startHead2 = api.coord([api.value(0) - 12，api.value(2) + 8])// 水管头矩形的宽高let headSize = api.size([24，8])// 水管头矩形的宽高let rect = api.size([20，api.value(1)]);let rect2 = api.size([20，100 - api.value(2)]);// 坐标系配置const common = {x: params.coordSys.x， y: params.coordSys.y， width: params.coordSys.width， height: params.coordSys.height}// 水管形状const rectShape = echarts.graphic.clipRectByRect({x: start1[0]， y: start1[1]， width: rect[0]， height: rect[1]}，common);const rectShape2 = echarts.graphic.clipRectByRect({x: start2[0]， y: start2[1]， width: rect2[0]， height: rect2[1]}， common)// 水管头形状const rectHeadShape = echarts.graphic.clipRectByRect({x: startHead1[0]， y: startHead1[1]， width: headSize[0]， height: headSize[1]}，common);const rectHeadShape2 = echarts.graphic.clipRectByRect({x: startHead2[0]， y: startHead2[1]， width: headSize[0]， height: headSize[1]}，common);// 返回一个group类，由四个矩形组成return {type: &39;， children: [{type: &39;， shape: rectShape， style: {...api.style()， lineWidth: 1， stroke: &000&39;rect&39;39;}}， {type: &39;， shape: rectHeadShape， style: {...api.style()， lineWidth: 1， stroke: &000&39;rect&39;39;}}]};}。
颜色定义，我们为了让水管具有光泽使用了echarts的线性渐变色对象。
另外，用一个for循环一次性随机出多个柱子的数据
function initObstacleData() {// 添加minHeight防止空隙太小let minHeight = 20;let start = 150;obstacleData = [];for (let index = 0; index < 50; index++) {const height = Math.random() * 30 + minHeight;const obstacleStart = Math.random() * (90 - minHeight);obstacleData.push([start + 50 * index， obstacleStart， obstacleStart + height > 100 ? 100 : obstacleStart + height])}}
再将背景用游戏图片填充，我们就将整个游戏场景，绘制完成:
3 进行碰撞检测
由于飞行轨迹和障碍物数据都很简单，所以我们可以将碰撞逻辑简化为小鸟图片的正方形中，我们判断右上和右下角是否进入了自定义图形的范围内。
在特定范围内，依据Math.floor(x / 50)获取到对应的数据，即可判断出两个边角坐标是否和柱子区域有重叠了。在动画帧中判断，如果重叠了，就停止动画播放，游戏结束。
企业回选上海普加软件有限公司，普加甘特图，是WEB甘特图高性能解决方案。适用于构建项目管理、生产排程等进度计划管理软件。
/ centerCoord为散点坐标点function judgeCollision(centerCoord) {if (centerCoord[1] < 0 || centerCoord[1] > 100) {return false;}let coordList = [[centerCoord[0] + 15，centerCoord[1] + 1]， [centerCoord[0] + 15，centerCoord[1] - 1]， ]for (let i = 0; i < 2; i++) {const coord = coordList[i];const index = coord[0] / 50;if (index % 1 < 0.6 && obstacleData[Math.floor(index) - 3]) {if (obstacleData[Math.floor(index) - 3][1] > coord[1] || obstacleData[Math.floor(index) - 3][2] < coord[1]) {return false;}}}return false}function initAnimation() {// 动画设置timer = setInterval(() => {// 小鸟速度和仰角调整vh = vh - a;option.series[0].data[0][1] += vh;option.series[0].data[0][0] += vw;option.series[0].symbolRotate = option.series[0].symbolRotate ? option.series[0].symbolRotate - 5 : 0;// 坐标系范围调整option.xAxis.min += vw;option.xAxis.max += vw;// 碰撞判断const result = judgeCollision(option.series[0].data[0])if(result) { // 产生碰撞后结束动画endAnimation();}myChart.setOption(option);}，25);}
2.var myChart=require('echarts').init(document.getElementById("echart"));一般建议使用第一种方法进行初始化操作。3、第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculab。
总结
echarts提供了强大的图形绘制自定义能力，要使用好这种能力，一定要理解好数据坐标点和像素坐标点之间的转换逻辑，这是将数据具象到画布上的重要一步。
运用好这个功能，再也不怕产品提出奇奇怪怪的图表需求。
源码地址：github.com/foolmadao/e…
