Vue简单封装的echarts组件

<template>
    <div id="main" ></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'productChart',
    props:{
        data:{
            type:Object,
            default:()=>{{}}
        },
        columns:{
            type:Array,
            default:[]
        },
        series:{
            type:Array,
            default:{}
        }
    },
    data(){
        return{

        }
    },
    mounted(){
        const dom=document.querySelector('#main')
        console.log(this.series);
       
        this.$nextTick(()=>{
            this.series.forEach(item=>{
            let div=document.createElement('div')
            div.setAttribute('id','box')
            dom.appendChild(div)
            this.initChart(div,item)
        })
        })
    },
    methods:{
        initChart(div,series){
            const myChart=echarts.init(div,null,{height: 400})
            window.addEventListener('resize',()=>{
                myChart.resize()
            })
            const data=[];
            let option={}
            if(series.type==='bar'||series.type==='line'){
                // 柱状图或者折线图的数据处理
                series.product.forEach(item => {
                    this.columns.forEach(el=>{
                        if(el.title===item){
                            data.push(this.data[el.dataIndex])
                        }
                    })
                    });
                //柱状图或者折线图配置信息 
                option={
                legend: {
                    
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                title: {
                    text: series.chartName,
                    left: 'left'
                },
                xAxis: [
                {
                    type: 'category',
                    data:series.product,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                ],
                yAxis:[
                    {
                    type: 'value',
                    name:series.unit[0],
                    axisLabel: {
                        formatter: '{value} '+series.unit[1],
                    }
                    }
                ],
                series: [
                    {
                    // 普通样式。
                    itemStyle: {
                    // 点的颜色。
                    color: series.color
                    },
                    type: series.type,
                    data:data
                    }
                ]
            }
            }else if(series.type==='pie'){
                series.product.forEach(item => {
                    this.columns.forEach(el=>{
                        if(el.title===item){
                            data.push({
                                value:this.data[el.dataIndex],
                                name:item
                            })
                        }
                    })
                    });
                option={
                        title: {
                            text: series.chartName,
                            subtext: series.subtext,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data:data,
                            emphasis: {
                                itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                            }
                        ]};
            }
            //表格配置信息
            myChart.setOption(option)
        }
    }
}
</script>

<style lang="less">
#main{
    width:100%
}
#box{
    width:100%;
    height:300px;
    margin-bottom: 120px;
}
</style>

父组件代码

<productChart :data="chartData" :columns="columns" :series="charts"></productChart>


<script>

import productChart from '@/views/business/brReport/components/productChart'
export default {
  components: {
    productChart
  },

  data () {
    
      charts:[
        {
          chartName:'定金图表',//图表名称
          type:'bar',//图表类型
          unit:['人数','人'],//单位
          product:['前天定金','昨天定金','当天定金']//横坐标内容
        },
        {
          chartName:'业绩图表',
          name:'定金',
          type:'line',
          color:'yellow',//图表颜色
          unit:['人数','人'],
          product:['前天定金','昨天定金','当天定金']
        },
        {
          chartName:'人数图表',
          name:'定金',
          type:'bar',
          unit:['人数','人'],
          product:['前天定金','昨天定金','当天定金']
        },
        {
          chartName:'人图表',
          name:'定金',
          type:'pie',
          subtext:'人图表',
          product:['前天定金','昨天定金','当天定金']
        }
      ],
  }
</script>