VeCharts Next Version 在原有的基础上修复部分bug

✨ 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

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

🦄️ Demos

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

💡 Usage

Fully import

1import { createApp } from 'vue'
2import App from './App.vue'
3
4import VeCharts from 've-charts'
5
6const app = createApp(App)
7
8app.use(VeCharts)
9
10app.mount('#app')

It will imports VeCharts entirely.

On demand

1import { createApp } from 'vue'
2import App from './App.vue'
3
4import { BarChart } from 've-charts'
5
6const app = createApp(App)
7
8// app.use
9app.use(BarChart)
10
11// or app.component
12// app.component(BarChart.name, BarChart)
13
14app.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