Skip to content

Latest commit

 

History

History
289 lines (218 loc) · 6.17 KB

README.zh_CN.md

File metadata and controls

289 lines (218 loc) · 6.17 KB
Raw

Vue-ECharts

ECharts 的 Vue.js 组件。

基于 ECharts v4.0.1+ 开发，依赖 Vue.js v2.2.6+。

安装

npm（推荐方式）

$ npm install vue-echarts

bower

$ bower install vue-echarts

手动安装

直接下载 dist/vue-echarts.js 并在 HTML 文件中引入：

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

使用方法

用 npm 与 vue-loader 基于 ES Module 引入（推荐用法）

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

// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// 注册组件后即可使用
Vue.component('chart', ECharts)

⚠️ 注意事项

引入源码版本

如果你正在使用 vue-cli 来创建项目并且希望使用未经转译的组件（引入 vue-echarts/components/ECharts 而非直接引入 vue-echarts）来减小打包尺寸（是推荐用法），那么 Vue 的 webpack 模板可能会把 node_modules 中的文件排除在 Babel 转译范围以外。要解决此问题，需要按下述的方式修改 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')
+       ]
      }

如果你正直接配置使用 webpack，那么也请做类似的修改使其能够正常工作。

在没有 ES Next 支持环境下用 npm 以 CommonJS 方式引入

var Vue = require('vue')

// 引入 UMD 模块
var ECharts = require('vue-echarts')

// 或者在使用 vue-loader 时可以直接引入源码版本，并且手动
// 引入 ECharts 各个模块来减小打包尺寸
var ECharts = require('vue-echarts/components/ECharts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')

// 注册组件后即可使用
Vue.component('chart', ECharts)

AMD

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

require(['vue', 'vue-echarts'], function (Vue, ECharts) {
  // 注册组件后即可使用
  Vue.component('chart', ECharts)
})

全局变量

组件将通过 window.VueECharts 变量暴露接口：

// 注册组件后即可使用
Vue.component('chart', VueECharts)

调用组件

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

查看这里了解更多例子。

Props （均为响应式）

  • initOptions

    用来初始化 ECharts 实例。

  • theme

    当前 ECharts 实例使用的主题。

  • options

    ECharts 实例的数据。修改这个 prop 会触发 ECharts 实例的 setOption 方法。

  • group

    实例的分组，会自动绑定到 ECharts 组件的同名属性上。

  • auto-resize （默认值：false）

    这个 prop 用来指定 ECharts 实例在组件根元素尺寸变化时是否需要自动进行重绘。

  • watchShallow （默认值：false）

    这个 prop 可以用来关闭默认的对 options prop 的深度监听。对于有大量数据的图表，你可能会需要开启这个选项，来让 Vue 仅监听 options prop 本身的变化而忽略内部属性的变化。此时在需要重绘图表时，你需要重新设置 options prop 的直接引用，或者调用 mergeOptions 方法来手动管理图表内的数据（此时 options prop 的数据将不和图表内数据同步）。

计算属性

  • width [只读]

    用来获取 ECharts 实例的当前宽度。

  • height [只读]

    用来获取 ECharts 实例的当前高度。

  • computedOptions [只读]

    用来读取 ECharts 更新内部 options 后的实际数据。

方法

  • mergeOptions（底层调用了 ECharts 实例的 setOption 方法）

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

  • appendData

  • resize

  • dispatchAction

  • showLoading

  • hideLoading

  • convertToPixel

  • convertFromPixel

  • containPixel

  • getDataURL

  • getConnectedDataURL

  • clear

  • dispose

静态方法

  • connect
  • disconnect
  • registerMap
  • registerTheme

事件

Vue-ECharts 支持如下事件：

  • legendselectchanged
  • legendselected
  • legendunselected
  • datazoom
  • datarangeselected
  • timelinechanged
  • timelineplaychanged
  • restore
  • dataviewchanged
  • magictypechanged
  • geoselectchanged
  • geoselected
  • geounselected
  • pieselectchanged
  • pieselected
  • pieunselected
  • mapselectchanged
  • mapselected
  • mapunselected
  • axisareaselected
  • focusnodeadjacency
  • unfocusnodeadjacency
  • brush
  • brushselected
  • 鼠标事件
    • click
    • dblclick
    • mouseover
    • mouseout
    • mousedown
    • mouseup
    • globalout

更多详细信息请参考 ECharts 的 API 文档。

本地开发

$ npm i
$ npm run dev

打开 http://localhost:8080/demo 来查看 demo。