如何将vega图表集成到stencil js组件?

Question

我正在尝试使用vega图表创建一个模板js组件，根据vega手册我安装了3个包:

npm install vega
npm install vega-lite
npm install vega-embed

并试图导入

import { Vega } from 'vega'

得到这个

模块'" Vega "'没有导出成员'Vega'

有人设法将vega图表集成到stencil js中吗?

提前感谢!

Answer 1

根据使用文档:

使用Vega和一个绑定器。如果你把Vega和rollup.js这样的打包器一起使用，你可以把Vega作为一个模块导入。

import * as vega from "vega";

注意，如果你在一个启用了Shadow DOM的组件中使用它，你可能需要传递Vega，在container配置中，一个DOM节点而不是CSS选择器:

class MyComponent {
container: HTMLDivElement;
componentDidLoad() {
new vega.View(vega.parse(spec), {
renderer:  'canvas',  // renderer (canvas or svg)
container: this.container,   // parent DOM container
});
// ...
}
render() {
return <div ref={el => this.container = el}></div>
}
}