导读：echarts是一个基于 JavaScript 的开源可视化图表库，里面包含很多常用且美观的统计图表。作者就通过使用中继器，结合echart的图标代码，做出可视化图表的原型模板，一起来看一下吧。

echarts是一个基于 JavaScript 的开源可视化图表库，里面包含很多常用且美观的统计图表。但是由于大部分产品经理不太懂代码，导致他们在画原型图的时候，不能直接使用该工具，就算会代码，使用起来也不太方便。所以作者就通过使用中继器，结合echart的图标代码，做出可视化图表的原型模板，用户使用该模板时只需在中继器表格中填入数据，就能够自动生成echart图表，且实现高保真的交互效果。下面，我会通过饼图的案例作为教程，具体效果如下：

原型地址：https://gb6zh9.axshare.com/#g=1

一、思路讲解

制作的原理是通过js调用echart的图表，然后在通过中继器修改替换对应的文字，实现以后再次使用时，仅需要在中继器表格中修改数据自动生成图表的效果。

首先我们要观察一下echart饼图的代码

上图左边是代码，右边是代码实现的效果，左边红色方框内的就是数据内容，也就是我们需要用中继器替换的文本。

其他的效果，例如有标有没有tooltrip、legend等可以自己设置，也可以默认不改变

二、所需材料