echarts基础小组件

<template>
    <div ref="echart"></div>
</template>
<script>
    import * as echarts from 'echarts'
    export default {
        props: {    
            options: {
                type: Object,
                default: {}
            },
           
        },
        watch: {
            options: {
                handler(newVal, oldVal) {
                    console.log(newVal, 'newVal')
                    if (this.echart) {
                        this.echart.setOption(newVal)
                    } else {
                        this.initChart()
                    }
                },
                deep: true,
            },
        },
        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图表
            }
        },
        methods: {
            initChart() {          //生成图表
                if (this.echart) {       //如果图表已经存在，只需要更新配置信息
                    this.echart.setOption(this.options)
                } else {             //如果不存在，则生成图表并配置信息
                    this.echart = echarts.init(this.$refs.echart)
                    this.echart.setOption(this.options)
                }
                let that = this;
                this.echart.on('click', function(params) {  
                    that.$emit('echartClick',params)
                });

            },
        },
        mounted() {
            this.initChart();
        },
        computed: {

        }
    }
</script>