vue自定义指令使用ecahrts

一、话不多说上代码：

var echarts = require('echarts');

var options = {

    deep: true,

    // 插入父节点时调用

    inserted: function (el, binding) {

        let myChart = echarts.init(el)

        let option = binding.value

        myChart.showLoading()

        myChart.setOption(option, true)

        myChart.hideLoading()

        let oldResize = window.onresize

        window.onresize = () => {

            oldResize()

        }

        setTimeout(function() {

            myChart.resize();

        }, 0)

    },

    update: function (el, binding) {

        let myChart = echarts.getInstanceByDom(el)

        let option = binding.value

        myChart.showLoading()

        myChart.setOption(option, true)

        myChart.hideLoading()

        let oldResize = window.onresize

        window.onresize = () => {

            oldResize()

        }

        setTimeout(function() {

            myChart.resize();

        }, 0)

    }

};

export {

    options

}

用法：

main.js里引入生成指令

import {

    options

} from './libs/directives/echarts'

// echarts

Vue.directive('echarts', options)

组件里