Vue.js
v2.x+
component wrap for ECharts.jsv3.x+
- Lightweight, efficient, on-demand binding events;
- Support for importing ECharts.js charts and components on demand;
- Support component resize event auto update view;
$ npm install --save echarts vue-echarts-v3
-
Change webpack config
For webpack 1.x:
{ test: /\.js$/, loader: 'babel', include: [ - path.join(prjRoot, 'src') + path.join(prjRoot, 'src'), + path.join(prjRoot, 'node_modules/vue-echarts-v3/src') ], - exclude: /node_modules/ + exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/ },
For webpack 2.x+:
{ test: /\.js$/, loader: 'babel-loader', - include: [resolve('src'), resolve('test')] + include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')] }
-
Import all charts and components
import IEcharts from 'vue-echarts-v3/src/full.js';
-
Import ECharts.js modules manually to reduce bundle size
import IEcharts from 'vue-echarts-v3/src/lite.js'; // import 'echarts/lib/chart/line'; import 'echarts/lib/chart/bar'; // import 'echarts/lib/chart/pie'; // import 'echarts/lib/chart/scatter'; // import 'echarts/lib/chart/radar'; // import 'echarts/lib/chart/map'; // import 'echarts/lib/chart/treemap'; // import 'echarts/lib/chart/graph'; // import 'echarts/lib/chart/gauge'; // import 'echarts/lib/chart/funnel'; // import 'echarts/lib/chart/parallel'; // import 'echarts/lib/chart/sankey'; // import 'echarts/lib/chart/boxplot'; // import 'echarts/lib/chart/candlestick'; // import 'echarts/lib/chart/effectScatter'; // import 'echarts/lib/chart/lines'; // import 'echarts/lib/chart/heatmap'; // import 'echarts/lib/component/graphic'; // import 'echarts/lib/component/grid'; // import 'echarts/lib/component/legend'; // import 'echarts/lib/component/tooltip'; // import 'echarts/lib/component/polar'; // import 'echarts/lib/component/geo'; // import 'echarts/lib/component/parallel'; // import 'echarts/lib/component/singleAxis'; // import 'echarts/lib/component/brush'; import 'echarts/lib/component/title'; // import 'echarts/lib/component/dataZoom'; // import 'echarts/lib/component/visualMap'; // import 'echarts/lib/component/markPoint'; // import 'echarts/lib/component/markLine'; // import 'echarts/lib/component/markArea'; // import 'echarts/lib/component/timeline'; // import 'echarts/lib/component/toolbox'; // import 'zrender/lib/vml/vml';
<template>
<div class="echarts">
<IEcharts
:option="bar"
:loading="loading"
@ready="onReady"
@click="onClick"
/>
<button @click="doRandom">Random</button>
</div>
</template>
<script type="text/babel">
import IEcharts from 'vue-echarts-v3/src/full.js';
export default {
name: 'view',
components: {
IEcharts
},
props: {
},
data: () => ({
loading: true,
bar: {
title: {
text: 'ECharts Hello World'
},
tooltip: {},
xAxis: {
data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}),
methods: {
doRandom() {
const that = this;
let data = [];
for (let i = 0, min = 5, max = 99; i < 6; i++) {
data.push(Math.floor(Math.random() * (max + 1 - min) + min));
}
that.loading = !that.loading;
that.bar.series[0].data = data;
},
onReady(instance, ECharts) {
console.log(instance, ECharts);
},
onClick(event, instance, ECharts) {
console.log(arguments);
}
}
};
</script>
<style scoped>
.echarts {
width: 400px;
height: 400px;
}
</style>
-
styles
Optional; CSS style is
{ width: 100%; height: 100%; }
by default. -
initOpts
&theme
Optional; Used to initialize ECharts instance.
-
option
[reactive]Used to update data for ECharts instance. Modifying this property will trigger ECharts'
setOptions
method. -
group
[reactive]Optional; This property is automatically bound to the same property of the ECharts instance.
-
notMerge
Optional;
false
by default. Detail -
lazyUpdate
Optional;
false
by default. Detail -
loading
[reactive]Optional;
false
by default. Modifying this property will trigger ECharts'showLoading
orhideLoading
method. -
loadingOpts
Optional; Detail
-
resizable
Optional;
false
by default.
See more ECharts' Option
resize
update
mergeOption
dispatchAction
convertToPixel
convertFromPixel
containPixel
showLoading
hideLoading
getDataURL
getConnectedDataURL
clear
connect
disConnect
dispose
getInstanceByDom
registerMap
getMap
registerTheme
Learn more ECharts' API
MIT