代码拉取完成，页面将自动刷新
ECharts 的 Vue.js 组件。
基于 ECharts v3.8.5+ 开发，依赖 Vue.js v2.2.6+。
$ npm install vue-echarts
$ bower install vue-echarts
直接下载 dist/vue-echarts.js 并在 HTML 文件中引入：
<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>
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：
对于 webpack 1.x：
{
test: /\.js$/,
loader: 'babel',
include: [
- path.join(projectRoot, 'src')
+ path.join(projectRoot, 'src'),
+ path.join(projectRoot, 'node_modules/vue-echarts')
],
- exclude: /node_modules/
+ exclude: /node_modules(?![\\/]vue-echarts[\\/])/
},
对于 webpack 2+:
{
test: /\.js$/,
loader: 'babel-loader',
- include: [resolve('src'), resolve('test')]
+ include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts')]
}
如果你正直接配置使用 webpack，那么也请做类似的修改使其能够正常工作。
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)
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>
查看这里了解更多例子。
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 方法的实际行为。
resize
dispatchAction
showLoading
hideLoading
convertToPixel
convertFromPixel
containPixel
getDataURL
getConnectedDataURL
clear
dispose
connectdisconnectregisterMapregisterThemeVue-ECharts 支持如下事件：
legendselectchangedlegendselectedlegendunselecteddatazoomdatarangeselectedtimelinechangedtimelineplaychangedrestoredataviewchangedmagictypechangedgeoselectchangedgeoselectedgeounselectedpieselectchangedpieselectedpieunselectedmapselectchangedmapselectedmapunselectedaxisareaselectedfocusnodeadjacencyunfocusnodeadjacencybrushbrushselectedclickdblclickmouseovermouseoutmousedownmouseupglobalout更多详细信息请参考 ECharts 的 API 文档。
$ npm i
$ npm run dev
打开 http://localhost:8080/demo 来查看 demo。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手