echarts renderItem图片加动效

要实现在 echarts 中渲染图片并加上动效，可以使用 echarts 的自定义系列（series）和 echarts-gl 库中的三维库，具体步骤如下：

1. 安装 echarts 和 echarts-gl 库：

npm install echarts echarts-gl --save

2. 在 HTML 文件中引入 echarts：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

3. 创建一个 echarts 实例，并设置图表的容器和基本配置：

var myChart = echarts.init(document.getElementById('chart'));

myChart.setOption({
  series: [{
    type: 'custom',
    renderItem: renderItem,
    data: data,
    animation: false
  }]
});

其中，`renderItem` 是自定义渲染函数，`data` 是要渲染的数据。

4. 在 `renderItem` 函数中，使用 echarts-gl 库中的 `createGL()` 方法创建一个 WebGL 实例，并添加一个动画效果：

function renderItem(params, api) {
  var coords = api.coord([api.value(0), api.value(1)]);
  var size = api.size([1, 1], [30, 30]);

  var gl = echarts.gl.createGL(params.context.canvas);
  var program = gl.createProgram();
  // ... WebGL 相关代码

  var animation = new echarts.animation.Animation({
    duration: 1000,
    easing: 'linear',
    delay: function(idx) {
      return idx * 100;
    },
    onframe: function(target, percent) {
      // ... 动画相关代码
    },
    ondestroy: function() {
      // ... 动画结束后的回调函数
    }
  });

  animation.start();
}

5. 在 `renderItem` 函数中，使用 WebGL 渲染图片：

var texture = echarts.gl.createTexture(gl, {
  image: 'image/path.png',
  anisotropic: 16
});

gl.bindTexture(gl.TEXTURE_2D, texture);
// ... WebGL 相关代码

注意，使用 WebGL 渲染图片需要先将图片加载为纹理（texture）。

完整代码示例：

var myChart = echarts.init(document.getElementById('chart'));

myChart.setOption({
  series: [{
    type: 'custom',
    renderItem: renderItem,
    data: data,
    animation: false
  }]
});

function renderItem(params, api) {
  var coords = api.coord([api.value(0), api.value(1)]);
  var size = api.size([1, 1], [30, 30]);

  var gl = echarts.gl.createGL(params.context.canvas);
  var program = gl.createProgram();

  // 顶点着色器代码
  var vertexShader = `
    attribute vec4 a_Position;
    attribute vec2 a_TexCoord;
    varying vec2 v_TexCoord;
    void main() {
      gl_Position = a_Position;
      v_TexCoord = a_TexCoord;
    }
  `;
  // 片元着色器代码
  var fragmentShader = `
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_TexCoord;
    void main() {
      gl_FragColor = texture2D(u_Sampler, v_TexCoord);
    }
  `;

  // 创建顶点着色器
  var vertexShaderObject = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShaderObject, vertexShader);
  gl.compileShader(vertexShaderObject);

  // 创建片元着色器
  var fragmentShaderObject = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShaderObject, fragmentShader);
  gl.compileShader(fragmentShaderObject);

  // 创建着色器程序
  gl.attachShader(program, vertexShaderObject);
  gl.attachShader(program, fragmentShaderObject);
  gl.linkProgram(program);
  gl.useProgram(program);

  // 设置顶点位置和纹理坐标
  var vertices = new Float32Array([
    -size[0], -size[1], 0.0, 0.0,
    size[0], -size[1], 1.0, 0.0,
    size[0], size[1], 1.0, 1.0,
    -size[0], size[1], 0.0, 1.0
  ]);

  // 创建缓冲区对象
  var vertexTexCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  // 顶点位置
  var a_Position = gl.getAttribLocation(program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 16, 0);
  gl.enableVertexAttribArray(a_Position);

  // 纹理坐标
  var a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord');
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 16, 8);
  gl.enableVertexAttribArray(a_TexCoord);

  // 设置纹理
  var texture = echarts.gl.createTexture(gl, {
    image: 'image/path.png',
    anisotropic: 16
  });

  gl.bindTexture(gl.TEXTURE_2D, texture);
  // ... WebGL 相关代码

  // 动画效果
  var animation = new echarts.animation.Animation({
    duration: 1000,
    easing: 'linear',
    delay: function(idx) {
      return idx * 100;
    },
    onframe: function(target, percent) {
      // ... 动画相关代码
    },
    ondestroy: function() {
      // ... 动画结束后的回调函数
    }
  });

  animation.start();
}