Vue3?echarts組件化及使用hook進行resize的方法是什么

本文小編為大家詳細介紹“Vue3 echarts組件化及使用hook進行resize的方法是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue3 echarts組件化及使用hook進行resize的方法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

echarts組件化及使用hook進行resize

hook 本質是一個函數，把setup函數中使用的 Composition API 進行了封裝

組件化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} (aegqsqibtmh%)",
    },
    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 = {
        /*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);
}

讀到這里，這篇“Vue3 echarts組件化及使用hook進行resize的方法是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。