ホームページ > ウェブフロントエンド > Vue.js > Vue3 echartをコンポーネント化し、サイズ変更にフックを使用する方法は何ですか?

Vue3 echartをコンポーネント化し、サイズ変更にフックを使用する方法は何ですか?

王林
リリース: 2023-05-23 13:34:42
転載
1716 人が閲覧しました
    #フックを使用した echarts のコンポーネント化とサイズ変更

    フックは本質的に、セットアップ関数で使用される複合 API をカプセル化する関数です

    Vue3 echartをコンポーネント化し、サイズ変更にフックを使用する方法は何ですか?

    コンポーネント化された 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(&#39;resize&#39;, resize)
        })
    
        onBeforeUnmount(() => {
            window.removeEventListener(&#39;resize&#39;, resize)
        })
    
        function resize() {
            proxy.exposed.resize()
        }
    }
    ログイン後にコピー

    echarts と echartsadaptive を使用する

    最初に echarts をインストールします。これについては紹介しません、使い方を教えてください。

    <!-- 创建一个div去显示echarts -->
    <div ref="main" ></div>
    ログイン後にコピー
    rree

    以上がVue3 echartをコンポーネント化し、サイズ変更にフックを使用する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:yisu.com
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート