在vue-cli中使用echarts并封装echarts组件

1. 导入echarts

  1. 在终端输入
    cnpm install echarts --save
  2. 在main.js中引入
import * as eCharts from 'echarts';
Vue.prototype.$eCharts = eCharts;

2.封装echarts组件

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

你可能感兴趣的:(开发过程的bug记录,echarts,vue.js,javascript)