特征
- 轻量,高效,按需绑定事件
- 支持按需导入ECharts.js图表和组件
- 支持组件调整大小事件自动更新视图
一、安装
npm install --save echarts vue-echarts-v3
二、用法
用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件
1、webpack 1.x 修改成如下
-
{
-
test: /\.js$/,
-
loader:
'babel',
-
include: [
-
path.
join(prjRoot,
'src'),
-
path.
join(prjRoot,
'node_modules/vue-echarts-v3/src')
-
],
-
exclude: /
node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
-
},
2、webpack 2.x 修改成如下
-
{
-
test: /\.js$/,
-
loader:
'babel-loader',
-
include: [
resolve(
'src'),
resolve(
'test'),
resolve(
'node_modules/vue-echarts-v3/src')]
-
}
3、导入所有图表和组件
import IEcharts from 'vue-echarts-v3/src/full.js';
4、手动导入ECharts.js模块以减少捆绑包大小
-
import IEcharts
from
'vue-echarts-v3/src/lite.js';
-
-
import
'echarts/lib/component/title';
//引入标题组件
-
import
'echarts/lib/component/legend';
//引入图例组件
-
import
'echarts/lib/component/tooltip';
//引入提示框组件
-
import
'echarts/lib/component/toolbox';
//引入工具箱组件
-
// ...(引入自己需要的)
-
import
'echarts/lib/chart/pie';
//以饼图为例
三、例子
关于Echarts的API使用参照 Echarts官网
- 从接口获取的动态数据可以直接通过
props
从父组件传过来,替换下面的series[0].data
数组中的数据 - 也可以从这个组件中从接口获取动态数据。但
option
属性对应的变量pie
必须写在computed
中return
出来,不能再写在data
中,否则获取不到数据
-
<template>
-
<div class="echarts">
-
<IEcharts :option="pie" @ready="onReady" @click="onClick">
</IEcharts>
-
</div>
-
</template>
-
<script>
-
import IEcharts
from
'vue-echarts-v3/src/lite.js';
-
import
'echarts/lib/component/title';
//引入标题组件
-
import
'echarts/lib/component/legend';
//引入图例组件
-
import
'echarts/lib/chart/pie';
-
export
default {
-
components: {IEcharts},
-
data:
() => ({
-
pie: {
-
title: {
-
text:
'ECharts Demo'
-
},
-
tooltip: {},
-
legend:{
-
type:
'plain',
-
orient:
'vertical',
-
right:
10,
-
top:
20,
-
},
-
series: [{
-
type:
'pie',
-
data: [
-
{
name:
'A',
value:
1211},
-
{
name:
'B',
value:
2323},
-
{
name:
'C',
value:
1919}
-
]
-
}]
-
}
-
}),
-
methods: {
-
onReady(instance) {
-
console.log(instance);
-
},
-
onClick(event, instance, echarts) {
-
console.log(
arguments);
-
}
-
}
-
};
-
</script>
-
<style scoped>
-
.echarts{
-
width:
400px;
-
height:
400px;
-
margin: auto;
-
text-align: center;
-
}
-
</style>