echarts的封装

1、 新建Echarts.vue

<template>
    <div ref="echart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    props:{       //接收参数
        isAxisChart:{     //判断是柱状图/折线图,还是饼图
            type:Boolean,
            default:true
        },
        chartData:{       //图标的数据
            type:Object,
            default(){
                return{
                    xData:[],
                    series:[]
                }
            }
        }
    },
    data() {
        return {
            axisOptions:{    //折线图与柱状图的配置
                legend: {
                // 图例文字颜色
                    textStyle: {
                        color: "#333",
                    },
                },
                // 图表居中
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: [],
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        color: "#333",
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
                series: [],
            },
            normalOptions:{    //饼图的配置信息
                tooltip: {
                trigger: "item",
                },
                color: ["#0f78f4","#dd536b","#9462e5", "#a6a6a6","#e1bb22","#39c362",
                    "#3ed1cf"],
                series: [],
            },
            echart:null   //判断当前页面中是否有echart图表
        }
    },
    watch:{
        chartData:{          //一旦图标的数据发生变化，重新渲染图表
            deep:true,
            handler : function(){
                this.initChart()
            }
        }
    },
    methods: {
        initChart(){          //生成图表
            this.initChartData()    //初始化图表数据
            if(this.echart){       //如果图表已经存在，只需要更新配置信息
                this.echart.setOption(this.options)
            }else{             //如果不存在，则生成图表并配置信息
                this.echart = echarts.init(this.$refs.echart)
                this.echart.setOption(this.options)
            }
        },
        initChartData(){
            if(this.isAxisChart){    //如果是柱状图/折线图
                this.axisOptions.xAxis.data = this.chartData.xData    //x轴数据
                this.axisOptions.series = this.chartData.series    //y轴
            }else{
                this.normalOptions.series = this.chartData.series   //饼图只用配置series
            }
        }
    },
    computed:{
        options(){
            // 判断是折线图/柱状图，还是饼图
            return this.isAxisChart ? this.axisOptions : this.normalOptions
        }
    }
}
</script>

2、组件中使用

<!-- 折线图 -->
 <el-card style="height:280px">
    <!-- <div style="height:280px" ref="echarts"></div> -->
   <Echart :chartData="echartData.order" style="height:280px"></Echart>
 </el-card>
 <div class="graph">
   <el-card style="height:260px">
   		<!-- <div style="height:260px" ref="userEcharts"></div> -->
   		<Echart :chartData="echartData.user" style="height:240px"></Echart>
   </el-card>
   <el-card style="height:260px">
         <!-- <div style="height:240px" ref="videoEcharts"></div> -->
         <Echart :chartData="echartData.video" :isAxisChart="false" style="height:240px">			 </Echart>
   </el-card>
 </div>

import Echart from '../../components/Echarts.vue'

data() {
        return {
            ....
            echartData:{
                order:{
                    xData:[],
                    series:[]
                },
                user:{
                    xData:[],
                    series:[]
                },
                video:{
                    series:[]
                }
            }
        }
    },
    mounted(){
        getData().then(res => {
            const {code,data} = res.data
            if(code === 20000){
                this.tableData = data.tableData
                const order = data.orderData
                // console.log(order);
                const xData = order.date
                //苹果，三星，。。。
                const keyArray = Object.keys(order.data[0])
                const series =[]
                //遍历key，拿到key对应的键值
                keyArray.forEach(key =>{
                    series.push({
                        name:key,
                        data:order.data.map(item => item[key]),
                        type:'line'
                    })
                })
                this.echartData.order.xData = xData
                this.echartData.order.series = series
                this.echartData.user.xData = data.userData.map(item => item.date)
                this.echartData.user.series = [
                        {
                            name:'新增用户',
                            data:data.userData.map(item => item.new),
                            type:'bar'
                        },
                        {
                            name:'活跃用户',
                            data:data.userData.map(item => item.active),
                            type:'bar'
                        }
                    ]
                this.echartData.video.series = [
                        {
                            data:data.videoData,
                            type:'pie'
                        }
                    ]
			}
	})