在vue下封装echarts公共组件的总结

这几天公司里边有一个项目，叫做日控制台，该项目是在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;
}