【vue3】vue3使用Echarts（组合式 | setup | provide | inject)

vue3使用echarts（组合式 | setup)

下载echarts

cnpm i echarts --save

引入并使用echarts（provide&&inject）

1. 在App.vue引入echarts，并用provide提供echarts值。
2. 在子组件通过inject来使用echarts。

App.vue

<script setup>
import { provide } from "vue";

//引入echarts
import * as echarts from "echarts";

//通过provide提供echarts
provide("echarts", echarts);
</script>

使用

1. 推荐在 onMounted 渲染/使用echarts.

view/HomeView.vue

<template>
   <!--  通过ref获取html元素 宽高必须设置 -->
     <div ref="info" style="width: 100%; height: 90%"></div>
</template>
<script setup>
import {  onMounted, ref, inject } from "vue";

//通过inject使用echarts
const echarts = inject("echarts");

//通过ref获取html元素
const info = ref();

onMounted(() => {
    // 渲染echarts的父元素
  var infoEl = info.value;

  //  light dark
  var userEc = echarts.init(infoEl, "light");

  // 指定图表的配置项和数据
  var option = {
    legend: {
      orient: "vertical",
      x: "left",
      data: ["a", "b", "c"],
      icon: "react",
    },
    series: [
      {
        type: "pie",
        radius: "30%",
        data: [
          {
            value: 335,
            name: "a",
          },
          {
            value: 234,
            name: "b",
          },
          {
            value: 1548,
            name: "c",
          },
        ],
        //阴影
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },

        // 颜色
        color: [
          "#516b91",
          "#59c4e6",
          "#edafda",
          "#93b7e3",
          "#a5e7f0",
          "#cbb0e3",
          "#c12e34",
          "#e6b600",
          "#0098d9",
          "#2b821d",
          "#005eaa",
          "#339ca8",
          "#cda819",
          "#32a487",
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  userEc.setOption(option);
});
</script>

效果图

总结

vue3组合式(setup)用provide(key,value)提供数据。，例：

// 引入provide 
import { provide } from "vue";

const data = [
	{
		img:'/public/pic_title.jpg',
		user:'视觉CG',
		token:'qwdjduended23jedn34rr4dcjdndvv'
	}
];

// 通过provide提供一个数据
// 该data数据可在任何App.vue 子组件访问
// 无需通过props逐层传递数据，大大提高开发效率
provide("data", data);

在任何子组件里可通过inject(key)访问提供的数据。

// 引入inject 
import {  inject } from "vue";

//使用提供的data数据
const data= inject("data");

益处：无需通过props逐层传递数据，提高开发效率