A chart is generated using echarts on the server-side:
getChart.ts
const chart = echarts.init(null, null, {
renderer: 'svg',
ssr: true,
width: 400,
height: 300
});
chart.setOption({
xAxis: {
data: timeData
},
yAxis: {},
series: [
{
name: 'Sentiment',
type: 'line',
data: sentimentData
},
{
name: 'Volume',
type: 'bar',
data: volumeData
}
],
tooltip: {
show: true
}
});
const chartToSvg = chart.renderToSVGString();
return chartToSvg;
The above chart is obtained in Svelte Kit by loading it in a function passed as props to the page:
+page.server.ts
export const load: PageServerLoad = async () => {
const chart = getChart();
return {
chart
};
+page.svelte
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
</script>
<div>
{@html data.chart}
</div>
The rendered chart looks good. However, I now want to convert this SVG into an echarts object on the client-side to enable features like adding a tooltip with options such as: { show: true }
I came across a sandbox example at: https://codesandbox.io/s/apache-echarts-5-3-ssr-csr-0jvsdu?from-embed, but it doesn't meet my requirements as I prefer to maintain all data on the server-side and only enhance interactivity on the client-side.
If you have any suggestions or ideas to assist me with this scenario, please feel free to share them. Thank you!