vue自定义指令使用ecahrts

最新推荐文章于 2023-06-10 18:44:21 发布

Lun_dy

最新推荐文章于 2023-06-10 18:44:21 发布

阅读量382

点赞数 1

分类专栏： vue echarts 文章标签： vue echarts 自定义指令

本文链接：https://blog.csdn.net/Lun_dy/article/details/103523566

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

echarts

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中通过自定义指令来使用ECharts，详细讲解了在main.js中引入指令以及在组件中应用的方法，帮助开发者更好地理解和集成ECharts图表。

摘要由CSDN通过智能技术生成

一、话不多说上代码：

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)

组件里

<template>
      <div v-if="ready" v-echarts="option"> </div>
</template>
<script>
export default {
   data(){
   return {
       ready:false,
       option:""
}
   }
   methods:{
      charts(){
        let  option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
this.option = option
this.ready = true
      }
   }
  
}
</script>