main = html`<div style="position: relative; height:100%">
<div class='chart' style="height: 100% ;min-height:400px; width:100%"></div>
<div style="position: absolute; right: 0">
${myEl} ${myEl} ${myEl} ${myEl}
</div>
</div>`
myEl = `<div style="color: #f00">
你好
</div>`
initchart = echarts.init(main.querySelector('.chart'))
option = {
return {
dataset: [
{
dimensions: ['name', 'age', 'profession', 'score', 'date'],
source: [
['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
['Han Meimei', 67, 'Engineer', 366, '2011-03-12']
]
},
{
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' }
}
}
],
xAxis: {
type: 'category',
axisLabel: { interval: 0, rotate: 30 }
},
yAxis: {},
series: {
type: 'bar',
encode: { x: 'name', y: 'score' },
datasetIndex: 1
}
};
}
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.
