ECharts component for Vue.js.
Built upon ECharts v3.3.2
+ and depends on Vue.js v2.0.1
+.
Just download dist/vue-echarts.js
and include it in your HTML file:
<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>
$ npm install vue-echarts
$ bower install vue-echarts
Just download dist/vue-echarts.js
and include it in your HTML file:
<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>
import Vue from 'vue'
import ECharts from 'vue-echarts/components/ECharts.vue'
// import ECharts modules manually to reduce bundle size
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
// register component to use
Heads up
if you are using vue-cli
to create your project, the webpack
template may exclude node_modules
from files to be transpiled by Babel. Change the exclude
value from /node_modules/
to /node_modules(?![\\/]vue-echarts[\\/])/
to fix the problem.
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.vue')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
// register component to use
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)
})
The component class is exposed as window.VueECharts
.
// register component to use
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>
See more examples here.
initOptions
& theme
Used to initialize ECharts instance.
options
[reactive]
Used to update data for ECharts instance. Modifying this property will trigger ECharts' setOptions
method.
group
[reactive]
This property is automatically bound to the same property of the ECharts instance.
auto-resize
This property indicates ECharts instance should be resized automatically whenever the window is resized.
mergeOptions
(setOptions
in ECharts)
Providing a better method name to describe the actual behavior of setOptions.
resize
dispatchAction
showLoading
hideLoading
convertToPixel
convertFromPixel
containPixel
getDataURL
getConnectedDataURL
clear
dispose
connect
disconnect
registerMap
registerTheme
You can refer to ECharts' API to learn how to use the methods above.
$ npm i
$ npm run dev
Open http://localhost:8080/demo
to see the demo.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。