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

偏执的太偏执、 2023-09-24 22:25 115阅读 0赞

这几天公司里边有一个项目，叫做日控制台，该项目是在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()方法中的对象，达到封装不同图表组件的目的。

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

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