main = html`<div style="position: relative; height:100%">
<div class='chart' style="height: 100% ;min-height:400px; width:100%"></div>
${myEl} ${myEl} ${myEl} ${myEl}
</div>`
myEl = `<div style="color: #f00">
你好
</div>`
initchart = echarts.init(main.querySelector('.chart'))
option = {
return {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
}
initchart.setOption(option,{ notMerge: true, lazyUpdate: true })
arr = [1,2,3,4,50];
echarts = window.echarts || require("https://cdn.jsdelivr.net/npm/echarts@5/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.
