echarts 封装

echarts 封装

<template>
    <div :id='idName' :style="{width:'100%',height:'100%'}"></div>
</template>

<script>
// 引入echarts
import "echarts/lib/chart/line"
import "echarts/lib/chart/bar"
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import "echarts/lib/component/tooltip"
import macarons from "echarts/theme/macarons"
export default {
    props: ['idName', 'valObj'],
    data () {
        return {
            pie: this.idName,
            charts: ''
        }
    },
    mounted() {
        this.initChart()
    },
    watch: {
        valObj: {
            handler (newVal, oldVal) {
                if(newVal){
                    this.initChart();
                }else{
                    this.initChart();
                }
            },
            deep: true
        }
    },
    methods: {
        initChart() {
            this.$nextTick(() => {
                this.charts = this.$echarts.init(document.getElementById(this.pie),'macarons')
                this.charts.setOption({
                    title: this.valObj.title,
                    tooltip: this.valObj.tooltip,
                    legend:  this.valObj.legendData,
                    grid: this.valObj.grid,
                    xAxis: this.valObj.xAxis,
                    yAxis: this.valObj.yAxis,
                    series: this.valObj.seriesData
                }) 
            })
        }
    }
}
</script>