自己封装vue echart组件 方便调用

<template>
  <div>
    <div ref="lineChart" :style="{ width: width, height: height }"></div>
        
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
require('echarts/theme/macarons') // echarts theme
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: false
    }
  },
  watch: {
    chartData: {
      handler(val) {
        this.resData = val;
        this.$nextTick(function(){  //页面加载完成后执行
          this.updateChartData();
        })
       
      },
      immediate:true,
      deep: true
    }
  },
  data() {
    // var resData = null;
    const lincolors = ['#77c940', '#16afd4']
    return {
      myChart: null,
      resData:null,
      lincolors: ['#77c940', '#16afd4'] //色系条
    }
  },
  created() {
    /*     var resData = {
          ydata: [834.58, 1811.34, 3002.46, 4335.15, 5867, 7235.28, 7464.57],
          xdata: ["2022-05", "2022-06", "2022-07", "2022-08", "2022-09"]
        } */
  },
  mounted() {

  },
  methods: {
    // 更新统计表数据
    updateChartData() {
      let xdata = this.resData.xAxis||this.resData.xdata;
      let ydata = this.resData.series||this.resData.ydata;
      let chartType=this.resData.chartType;
      let colorList=this.resData.colorList;
      console.log("********-------------------------********",xdata,ydata)
      this.initChart('lineChart', xdata, ydata,chartType,colorList);
    },
    initChart(dom, xValue, yValue,chartType,colorList) {
      if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
        this.myChart.dispose();//销毁
      }
      // this.myChart = this.$echarts.init(this.$refs.lineChart);
      this.myChart = this.$echarts.init(this.$refs.lineChart, 'macarons');

      let seriesList=yValue.map(res=>{
         let item={
            name: res.name,
            type: chartType || res.type || 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data:res.data
          }
          return item;
      })
      let legendList=yValue.map(item=>item.name);
      let options = {
        legend: {
          data: legendList,
          show:true,
          left :'left',  //center right
          // orient:'vertical'
          // align:'right',
          // type:'plain'  //plain
        },
        color: colorList||this.lincolors,
        // title: { text: '一般折线图', left: 'center' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '60px',
          bottom: '8%',
          containLabel: true
        },
        xAxis:
        {
          type: 'category',
          boundaryGap: true,
          data: xValue
        },
        yAxis: [
          {
            // name:'单位（万/KWh)）',
            type: 'value'
          }
        ],

        series: seriesList

  /*       series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
            {
            label: {
              color: '#000',
              show: true,
              position: 'top'
            },
            data: yValue,
            type: 'line',
            smooth: true,
            symbol: 'circle', //折线点设置为实心点
            symbolSize: 10, //折线点的大小
            areaStyle: {}
          } 
        ] */
      }
      this.myChart.setOption(options);
    }
  }
}
</script>
<style>

</style>

父组件调用

<template>
    <div class="app-container">
        <el-container>
            <el-aside class="asidebar" width="400px">
                <treeMenu />
            </el-aside>
            <el-main>
                <el-row class="mb20" :gutter="20">
                    <el-col :span="8">
                        <el-card class="box-card" style="text-align:center">
                            <epie2 class="Rel" name="20万元" count="40" title="能耗成本"></epie2>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="box-card" style="text-align:center">
                            <epie2 class="Rel" name="8万度" count="80" title="设备总电量"></epie2>
                        </el-card>
                    </el-col>+
                    <el-col :span="8">
                        <el-card class="box-card" style="text-align:center">
                            <epie2 class="Rel" name="20万元" count="40" title="能耗成本"></epie2>

                        </el-card>
                    </el-col>
                </el-row>
                <el-row class="mb20">
                    <el-col :span="24">
                        <!-- <Histogram /> -->
                        <el-card class="box-card">
                            <lineChart width="100%" height="500px" :chartData="lineData" v-if="lineData"></lineChart>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row class="mb20" :gutter="20">
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>卡片名称</span>
                                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                            </div>
                            <lineChart width="90%" height="300px" :chartData="lineData2" v-if="lineData2"></lineChart>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>卡片名称</span>
                                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                            </div>
                            <lineChart width="90%" height="300px" :chartData="lineData2" v-if="lineData2"></lineChart>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script>

import PanelGroup from './com/PanelGroup.vue'
import Histogram from './com/Histogram.vue'
import treeMenu from './com/deviceBar.vue'
import lineChart from './com/LineCommom.vue'  //引用地址
import epie2 from './com/e-pie2.vue'

import { data } from "./tableJson";
export default {
    components: {
        lineChart,
        treeMenu,
        Histogram,
        epie2
    },
    data() {
        return {
            tableData: data,
            lineData: null,
            lineData2: null
        }
    },
    created() {
        console.log(this.dataObject);
        // this.lineData = {
        //     series: [
        //         [28, 67, 8, 24, 18, 26, 55,],
        //         [58, 18, 26, 55, 67, 8, 24],
        //         [83, 183, 246, 45, 57, 28, 47]
        //     ],
        //     xAxis: ["2022-05", "2022-06", "2022-07", "2022-08", "2022-09"]
        // }

        this.lineData = {
            series: [
                {
                    name: '总电量',
                    type: 'line',
                    data: [28, 6, 28, 6, 28, 566, 280]
                },
                {
                    name: '总电流',
                    type: 'bar',
                    data: [58, 48, 236, 25, 10, 68, 105]
                },
                {
                    name: '总电压',
                    type: 'scatter',
                    data: [122, 6, 190, 140, 108, 22, 26]
                },
            ],
            xAxis: ["2022-05", "2022-06", "2022-07", "2022-08", "2022-09", "2022-10"],
            chartType: 'line',
            // colorList:['#000',"#f90",'#ddd']
        }
        this.lineData2 = {
            series: [
                {
                    name: '总电量',
                    type: 'line',
                    data: [28, 6, 28]
                },
                {
                    name: '总电流',
                    type: 'bar',
                    data: [58, 68, 105]
                },
                {
                    name: '总电压',
                    type: 'scatter',
                    data: [122, 6, 190]
                },
            ],
            xAxis: ["2022-05", "2022-06", "2022-07"],
            chartType: 'bar',
            colorList: ['#000', "#f90", '#3782c9']
        }
    },
    /*    
    {
    name: 'Email'+res,
    type: 'line',  // line直线  bar柱状  scatter散点
    stack: 'Total',
    areaStyle: {},
    emphasis: {
        focus: 'series'
    },
    data:[28, 67, 8, 24, 18, 26, 55],
    } 
    */
    methods: {
        format(percentage) {
            return `${percentage}台`;
        }

    }
}
</script>
<style lang="scss" scoped>
.el-main {
    padding: 0;
}

.el-aside {
    padding-top: 0;
}

.asidebar {
    background-color: white;
}

.font0 {
    font-size: 20px;
}
</style>

红色子部分为关键代码  可以通过配置完成各种echart图标设配