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 +。
安装 (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 theoptions
prop itself instead of watching all its properties inside. To trigger the rerender of the chart, you have to change the root reference tooptions
prop itself, or you can manually manage data via themergeOptions
method (chart data won't be synchronized withoptions
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
(usesetOption
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
鼠标事件
click
click
dblclick
dblclick
mouseover
mouseover
mouseout
mouseout
mousedown
mousedown
mouseup
mouseup
globalout
globalout
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组件