这几天公司里边有一个项目，叫做日控制台，该项目是在webview下的一个webapp，使用vue构建，项目中要求使用许多自定义的图表。考察了许多图表组件之后，发现echarts是所有表库中，最灵活，特效最好看的一种。

一、构建基础公共组件

1. 实现基础功能

在echart官网上搜索到，如何使用

# 1. 获取一个用于挂在 echarts 的 DOM 元素
let $echartsDOM = document.getElementById('echarts-dom')

# 2. 初始化
let myEcharts = echarts.init($echartsDOM)

# 3. 设置配置项
let option = {...}

# 4. 为 echarts 指定配置
myEcharts.setOption(option)

使用echart的步骤也就这几部，就是先获取到承载echart实例的dom实例，然后调用init()方法初始化图标实例，最后调用setOption()方法传入配置项
这几步都要在vue的mounted方法下实现.

mounted() {
      let $echartsDOM = document.getElementById('echarts-dom')
      let myEcharts = echarts.init($echartsDOM)
      let option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    }
    myEcharts.setOption(option)
  }
}

注：在 Vue 中，首先我们需要使用 import echarts from 'echarts' 以引入 echarts。

二、组件化

思路很简单，就是将业务上用到的图表，比如柱状图、折线图，通通封装成组件，然后再main app文件中调用，通过分析，可以通过传props，来改变setOption()方法中的对象，达到封装不同图表组件的目的。

 <ocEcharts class="echarts-container" :options="ocoptions" />

将之前的options转移到main app中的data对象之中。
注：echarts图表要求承载的容器具有固定的宽高才能正常显示

.echarts-container{
  width: 100%;
  height: 20rem;
}

1. 组件优化-props的series校验

如果在传入组件的props中传入了空对象，就会发现，图表会抛出一个错误，即

Error: Option should contains series.

原因就是传入的 option 配置对象不含有 series 键，所以，默认值处理是需要存在的，即当调用方传入的对象为空或不存在 series 配置时，应在页面上显示一些提示（ 对用户友好的提示，而不是对编程人员 ），即避免因报错而造成空白的情况。
此外，当我们像之前那样给 option 这一参数进行类型限制后，倘若调用方传入非对象类型，Vue 会直接抛出错误——这一结果也不是我们想要的。我们应该取消类型限制，并在 option 发生变化时进行依次以下判断：

// 1. 是否为对象；
export function isObject(option) {
  return Object.prototype.isPrototypeOf(option)
}

// 2. 是否为空对象；
export function isEmptyObject(option) {
  return Object.keys(option).length === 0
}

// 3. 是否包含 series 键；
export function hasSeriesKey(option) {
  return !!option['series']
}

// 4. series 是否为数组；
export function isSeriesArray(option) {
  return Array.isArray(option['series'])
}

// 5. series 数组是否为空。
export function isSeriesEmpty(option) {
  return option['series'].length === 0
}

export function isValidOption(option) {
  return isObject(option) && !isEmptyObject(option)
    && hasSeriesKey(option)
    && isSeriesArray(option) && !isSeriesEmpty(option)
}

然后在组件中引入最后的isValidOption方法作为判断，我们先使用一个watch监听options的变化