封装echarts

echars组件封装，通过props接受父组件传递的值propValue，根据propValue渲染图表

1、为echarts添加容器

<template>
<!-- echars组件封装，props接受父组件传递的值propValue -->
    <div> 
        <!-- 判断渲染一个图表或者多个图表 -->
        <!-- 渲染一个图表 -->
        <div v-show="!propValueType" id="echartsId" 
        style="{width: 100%; height: 100%;}"></div>
        <!-- 渲染多个图表 -->
        <div v-show="propValueType" v-for="(item, index) in propValue" :key="index" :id="item.id" class="echarts" style="{width: 100%; height: 100%;}"></div>
    </div>
</template>

2、添加数据

<script>
    export default {
        name: "Echart",
        data() {
            return {
                propValueType: true,
            }  
        },
        props: ["propValue"],
        created() {
            //判断传递数据是否是数组，数组代表多个图表，对象代表一个图表
            this.propValueType = Array.isArray(this.propValue);
        },
        mounted() {
            const echarts = require("echarts");
            // 指定图表的配置项基础数据
            const option = {
                color: ["#FD8A81", "#37E9DA"],
                title: {
                    text: ''
                },
                tooltip: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["7/14","7/15","7/16","7/17","7/15","7/16","7/17"]
                },
                yAxis: {
                    type: 'value',
                    // name: '水量',
                    min: 0,
                    max: 5000,
                    interval: 500,
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                },
                series: [
                    {
                        type: 'line',
                        // data: [ 700, 400, 1200, 4000, 5000, 4000, 4340],
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                    },
                    {
                        type: 'line',
                        // data: [ 500, 700, 1300, 400, 5000, 3000, 500],
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                    }
                ]
            };
            //单个图表渲染
            if(!this.propValueType) {
                let echartsId = echarts.init(document.getElementById("echartsId"));
                echartsId.setOption(option);
                echartsId.setOption(this.propValue);
                return;
            }
            //多个图表渲染
            for(let i = 0; i < this.propValue.length; i++) {
                let echartsId = echarts.init(document.getElementById(""+this.propValue[i].id+""));
                echartsId.setOption(option);
                echartsId.setOption(this.propValue[i]);
            }
        }
    }
</script>

3、父组件使用

<template>
    <div>
        <Echarts :propValue="propValue" style="height: 500px; width: 800px;"></Echarts>
    </div>
</template>

<script>
import Echarts from "../../common/Charts/Echarts"
export default {
    name: "checkEvent",
    data() {
        return {
            // propValue: [
            //     {
            //         id: "echart01",
            //         xAxis: {
            //             type: 'category',
            //             data: ["7/14","7/15周二","7/16周三","7/17周四","7/15周五","7/16周六","7/17周日"]
            //         },
            //         series: [
            //             {
            //                 type: 'line',
            //                 data: [ 700, 400, 1200, 4000, 5000, 4000, 4340],
            //                 smooth: true,
            //                 lineStyle: {
            //                     normal: {
            //                         width: 3,
            //                         shadowColor: 'rgba(0,0,0,0.4)',
            //                         shadowBlur: 10,
            //                         shadowOffsetY: 10
            //                     }
            //                 },
            //             },
            //             {
            //                 type: 'line',
            //                 data: [ 500, 700, 1300, 400, 5000, 3000, 500],
            //                 smooth: true,
            //                 lineStyle: {
            //                     normal: {
            //                         width: 3,
            //                         shadowColor: 'rgba(0,0,0,0.4)',
            //                         shadowBlur: 10,
            //                         shadowOffsetY: 10
            //                     }
            //                 },
            //             }
            //         ]
            //     },
            //     {
            //         id: "echart02",
            //         xAxis: {
            //             type: 'category',
            //             data: ["7/14","7/15周二","7/16周三","7/17周四","7/15周五","7/16周六","7/17周日"]
            //         },
            //         series: [
            //             {
            //                 type: 'line',
            //                 data: [ 700, 400, 1200, 4000, 5000, 4000, 4340],
            //                 smooth: true,
            //                 lineStyle: {
            //                     normal: {
            //                         width: 3,
            //                         shadowColor: 'rgba(0,0,0,0.4)',
            //                         shadowBlur: 10,
            //                         shadowOffsetY: 10
            //                     }
            //                 },
            //             },
            //             {
            //                 type: 'line',
            //                 data: [ 500, 700, 1300, 400, 5000, 3000, 500],
            //                 smooth: true,
            //                 lineStyle: {
            //                     normal: {
            //                         width: 3,
            //                         shadowColor: 'rgba(0,0,0,0.4)',
            //                         shadowBlur: 10,
            //                         shadowOffsetY: 10
            //                     }
            //                 },
            //             }
            //         ]
            //     },
            // ],
            //传递数据给子组件
            propValue: {
                    id: "aaa",
                    xAxis: {
                        type: 'category',
                        data: ["7/14","7/15周二","7/16周三","7/17周四","7/15周五","7/16周六","7/17周日"]
                    },
                    series: [
                        {
                            type: 'line',
                            data: [ 700, 400, 1200, 4000, 5000, 4000, 4340],
                            smooth: true,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    shadowColor: 'rgba(0,0,0,0.4)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 10
                                }
                            },
                        },
                        {
                            type: 'line',
                            data: [ 500, 700, 1300, 400, 5000, 3000, 500],
                            smooth: true,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    shadowColor: 'rgba(0,0,0,0.4)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 10
                                }
                            },
                        }
                    ]
                },
        }
    },
    components: {
        Echarts
    }
}
</script>