我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue3 echarts组件化及使用hook进行resize的方法是什么

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue3 echarts组件化及使用hook进行resize的方法是什么

    echarts组件化及使用hook进行resize

    hook 本质是一个函数,把setup函数中使用的 Composition API 进行了封装

    Vue3 echarts组件化及使用hook进行resize的方法是什么

    组件化echarts实例

    <template>
      <div ref="echart" :></div>
    </template>
    
    <script setup>
    import * as echarts from "echarts";
    import useResize from "@/hooks/useResize"; // hook 代码见下方
    
    const { proxy } = getCurrentInstance(); // 获取实例中的proxy
    
    let echart;
    let echartInstance;
    
    const props = defineProps({
      // 数据
      data: {
        type: Array,
        default: [
          { value: 40, name: "rose 1" },
          { value: 38, name: "rose 2" },
          { value: 32, name: "rose 3" },
        ],
      },
      // 高度
      height: {
        type: [Number, String],
        default: "300px",
      },
      // 宽度
      width: {
        type: [Number, String],
        default: "100%",
      },
    });
    
    const { data } = toRefs(props);
    
    const data1 = reactive({
      option: {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [10, 120],
            center: ["50%", "45%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: data.value,
          },
        ],
      },
    });
    
    const { option } = toRefs(data1);
    
    // 观察 data ,重新绘制
    watch(
      data,
      (newValue) => {
        option.value.series[0].data = newValue;
      },
      { deep: true }
    );
    watch(
      option,
      (newValue) => {
        echartInstance.setOption(newValue, true);
      },
      { deep: true }
    );
    
    onMounted(() => {
      echart = proxy.$refs.echart; // 获取的DOM根节点
      echartInstance = echarts.init(echart, "macarons"); // 初始化 echart
      echartInstance.setOption(option.value, true); // 绘制
      // notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则,详见 组件合并模式。如果为 true,表示所有组件都会被删除,然后根据新 option 创建所有新组件。
      // setOption 见 https://echarts.apache.org/zh/api.html#echartsInstance.setOption
    });
    
    function resize() {
      echartInstance.resize();
    }
    
    // 暴露函数 (供hook调用)
    defineExpose({
      resize,
    });
    
    useResize();
    </script>

    hook (useResize)

    export default function () {
        let proxy
    
        onMounted(() => {
            proxy = getCurrentInstance(); // 获取实例中的proxy
            window.addEventListener('resize', resize)
        })
    
        onBeforeUnmount(() => {
            window.removeEventListener('resize', resize)
        })
    
        function resize() {
            proxy.exposed.resize()
        }
    }

    使用echarts和echarts自适应

    首先安装echarts,这个就不介绍了,直接说怎么使用.

    <!-- 创建一个div去显示echarts -->
    <div ref="main" ></div>
    import {ref, provide, inject, onMounted, reactive} from "vue";
    import * as echarts from "echarts";
    const main = ref() // 使用ref创建虚拟DOM引用,使用时用main.value
    onMounted(
        () => {
            init()
        }
    )
    function init() {
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(main.value);
        // 指定图表的配置项和数据
        var option = {
            
            tooltip: {},
            // color:['#779ffe','#a07dfe','#fc9b2e','#63f949','#fb6464','#fce481'],
            
            legend: {
                // data: ['国家类型','非国家类型','个人','法人','可公式','非公式']
            },
            xAxis: {
                type: 'category',
                data: ['国家类型','非国家类型','个人','法人','可公式','非公式']
            },
            yAxis: {
                type: 'value',
                scale: true,
                max: 150,
                min: 0,
                splitNumber: 3,
            },
            series: [
                {
                    data: [
                        {
                            value: 120,
                            itemStyle: {
                                color: '#7fa6fe'
                            }
                        },
                        {
                            value: 90,
                            itemStyle: {
                                color: '#a17fff'
                            }
                        },
                        {
                            value: 40,
                            itemStyle: {
                                color: '#fda630'
                            }
                        },
                        {
                            value: 120,
                            itemStyle: {
                                color: '#93fc73'
                            }
                        },
                        {
                            value: 120,
                            itemStyle: {
                                color: '#fb6666'
                            }
                        },
                        {
                            value: 120,
                            itemStyle: {
                                color: '#fbe068'
                            }
                        }
                    ],
                    type: 'bar'
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    以上就是Vue3 echarts组件化及使用hook进行resize的方法是什么的详细内容,更多请关注编程网其它相关文章!

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    Vue3 echarts组件化及使用hook进行resize的方法是什么

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档

    猜你喜欢

    Vue3 echarts组件化及使用hook进行resize的方法是什么

    echarts组件化及使用hook进行resizehook本质是一个函数,把setup函数中使用的CompositionAPI进行了封装组件化echarts实例import*asechartsfrom"echarts";importuseResizefrom"@/hooks/useResize";//hook代码见下方const{proxy}=getCurrentInstance();//获取实例中的proxyletechart;letechartInst
    2023-05-23

    Vue3 echarts组件化及使用hook进行resize方式

    这篇文章主要介绍了Vue3 echarts组件化及使用hook进行resize方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-16

    vue3+ts使用Echarts的方法是什么

    本篇内容主要讲解“vue3+ts使用Echarts的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3+ts使用Echarts的方法是什么”吧!安装npm install echa
    2023-07-05

    Vue3父子通讯方式及Vue3插槽的使用方法是什么

    这篇文章主要介绍了Vue3父子通讯方式及Vue3插槽的使用方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3父子通讯方式及Vue3插槽的使用方法是什么文章都会有所收获,下面我们一起来看看吧。Vue
    2023-07-05

    vue3自定义插件的作用场景及使用方法是什么

    本篇内容主要讲解“vue3自定义插件的作用场景及使用方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3自定义插件的作用场景及使用方法是什么”吧!插件的作用场景在vue2的插件那篇文
    2023-07-05

    vue3和ts封装axios及使用mock.js的方法是什么

    这篇文章主要讲解了“vue3和ts封装axios及使用mock.js的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3和ts封装axios及使用mock.js的方法是什么”吧
    2023-07-05

    Python元组的定义及使用方法是什么

    本篇内容主要讲解“Python元组的定义及使用方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python元组的定义及使用方法是什么”吧!1、前言在Python中元组是一个和列表非常类似
    2023-06-25

    joomla组件开发使用的方法是什么

    Joomla组件开发使用的方法有以下几步骤:创建组件文件夹:首先,在Joomla的组件目录中创建一个文件夹,用于存放组件相关的文件。创建组件配置文件:在组件文件夹中创建一个XML文件,用于定义组件的配置信息,包括组件的名称、版本号、作者等。
    2023-10-22

    uni-app组件的基本使用方法是什么

    本文小编为大家详细介绍“uni-app组件的基本使用方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“uni-app组件的基本使用方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.组件概念首先讲
    2023-07-05

    Vue3通过ref操作Dom元素及hooks的使用方法是什么

    这篇文章主要介绍了Vue3通过ref操作Dom元素及hooks的使用方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3通过ref操作Dom元素及hooks的使用方法是什么文章都会有所收获,下面我们
    2023-07-05

    Java使用Junit4.jar进行单元测试的方法是什么

    今天就跟大家聊聊有关Java使用Junit4.jar进行单元测试的方法是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。一、下载依赖包分别下载 junit.jar 以及 hamcr
    2023-06-25

    WPF中鼠标/键盘/拖拽事件及用行为封装事件的方法是什么

    这篇“WPF中鼠标/键盘/拖拽事件及用行为封装事件的方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“WPF中鼠标/键
    2023-07-05

    如何使用PHP进行文件加密和解密操作?(PHP加密和解密文件的常用方法是什么?)

    PHP文件加密和解密指南本文提供了各种方法来使用PHP进行文件加密和解密,包括对称和非对称加密。对称加密使用相同的密钥进行加解密,而非对称加密使用公钥和私钥对。加密步骤包括选择算法、生成密钥和对文件执行加密操作。解密步骤包括获取密钥并对文件进行解密。文章还提供了安全注意事项和替代方法,例如PHPmcrypt扩展、SodiumPHP库和HashicorpVault。选择最合适的方法取决于安全级别、性能、兼容性、易用性等因素。
    如何使用PHP进行文件加密和解密操作?(PHP加密和解密文件的常用方法是什么?)
    2024-04-02

    编程热搜

    目录