vue封装echars柱状图组件和折线图组件以及混合图组件

 先看效果

组件代码如下：

<template>
<div>
     <div class="el-title">
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple"><span class="panel-title">{{timeData.toolTitle}}</span></div></el-col>
          <el-col :span="12">
              <div class="grid-content bg-purple-light">
                  <div class="block" v-if="timeData.timeType==1">
                    <el-date-picker
                      v-model="timeData.timeValue"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
                  </div>
                  <div class="block" v-else>
                    <el-date-picker
                     v-model="timeData.timeValue"
                     type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </div>
            </div>
          </el-col>
      </el-row>
    </div>
    <div id="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "charsView",
  props: {
    getData:{type:Array},
    timeData:{type:Object},
  },
  data() {
    return {
     };
  },
  mounted(){
    this.firstInit();
  },
  methods: {
    firstInit(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      var xAxisArray = [];
      var yAxisArray = [];
      var legendArray = [];
      var seriesArray = [];
      var getDataTemp = this.getData;
      for(let i=0;i<getDataTemp.length;i++){
        legendArray.push(getDataTemp[i].title);
        let xAxisObj =  {
                  type: 'category',
                  data: getDataTemp[i].dataX,
                  show:getDataTemp[i].xLineShow,
                  axisTick: {
                    show: false
                  }
              };
        xAxisArray.push(xAxisObj);
        let yAxisObj = {  
                  type: 'value',
                  show:getDataTemp[i].yLineShow,
                  axisLine:{
                    show:true,
                  },
                  axisTick: {
                    show: true
                  }
              };
        yAxisArray.push(yAxisObj);
        let seriesObj =   {
                  name: getDataTemp[i].title,
                  type: getDataTemp[i].lineType,
                  barWidth: '30%',
                  data:getDataTemp[i].dataSeries,
                  yAxisIndex: i,
              };
        seriesArray.push(seriesObj);
      }
      option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          legend: {
              data: legendArray
          },
          grid:{},
          xAxis:xAxisArray,
          yAxis: yAxisArray,
          series:seriesArray,
      };
      option && myChart.setOption(option);

    }
  },
  
};
</script>

<style scoped lang="scss">
.home {
  font-weight: bolder;
}
  .table-expand {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-tbleborder{
      width: 100%;
      border: 1px solid #e7e7e7;
  }
  .el-tablePd{
      padding:  10px;
  }
  .el-table-zj{
      padding-top: 10px;
  }
  .bg-purple-light{
    text-align: right;
  }
.panel-title {
    padding-left: 20px;
    margin-left: -10px;
    font-weight: bold;
   
}
.panel-title:before {
    display: block;
    content: "";
    height: 17px;
    width: 5px;
    position: absolute;
    border-right: 3px solid #3498db;
    top: 3px;
}
.hover:hover{
  color: #014dd4;
  cursor: pointer;
}
.panel-controls .controls{
  padding: 0 10px;
}
</style>

调用页代码如下：

<template>
<div>
     <!-- <div class="el-title">
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple"><span class="panel-title">{{timeData.toolTitle}}</span></div></el-col>
          <el-col :span="12">
              <div class="grid-content bg-purple-light">
                  <div class="block" v-if="timeData.timeType==1">
                    <el-date-picker
                      v-model="timeData.timeValue"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
                  </div>
                  <div class="block" v-else>
                    <el-date-picker
                     v-model="timeData.timeValue"
                     type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </div>
            </div>
          </el-col>
      </el-row>
    </div>
    <div id="main" style="width: 100%;height:400px;"></div> -->
    <charsView :getData="getData" :timeData="timeData"></charsView>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import charsView  from"@/components/IndexTable/charstable";
export default {
  name: "CharsBar",
  components: {charsView},
  data() {
    return {
      getData:[
        {
          dataX: ['555','', '2222', '','333','', '444', '','555','', '666','', '777'], //X轴的名称 空字符串是为了占位X州不显下面名称的
          dataSeries: [10, 22,52,33, 200, 44,334,55, 390, 66,330,77, 220], //Y轴对应的数据  和上面的横坐标名称需要一一对应
          title:'我是数据名称', //标题小按钮
          toolTitle:'我是工具栏头标题',
          lineType:'bar',//bar代表柱状图  line代表折线图
          xLineShow:true, //是否显示X轴
          yLineShow:true,//是否显示Y轴
        },
       {
          dataX: ['555','', '2222', '','333','', '444', '','555','', '666','', '777'], //X轴的名称
          dataSeries: [10, 5,7,9, 65, 43,33,55, 1, 34,80,77, 32], //Y轴对应的数据  和上面的横坐标名称需要一一对应
          title:'我是折线图', //标题小按钮
          toolTitle:'我是工具栏头标题',
          lineType:'line',//bar代表柱状图  line代表折线图
          xLineShow:false, //是否显示X轴
          yLineShow:true,//是否显示Y轴
        },
      ],
      timeData:{
        timeType:1,//时间的那个框的类型
        timeValue:'', //时间下拉框的选择值
        toolTitle:'我是工具栏标题'
      },
     };
  },
  mounted(){
    // this.firstInit();
  },
};
</script>

<style scoped lang="scss">
.home {
  font-weight: bolder;
}
  .table-expand {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-tbleborder{
      width: 100%;
      border: 1px solid #e7e7e7;
  }
  .el-tablePd{
      padding:  10px;
  }
  .el-table-zj{
      padding-top: 10px;
  }
  .bg-purple-light{
    text-align: right;
  }
.panel-title {
    padding-left: 20px;
    margin-left: -10px;
    font-weight: bold;
   
}
.panel-title:before {
    display: block;
    content: "";
    height: 17px;
    width: 5px;
    position: absolute;
    border-right: 3px solid #3498db;
    top: 3px;
}
.hover:hover{
  color: #014dd4;
  cursor: pointer;
}
.panel-controls .controls{
  padding: 0 10px;
}
</style>