巧用Echats里的graphic

项目中有个需求，多series图表，接口分批请求，每个series都是一个接口请求返回的数据。需要在每个series都有单独的loading。虽然Echats实例提供了showLoading的api，但是这里不满足每个series单独loading的需求。除了loading，当series的data没有数据的时候有需要定制化一些样式展示到图表里。 查看文档发现graphic，功能很强大 echarts.apache.org/zh/option.h… graphic 是原生图形元素组件。可以支持的图形元素包括：

image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, 我们使用默认的text就可以达到效果

graphicData.push({
        id: index,
        type: 'text',
        left: 'center',
        top: 40 + 170 * index,
        invisible: signData.data && signData.data.length !== 0,
        z: 100,
        style: {
          fill: 'grey',
          text: signData.dataResponse ? '无数据' : 'loading...',
          font: 'normal 20px sans-serif',
        },
      });