class EchartsFactory {
constructor(id, width, height) {
this.id = id;
this.width = width;
this.height = height;
this.domElm = html`<div id='${this.id}' style='width:${this.width}px; height:${this.height}px; padding: 0; margin: 0;'></div>`;
this.chart = echarts.init(this.domElm);
}
addBuilder(builder, args) {
const fn = builder.bind(this);
fn(args);
return this;
}
element() {
return this.chart;
}
display() {
return this.domElm;
}
}
new EchartsFactory("pie-builder", width, 640)
.addBuilder(pieBuilder, {
data: [
{ value: 1000, name: "XXX" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" }
]
})
.display()
function pieBuilder({ data }) {
this.element().setOption({
title: {
text: "饼图纹理",
textStyle: {
color: "#235894"
}
},
tooltip: {},
series: [
{
name: "pie",
type: "pie",
selectedMode: "single",
selectedOffset: 30,
clockwise: true,
label: {
fontSize: 18,
color: "#235894"
},
labelLine: {
lineStyle: {
color: "#235894"
}
},
data: data,
itemStyle: {
opacity: 0.7,
borderWidth: 3,
borderColor: "#235894"
}
}
]
});
}
echarts = require("https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
