1. 导入echarts
- 在终端输入
cnpm install echarts --save
- 在main.js中引入
import * as eCharts from 'echarts';
Vue.prototype.$eCharts = eCharts;
2.封装echarts组件
- 新建组件echats.vue
- 首先应该明确Echarts图形必须满足四项刚性条件才可以绘制:
准备一个具有宽高的容器(container);
每次绘制之前需要初始化(init);
必须设置配置,否则无从绘制(option);
改变数据时必须传入改变的数据,否则监听不到新数据(setOption);
- 1.容器
注意,容器的宽高可以通过v-bind绑定样式的参数styleObj
来设置(父组件引用时传递过来),使得应用echats组件时可以自由地设置宽高
<template>