xm-charts-vue

图表

Usage no npm install needed!

<script type="module">
  import xmChartsVue from 'https://cdn.skypack.dev/xm-charts-vue';
</script>

README

xm-charts-vue

用法

npm  install -S xm-charts-vue

import Vue from 'vue'
import Chart, { VChart, BarChart, LineChart, AreaChart, PieChart, MapChart, registerTheme, registerMap } from 'xm-charts-vue'

Vue.use(Chart) // 整体

Vue.use(BarChart)

Props (all reactive)

  • initOptions

    Used to initialize ECharts instance.

  • theme

    The theme used for current ECharts instance.

  • options

    Used to update data for ECharts instance. Modifying this prop will trigger ECharts' setOption method.

    If you mutate the data bound to options while retaining the object reference, setOption will be called with notMerge: false. Otherwise, if you bind a new object to options, setOption will be called with notMerge: true.

    For example, if we have the following template:

    <v-chart :options="data" />

    Then:

    this.data = newObject // setOption(this.options, true)
this.data.title.text = 'Trends' // setOption(this.options, false)

  • group

    This prop is automatically bound to the same prop of the ECharts instance.

  • autoresize (default: false)

    This prop indicates ECharts instance should be resized automatically whenever its root is resized.

  • manual-update (default: false)

    For performance critical scenarios (having a large dataset) we'd better bypass Vue's reactivity system for options prop. By specifying manual-update prop with true and not providing options prop, the dataset won't be watched any more. After doing so, you need to retrieve the component instance with ref and manually call mergeOptions method to update the chart.

Computed

  • width [readonly]

    Used to retrieve the current width of the ECharts instance.

  • height [readonly]

    Used to retrieve the current height of the ECharts instance.

  • computedOptions [readonly]

    Used to retrive the actual options calculated by ECharts after updating options.

Methods

  • mergeOptions (use setOption in ECharts under the hood)

    Provides a better method name to describe the actual behavior of setOption.

  • appendData

  • resize

  • dispatchAction

  • showLoading

  • hideLoading

  • convertToPixel

  • convertFromPixel

  • containPixel

  • getDataURL

  • getConnectedDataURL

  • clear

  • dispose

Static Methods

  • connect
  • disconnect
  • registerMap
  • registerTheme
  • graphic.clipPointsByRect
  • graphic.clipRectByRect

Events

Vue-ECharts support the following events:

  • legendselectchanged
  • legendselected
  • legendunselected
  • legendscroll
  • datazoom
  • datarangeselected
  • timelinechanged
  • timelineplaychanged
  • restore
  • dataviewchanged
  • magictypechanged
  • geoselectchanged
  • geoselected
  • geounselected
  • pieselectchanged
  • pieselected
  • pieunselected
  • mapselectchanged
  • mapselected
  • mapunselected
  • axisareaselected
  • focusnodeadjacency
  • unfocusnodeadjacency
  • brush
  • brushselected
  • rendered
  • finished
  • Mouse events
    • click
    • dblclick
    • mouseover
    • mouseout
    • mousemove
    • mousedown
    • mouseup
    • globalout
    • contextmenu
  • ZRender events (since v4.1.0)
    • click
    • mousedown
    • mouseup
    • mousewheel
    • dblclick
    • contextmenu

For further details, see ECharts' API documentation.

Local development

$ npm i
$ npm run serve

Open http://localhost:8080/ to see the demo.