![support][supportBadge]

✨ Features

• 🛠 Composable Chart component.
• 🌳 TreeShakable & SideEffects Free, Check out Bundle Phobia
• 💪 Fully Typed APIs
• 🩹 Delegate all echarts option as component props v-bind.
• 📢 Delegate all echarts events as component events v-on.

📦 Installation

$ yarn add echarts ve-charts@next -S
or
$ npm i echarts ve-charts@next -S

🦄️ Demos

Vue 3 Demo: Vue CLI 3.x | Vite 2 Demo: @vitejs/app

💡 Usage

Fully import

import { createApp } from 'vue'
import App from './App.vue'

import VeCharts from 've-charts'

const app = createApp(App)

app.use(VeCharts)

app.mount('#app')

It will imports VeCharts entirely.

On demand

import { createApp } from 'vue'
import App from './App.vue'

import { BarChart } from 've-charts'

const app = createApp(App)

// app.use
app.use(BarChart)

// or app.component
// app.component(BarChart.name, BarChart)

app.mount('#app')

It will imports BarChart on demandly.

Fullly Component list reference here →

📖 Documentation

VeChart

VeChart is a base chart component, it delegate all echarts events & instance methods in the component.

Props

• theme Second argument of echarts.init method →
• initOptions - Third argument of echarts.init method →
• option First argument of echartsInstance.setOption method →
• setOptionOpts - Second argument of echartsInstance.setOption method →
• height - Number, Default: 400(px)
• needUpdate - Boolean, Default: false

Methods

VeChart support the following methods:

• setOption →
• getWidth →
• getHeight →
• getDom →
• getOption →
• resize →
• dispatchAction →
• convertToPixel →
• convertFromPixel →
• containPixel →
• showLoading →
• hideLoading →
• containPixel →
• getDataURL →
• getConnectedDataURL →
• clear →
• dispose →

Events

VeChart support the following events:

• highlight →
• downplay →
• selectchanged →
• legendselectchanged →
• legendselected →
• legendunselected →
• legendselectall →
• legendinverseselect →
• legendscroll →
• datazoom →
• datarangeselected →
• timelinechanged →
• timelineplaychanged →
• restore →
• dataviewchanged →
• magictypechanged →
• geoselectchanged →
• geoselected →
• geounselected →
• axisareaselected →
• brush →
• brushEnd →
• brushselected →
• globalcursortaken →
• rendered →
• finished →
• Mouse events
  • click →
  • dblclick →
  • mouseover →
  • mouseout →
  • mousemove →
  • mousedown →
  • mouseup →
  • globalout →
  • contextmenu →
• ZRender events
  • zr:click
  • zr:dblclick
  • zr:mousedown
  • zr:mousemove
  • zr:mouseup
  • zr:mouseover
  • zr:mouseout
  • zr:mousewheel
  • zr:contextmenu

See supported events here →

License

MIT @xiaoluoboding