如何与插件一起工作

[MichaelIT]

我想使用这个插件https://github.com/ecomfe/echarts-liquidfill
我在文件头部直接import后

import ReactEcharts from 'echarts-for-react';
import 'echarts-liquidfill';

报错：

water effectaPathProxy.js:235 Uncaught IndexSizeError: Failed to execute 'arc' on 

[hustcc]

我试了一下，可以运行的，参考 demo 代码：demo/LiquidfillComponent.jsx

在线预览：echarts/liquid

[MichaelIT]

我知道了，我封装了一个LiquidFill组件。

// LiquidFill Component
import ReactEcharts from 'echarts-for-react';
import 'echarts-liquidfill';
...

在其他地方使用：

// another file
<div class="root" style='height=100px'>
<div class="first-child" style='height=100px'></div>
<LiquidFill />
</div>

导致组件计算错误，应该不关这个项目的事情，我搞错了，抱歉。

[hustcc]

这个 import 'echarts-liquidfill'; 改成 require('echarts-liquidfill') 试试看。

另外 LiquidFill 中的 option 是什么？

[MichaelIT]

import 是我用了babel做转化的，应该不关这个问题。

const defaultOption = {
  series: [{
    // shape: 'pin',
    shape: 'rect',
    label: {
      normal: {
        formatter() {
          return '';
        },
      },
    },
    outline: {
      show: false,
      borderDistance: 0,
    },
    type: 'liquidFill',
    data: [0.6],
    radius: '80%',
  }],
};

[MichaelIT]

应该是我的组件在不可视的区域，导致他内部算法计算出错了。我把组件放在可视区域就好了。

[hustcc]

好吧，可以尝试给这个插件提一个 issue…