<VChartLight>

<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.

<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: Optional chart init configurations. See echarts.init's opts parameter.
  • type: object
  • Injection key: INIT_OPTIONS_KEY.

• theme: Theme to be applied. See echarts.init's theme parameter.
  • type: string or object
  • Injection key: THEME_KEY.
• option: ECharts' universal interface. Modifying this prop will trigger ECharts' setOption method. Read more here →.
  • type: object

Events

• click
  • parameters:
    • params:
      • type: ECSSRClientEventParams
• mouseout
  • parameters:
    • params:
      • type: ECSSRClientEventParams
• mouseover
  • parameters:
    • params:
      • type: ECSSRClientEventParams

export interface ECSSRClientEventParams {
  type: 'mouseover' | 'mouseout' | 'click';
  ssrType: 'legend' | 'chart';
  seriesIndex?: number;
  dataIndex?: number;
  event: Event;
}