echarts基础小组件

<template>
    <div ref="echart" :style="{
      width:width,
      height:height
    }" class="echartsbox"></div>
</template>
<script>

    import * as echarts from 'echarts'
    export default {
        props: {
            options: {
                type: Object,
                default: {}
            },
            width:{
               type: String || Number,
              default:'100%'
            },
            height:{
               type: String || Number,
               default:'250px'
            },
        },
        watch: {
            options: {
                handler(newVal, oldVal) {
                    console.log(newVal, 'newVal')
                    if (this.echart) {
                        this.echart.setOption(newVal)
                    } else {
                        this.initChart()
                    }
                },
                deep: true,
            },
        },
        beforeDestroy () {
          this.echart.dispose()
          this.echart = null
        },
        data() {
            return {
                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;
                window.addEventListener('resize', () => {
                    that.echart.resize();
                }, false);

                this.echart.on('click', function(params) {
                    that.$emit('echartClick',params)
                });


            },

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

        }
    }
</script>

<style lang="scss" scoped>
.echartsbox{
  width: 100%;
  height: 100%;
}
</style>

　

 

<EchartsBox :options="oneopt" height="250px"> </EchartsBox>