npm.io
1.1.0 • Published 4 years ago

@carljin/ve-charts

Licence
MIT
Version
1.1.0
Deps
4
Size
600 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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


NPM NPM Download ![support][supportBadge] Minzipped Size License

ECharts 5.x for Vue.js 3.x.


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