vue echarts组件_基于Vue.js 2的ECharts组件

vue echarts组件

Vue-ECharts (Vue-ECharts)

ECharts component for Vue.js.

Vue.js的ECharts组件。

Built upon ECharts v4.0.1+ and depends on Vue.js v2.2.6+.

建立在ECharts v4.0.1 +之上，并依赖于Vue.js v2.2.6 +。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm(推荐) (npm (Recommended))

$ npm install vue-echarts

手册 (Manual)

Just download dist/vue-echarts.js and include it in your HTML file:

只需下载dist/vue-echarts.js并将其包含在您HTML文件中即可：

<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>

用法 (Usage)

带有npm和vue-loader的ES模块(推荐) (ES Modules with npm & vue-loader (Recommended))

import Vue from 'vue'
import ECharts from 'vue-echarts/components/ECharts'

// import ECharts modules manually to reduce bundle size
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// register component to use
Vue.component('chart', ECharts)

Head️抬头 (⚠️ Heads up)

导入源版本 (Importing the souce version)

If you are using vue-cli to create your project and you want to use the untranspiled component (import vue-echarts/components/ECharts rather than import vue-echarts directly, to optimize bundle size, which is recommended), Vue's webpack template may exclude node_modules from files to be transpiled by Babel. To fix this problem, try change build/webpack.base.conf.js like this:

如果您正在使用vue-cli创建您的项目，并且想要使用vue-echarts/components/ECharts组件(建议使用vue-echarts/components/ECharts而不是直接导入vue-echarts来优化捆绑包大小，建议这样做)，则Vue的webpack模板可能会从要由Babel node_modules的文件中排除node_modules 。 要解决此问题，请尝试更改build/webpack.base.conf.js如下所示：

{
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-echarts'),
+         resolve('node_modules/resize-detector')
+       ]
      }

If you are using bare webpack config, just do similar modifications make it work.

如果您使用的是裸露的webpack配置，只需进行类似的修改即可使用。

npm的CommonJS (CommonJS with npm)

var Vue = require('vue')

// requiring the UMD module
var ECharts = require('vue-echarts')

// or with vue-loader you can require the src directly
// and import ECharts modules manually to reduce bundle size
var ECharts = require('vue-echarts/components/ECharts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')

// register component to use

AMD公司 (AMD)

require.config({
  paths: {
    'vue': 'path/to/vue',
    'vue-echarts': 'path/to/vue-ehcarts'
  }
})

require(['vue', 'vue-echarts'], function (Vue, ECharts) {
  // register component to use...
  Vue.component('chart', ECharts)
})

全局变量 (Global variable)

The component is exposed as window.VueECharts.

该组件显示为window.VueECharts 。

// register component to use
Vue.component('chart', VueECharts)

使用组件 (Using the component)

<template>
<chart :options="polar"></chart>
</template>

<style>
.echarts {
  height: 300px;
}
</style>

<script>
export default {
  data: function () {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  }
}
</script>

See more examples here.

在这里查看更多示例。

道具(所有React式) (Props (all reactive))

• initOptions

  initOptions

  Used to initialize ECharts instance.

  用于初始化ECharts实例。

• theme

  theme

  The theme used for current ECharts instance.

  当前ECharts实例使用的主题。

• options

  options

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

  用于更新ECharts实例的数据。 修改此道具将触发ECharts的setOption方法。

• group

  group

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

  该道具自动绑定到ECharts实例的同一道具。

• auto-resize (default: false)

  auto-resize (默认： false )

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

  该道具表明，无论何时调整ECharts实例的根目录大小，都应自动调整其大小。

• watchShallow (default: false)

  watchShallow (默认值： false )

  This prop is used to turn off the default deep watch for options prop. For charts with large amount of data, you may need to set this prop so that Vue only watches the options prop itself instead of watching all its properties inside. To trigger the rerender of the chart, you have to change the root reference to options prop itself, or you can manually manage data via the mergeOptions method (chart data won't be synchronized with options prop when doing this).

  该道具用于关闭options道具的默认深度监视。 对于包含大量数据的图表，您可能需要设置此属性，以便Vue仅监视options属性本身，而不监视其内部的所有属性。 要触发图表的重新渲染，您必须将根引用更改为options prop本身，或者可以通过mergeOptions方法手动管理数据(这样做时，图表数据不会与options prop同步)。

已计算 (Computed)

• width [readonly]

  width [唯读]

  Used to retrieve the current width of the ECharts instance.

  用于检索ECharts实例的当前宽度。

• height [readonly]

  height [唯读]

  Used to retrieve the current height of the ECharts instance.

  用于检索ECharts实例的当前高度。

• computedOptions [readonly]

  computedOptions [只读]

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

  更新options后，用于检索ECharts计算的实际options 。

方法 (Methods)

• mergeOptions (use setOption in ECharts under the hood)

  mergeOptions (在引擎盖下的mergeOptions使用setOption )

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

  提供一个更好的方法名称来描述setOption的实际行为。

• appendData

  appendData

• resize

  resize

• dispatchAction

  dispatchAction

• showLoading

  showLoading

• hideLoading

  hideLoading

• convertToPixel

  convertToPixel

• convertFromPixel

  convertFromPixel

• containPixel

  containPixel

• getDataURL

  getDataURL

• getConnectedDataURL

  getConnectedDataURL

• clear

  clear

• dispose

  dispose

静态方法 (Static Methods)

• connect

  connect

• disconnect

  disconnect

• registerMap

  registerMap

• registerTheme

  registerTheme

大事记 (Events)

Vue-ECharts support the following events:

Vue-ECharts支持以下事件：

• legendselectchanged

  legendselectchanged

• legendselected

  legendselected

• legendunselected

  legendunselected

• datazoom

  datazoom

• datarangeselected

  datarangeselected

• timelinechanged

  timelinechanged

• timelineplaychanged

  timelineplaychanged

• restore

  restore

• dataviewchanged

  dataviewchanged

• magictypechanged

  magictypechanged

• geoselectchanged

  geoselectchanged

• geoselected

  geoselected

• geounselected

  geounselected

• pieselectchanged

  pieselectchanged

• pieselected

  pieselected

• pieunselected

  pieunselected

• mapselectchanged

  mapselectchanged

• mapselected

  mapselected

• mapunselected

  mapunselected

• axisareaselected

  axisareaselected

• focusnodeadjacency

  focusnodeadjacency

• unfocusnodeadjacency

  unfocusnodeadjacency

• brush

  brush

• brushselected

  brushselected

• Mouse events

  鼠标事件

  • clickclick
  • dblclickdblclick
  • mouseovermouseover
  • mouseoutmouseout
  • mousedownmousedown
  • mouseupmouseup
  • globaloutglobalout

For further details, see ECharts' API documentation.

有关更多详细信息，请参阅ECharts的API文档 。

当地发展 (Local development)

$ npm i
$ npm run dev

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

打开http://localhost:8080/demo观看演示。

翻译自: https://vuejsexamples.com/built-upon-echarts-component-for-vue-js-2/

vue echarts组件