在vue2中使用echarts (Vue-ECharts插件）

时间 2019-11-21 标签 vue2 vue 2 中使用 echarts vue echarts 插件

Vue-ECharts

ECharts 的 Vue.js 组件。

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

安装

npm（推荐方式）

$ npm install echarts vue-echarts

CDN

在 HTML 文件按以下方式依次引入 echarts 和 vue-echarts：vue

<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

使用方法

用 npm 与 Vue Loader 基于 ES Module 引入（推荐用法）

import Vue from 'vue'
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue

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

// 若是须要配合 ECharts 扩展使用，只须要直接引入扩展包便可
// 以 ECharts-GL 为例：
// 须要安装依赖：npm install --save echarts-gl，并添加以下引用
import 'echarts-gl'

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

⚠️ 注意事项

引入源码版本

Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，若是你正在使用官方的 Vue CLI 来建立项目，可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围之外的问题。请按以下方法修改配置：node

当使用 Vue CLI 3+ 时，须要在 vue.config.js 中的 transpileDependencies 增长 vue-echarts 及 resize-detector，以下：webpack

// vue.config.js
module.exports = {
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

当使用 Vue CLI 2 的 webpack 模板时，须要按下述的方式修改 build/webpack.base.conf.js：git

{
        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，那么也请作相似的修改使其可以正常工做。es6

在 Nuxt.js 中使用

在 Nuxt.js 的服务端中使用 Vue-ECharts 时，可能没有正常转译。这是由于 Nuxt.js 默认会将 node_modules 目录下的绝大多数文件被排除在服务端打包代码之外。须要手动将 vue-echarts 加入白名单。github

对于 Nuxt.js v2 项目，按以下方式修改 nuxt.config.js：web

module.exports = {
  build: {
    transpile: ['vue-echarts', 'resize-detector']
  }
}

对于 Nuxt.js v1 项目，按以下方式修改 nuxt.config.js：npm

// 别忘了运行
// npm i --save-dev webpack-node-externals
const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  build: {
    extend (config, { isServer }) {
      // ...
      if (isServer) {
        config.externals = [
          nodeExternals({
            // `whitelist` 选项的默认值是
            // [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i]
            whitelist: [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i, /^vue-echarts/]
          })
        ]
      }
    }
  }
}

AMD

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

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

全局变量

在没有使用任何模块系统的状况下，组件将经过 window.VueECharts 变量暴露接口：json

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

调用组件

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

<style>
/**
 * 默认尺寸为 600px×400px，若是想让图表响应尺寸变化，能够像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    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 方法。

若是直接修改 options 绑定的数据而对象引用保持不变，setOption 方法调用时将带有参数 notMerge: false。不然，若是为 options 绑定一个新的对象，setOption 方法调用时则将带有参数 notMerge: true。

例如，若是有以下模板：
```
<v-chart :options="data"/>
```
那么：
```
this.data = newObject // setOption(this.options, true)
this.data.title.text = 'Trends' // setOption(this.options, false)
```
group
实例的分组，会自动绑定到 ECharts 组件的同名属性上。
autoresize （默认值：false）
这个 prop 用来指定 ECharts 实例在组件根元素尺寸变化时是否须要自动进行重绘。
manual-update （默认值：false）
在性能敏感（数据量很大）的场景下，咱们最好对于 options prop 绕过 Vue 的响应式系统。当将 manual-update prop 指定为 true 且不传入 options prop 时，数据将不会被监听。而后，你须要用 ref 获取组件实例之后手动调用 mergeOptions 方法来更新图表。

计算属性

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
graphic.clipPointsByRect
graphic.clipRectByRect

事件

Vue-ECharts 支持以下事件：

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
鼠标事件
- click
- dblclick
- mouseover
- mouseout
- mousemove
- mousedown
- mouseup
- globalout
- contextmenu

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

本地开发

$ npm i
$ npm run dev

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