封装echarts组件

做报表时注意事项（echart）
1、后台返回数据为空时，eChart图表不能突然消失，可以给它赋空值
2、柱形图双y轴时，注意单位，刻度（刻度对齐），与右边轴对齐的字段
3、可以设置阴影，清晰的看出一组值
3、y轴最大值的设定

条形图和折线图
子组件

<template>
    <div class="echartsLine" :id="id"></div>
</template>
<script>
import echarts from 'echarts'
export default {
    name:'echartsLine',
    props:{
       id:{
           type:String,
           required:true
        },
        type:{
            type:Array,
            required:false,
            default:function(){
                return  ['bar','line'] 
            }                                                          
        },
        xData:{
            type:Array,
            required:true
        },
        max:{
            type:Number,
            required:false,
            default:200
        },
        min:{
            type:Number,
            required:false,
            default:10
        },
        dataList:{
            type:Array,
            required:true
        },
        seriesType:{
            type:String,
            required:true
        }
    },
    data(){
        return{         
           echarts:'' 
        }
    },
    mounted(){
      this.initEchartsLine();
    }, 
    methods:{
        initEchartsLine(){
            this.echarts=echarts.init(document.getElementById(this.id));
            var option={
                title:{
                    text:'',
                    textStyle:{
                        fontWeight:400,
                        fontSize:'20px'
                    }
                },
                //提示框组件
                tooptip:{
                    show:true,
                    trigger:'axis'
                },
                //工具栏
                toolbox:{
                    show:true,
                    feature:{
                        magicType:{
                            show:true,
                            type:this.type
                        }
                    },
                    right:'6%'
                },
                //横坐标
                xAxis:{
                    type:'category',
                    data:this.xData,
                    axisLine:{
                        lineStyle:{
                            type:'solid',
                            color:'#333',
                            width:'1'
                        }
                    },
                    axisTick:{
                        show:true
                    },
                    axisLabel:{
                        textStyle:{
                            color:'#333'
                        }
                    }
                },
                //纵坐标
                yAxis:{
                    name:'',
                    max:this.max,
                    type:'value',
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:true
                    },
                    axisLabel:{
                        textStyle:{
                            color:'#333'
                        }
                    },
                    minInterval:this.min,
                    splitLine:{
                        lineStyle:{
                            color:'#f6f6f6'
                        }
                    }
                },
                series:[{
                    name:'',
                    type:this.seriesType,
                    data:this.dataList,
                    itemStyle:{
                        normal:{
                            color: function(params){
                                var colorList=[
                                    '#55A8FD','#5FDAC7','#FA7D7D','#AEB3B8','#92C789','#6A6A6A'
                                ]
                                return colorList[params.dataIndex]
                            },
                            label:{
                                show:true,
                                position:'top',
                                textStyle:{
                                    color: '#333',
                                    fontSize:14,
                                    fontWeight:500
                                }
                            }
                        }
                    },
                    barWidth:35
                }]
            }
            this.echarts.setOption(option);
        }
    }
}
</script>
<style lang="less" scoped>
.echartsLine{
    height: 300px;
    width:100%;
}
</style>

父组件

 <echartsLine :id="id3" :xData='xData1' :dataList='dataList1' :max='max' :seriesType='seriesType'></echartsLine>

饼图
子组件

<template>
    <div class="pie" :id="id"></div>
</template>
<script>
import echarts from 'echarts'
export default {
    props:{
        id:{
            type:String,
            required:true
        },
        dataList:{
            type:Array,
            required:false
        },
        radius:{
            type:Number,
            required:false,
            default:50
        }
    },
    data(){
        return{
            echarts:''
        }
    },
    mounted(){
        this.initCharts();
    },
    destroy(){
        if (this.echarts) {        
            this.echarts.dispose();   
            this.echarts = null;
        }
    },
    methods:{
        initCharts(){
            // debugger;
            this.echarts=echarts.init(document.getElementById(this.id));
            var option={
                title:{
                    text:'',
                    x:'center',
                },
                tooltip:{
                    trigger:'item',
                    formatter:'{a}<br>{b}:{c}({d}%)'
                },
                series:[
                    {
                        type:'pie',
                        radius:this.radius+'%',
                        center:['50%','50%'],
                        data:this.dataList,
                        itemStyle:{
                            emphasis:{
                                shadowBlur:10,
                                shadowOffsetX:0,
                                shadowColor:'rgba(0,0,0,1)'
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{b}:{d}%',
                                fontSize: 16,
                                color: '#000',                               
                            }
                        }
                    }
                ]
            }
            this.echarts.setOption(option);
        }
    }
}
</script>
<style lang="less" scoped>
.pie{
    width: 100%;
    height: 300px;
}
</style>

父组件

<pie :id="id2" :dataList='pieItems1'></pie>

散点图
子组件

<template>
    <div class="scatter" :id="id"></div>
</template>
<script>
import echarts from 'echarts'
export default {
    name:'scatter',
    props:{
        id:{
            type:String,
            required:true
        },
        min:{
            type:Number,
            required:false,
            default:5
        },
        max:{
            type:Number,
            required:false,
            default:100
        },
        // 标记的形状
        symbol:{
            type:String,
            required:false,
            default:'rect'
        },
        // 标记的大小
        symbolSize:{
            type:Number,
            required:false,
            default:15
        },
        // 二维数组
        dataList:{
            type:Array,
            required:true
        }
    },
    data(){
        return{
            echarts:''
        }
    },
    mounted(){
        this.initEcharts();
    },
    destroy(){
        if(this.echarts){
            this.echarts.dispose();
            this.echarts=null;
        }
    },
    methods:{
        initEcharts(){
            this.echarts=echarts.init(document.getElementById(this.id));
            var option={
                xAxis:{
                    type:'value',
                    name:''
                },
                yAxis:{
                    type:'value',
                    name:'',
                    max:this.max,
                    min:this.min
                },
                series:[{
                    symbol:this.symbol,
                    symbolSize:this.symbolSize,
                    data:this.dataList,
                    type:'scatter'
                }]
            }
            this.echarts.setOption(option)
        }
    }
}
</script>
<style lang="less" scoped>
.scatter{
    height: 300px;
    width: 100%;
}
</style>

父组件

 <scatter :id="id4" :dataList='dataList2' :max='10'></scatter>