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

echarts组件化及使用hook进行resize

hook 本质是一个函数，把setup函数中使用的 composition api 进行了封装

组件化echarts实例

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,这个就不介绍了,直接说怎么使用.

Vinteo AI

利用人工智能在逼真的室内环境中创建产品可视化。无需设计师和产品照片拍摄

下载

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 = {
        /*title: {
            text: 'ECharts 入门示例'
        },*/
        tooltip: {},
        // color:['#779ffe','#a07dfe','#fc9b2e','#63f949','#fb6464','#fce481'],
        /*grid: {
            left: '30%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },*/
        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);
}