Guide

Installation

PNPM

$ pnpm add @wuxianx/charts-vue echarts

NPM

$ npm install @wuxianx/charts-vue echarts

Yarn

$ yarn add @wuxianx/charts-vue echarts

Usage

Add it to your Vue project.

import { createApp } from 'vue'
import * as echarts from 'echarts'
import { barSimple, lineSimple, radarRainbow, plugin as wuxianxCharts } from '@wuxianx/charts-vue'
import App from './app.vue'

const app = createApp(App)
app.use(wuxianxCharts({ use: { barSimple, lineSimple, radarRainbow }, ec: echarts }))
app.mount('#app')

Use it in your component.

<script setup>
const data = {
  Taylor: 81,
  Clark: 78,
  Martin: 75,
  Perez: 80,
  Lewis: 86,
  Wilson: 81,
  Jackson: 87,
}
</script>

<template>
  <div v-ec="['barSimple', data]" style="width: 100%; height: 300px;" />
</template>

Reactive chart

Use v-ec.watch and pass in a ref to achieve basic reactive chart updates.

[
  "barSimple",
  {
    "Taylor": 81,
    "Clark": 78,
    "Martin": 75,
    "Perez": 80,
    "Lewis": 86,
    "Wilson": 81,
    "Jackson": 87
  }
]

<script setup>
import { ref } from 'vue'

const data = {
  Taylor: 81,
  Clark: 78,
  Martin: 75,
  Perez: 80,
  Lewis: 86,
  Wilson: 81,
  Jackson: 87,
}

const ec = ref(['barSimple', data])

function refresh() {
  ec.value[0] = Math.random() > 0.5 ? 'barSimple' : 'lineSimple'

  // Please note that this is a new `Object`, not a reference to `data`.
  ec.value[1] = Object.keys(data).reduce((res, key) => {
    res[key] = Math.round(Math.random() * 100)

    return res
  }, {})
}
</script>

<template>
  <div>
    <div v-ec.watch="ec" style="width: 100%; height: 300px;" />

    <t-button block @click="refresh">
      Refresh
    </t-button>

    <pre>{{ ec }}</pre>
  </div>
</template>

Chart Resize

If you want to trigger chart.resize when window.resize occurs, you can use v-ec.resize.

<script setup>
const data = {
  Taylor: 502.84,
  Clark: 205.97,
  Martin: 332.79,
  Perez: 282.55,
  Wilson: 214.02,
}
</script>

<template>
  <div
    v-ec.resize="['lineGradientTrend', data]"
    style="width: 100%; height: 300px;"
  />
</template>

ECharts Instance

If you need to obtain the echarts instance, you can use the echarts.getInstanceByDom method. Please refer to the following example:

<script setup>
import { ref } from 'vue'
import { getInstanceByDom } from 'echarts'

const data = [
  [2016, { Perez: 75, Harris: 99, Walker: 89, Davis: 51, Johnson: 86 }],
  [2017, { Perez: 85, Harris: 89, Walker: 59, Davis: 72, Johnson: 39 }],
  [2018, { Perez: 35, Harris: 59, Walker: 58, Davis: 63, Johnson: 49 }],
]

const el = ref()

function exportChart() {
  const ecInstance = getInstanceByDom(el.value)
  const src = ecInstance.getDataURL({ type: 'png' })

  downloadBase64File(src)
}

function downloadBase64File(data) {
  const element = document.createElement('a')
  element.setAttribute('href', data)
  element.setAttribute('download', 'echarts-instance.png')

  document.body.appendChild(element)
  element.click()

  document.body.removeChild(element)
}
</script>

<template>
  <div>
    <div
      ref="el"
      v-ec.resize="['radarRainbow', data]"
      style="width: 100%; height: 500px;"
    />

    <t-button block style="margin-top: 10px;" @click="exportChart">
      Download
    </t-button>
  </div>
</template>

Typescript

If you use typescript, you can use the type WuxianxChartsValue<'barSimple'> or the function defineChartOptions('barSimple', ...) for type restriction. Please refer to the following example:

<script setup lang="ts">
import { type WuxianxChartsValue, defineChartOptions } from '@wuxianx/charts-vue'

const _data = {
  Taylor: 81,
  Clark: 78,
  Martin: 75,
  Perez: 80,
  Lewis: 86,
  Wilson: 81,
  Jackson: 87,
}

const data1: WuxianxChartsValue<'barSimple'> = ['barSimple', _data]

const data2 = defineChartOptions('lineSimple', _data)
</script>

<template>
  <div>
    <div v-ec="data1" style="width: 100%; height: 300px;" />

    <div v-ec="data2" style="width: 100%; height: 300px;" />
  </div>
</template>