Components
VChartLight
Enable simple interactions on the client side based on server-side rendering.
<VChartLight> uses <VChartServer> underhood to render ECharts on server side. The SVG rendered by the server is hydrated with ECharts lightweight client runtime to enable some simple interactions such as: clicking the legend to toggle whether the series is displayed. In this case, we can avoid loading at least a few hundred KBs of ECharts code on the client side.
app/components/example.vue
<script setup>
const option = ref({
legend: {
selected: {
a: true,
b: true,
c: true,
},
},
series: [
{
name: 'Access From',
type: 'pie',
roseType: 'angle',
data: [
{ value: 800, name: 'a' },
{ value: 735, name: 'b' },
{ value: 580, name: 'c' },
],
},
],
})
function onClick(params) {
if (params.ssrType === 'legend') {
const key = Object.keys(option.value.legend.selected)[params.dataIndex]
// toggle display of the series
option.value.legend.selected[key] = !option.value.legend.selected[key]
}
}
</script>
<template>
<VChartLight :option="option" @click="onClick" />
</template>
Props
init-options
object
Optional chart init configurations. See
echarts.init's opts parameter. Injection key: INIT_OPTIONS_KEY.We have to specify the
height and width property in init-options for SSR.theme
string | object
option
object
ECharts' universal interface. Modifying this prop will trigger ECharts'
setOption method. Read more here →.Events
click
(params: ECSSRClientEventParams) => void
Emitted when clicking on chart elements.
mouseout
(params: ECSSRClientEventParams) => void
Emitted when mouse leaves chart elements.
mouseover
(params: ECSSRClientEventParams) => void
Emitted when mouse enters chart elements.
export interface ECSSRClientEventParams {
type: 'mouseover' | 'mouseout' | 'click';
ssrType: 'legend' | 'chart';
seriesIndex?: number;
dataIndex?: number;
event: Event;
}