vue3使用Echarts+全局注册+封装组件

下载echarts

cnpm i echarts --save

在mani.ts全局注册echarts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入 echarts
import * as echarts from 'echarts'
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
app.use(store).use(router).mount('#app')

在components文件夹创建EchartsAssembly.vue组件复制以下代码

<template>
  <div id="home">
    <div
      :ref="post.name"
      :id="post.name"
      :style="{ width: '100%', height: '100%' }"
    ></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, getCurrentInstance } from "vue";
import { defineProps } from "vue";
// 引入echarts
let echarts = getCurrentInstance()!.appContext.config.globalProperties.$echarts;
// 接收父组件传过来的数据
let post = defineProps({
  data: {
    type: Object,
  },
  name: {
    type: String,
  },
});
// 初始化echarts实例
const myChart = (name: any, data: any) => {
  let dom = document.getElementById(name);
  let myChart = echarts.init(dom); // 初始化echarts实例
  let option = data;
  // 设置实例参数
  myChart.setOption(option);
};

onMounted(() => {
  // 调用初始化echarts实例的时候传入我们父组件传递过来的name和data
  myChart(post.name, post.data);
});
</script>
<style scoped>
#home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

在mani.ts全局注册组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入 echarts
import * as echarts from 'echarts'
//引入ant-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';


const app = createApp(App)
//全局挂载
app.use(Antd)
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
//全局引入组件
import EchartsAssembly from './components/EchartsAssembly.vue'
app.component('EchartsAssembly', EchartsAssembly)

app.use(store).use(router).mount('#app')

最后在页面使用

<template>
  <div id="home">
      <!-- 桑甚图 -->
    <div class="echarts">
      <EchartsAssembly :data="mulberry" name="mulberry"></EchartsAssembly>
    </div>
      <!-- 柱状图 -->
     <div class="echarts">
      <EchartsAssembly  :data="Columnarshape" name="Columnarshape"></EchartsAssembly>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref} from "vue";
//桑甚图数据
let mulberry = ref<any>({
  series: {
    type: "sankey",
    layout: "none",
    emphasis: {
      focus: "adjacency",
    },
    data: [
      {
        name: "a1",
      },
      {
        name: "a2",
      },
      {
        name: "c",
      },
      {
        name: "b1",
      },
      {
        name: "b2",
      },
      {
        name: "b3",
      },
    ],
    links: [
      {
        source: "a1",
        target: "c",
        value: 8,
      },
    
        source: "a2",
        target: "c",
        value: 1,
      },
      {
        source: "c",
        target: "b1",
        value: 3,
      },
      {
        source: "c",
        target: "b2",
        value: 1,
      },
      {
        source: "c",
        target: "b3",
        value: 5,
      },
    ],
  },
});
//柱形图数据
let Columnarshape = ref<any>({
  title: {
    text: "Waterfall Chart",
    subtext: "Living Expenses in Shenzhen",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: function (params: any) {
      var tar = params[1];
      return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    splitLine: { show: false },
    data: ["Total", "Rent", "Utilities", "Transportation", "Meals", "Other"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "Placeholder",
      type: "bar",
      stack: "Total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent",
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
      },
      data: [0, 1700, 1400, 1200, 300, 0],
    },
    {
      name: "Life Cost",
      type: "bar",
      stack: "Total",
      label: {
        show: true,
        position: "inside",
      },
      data: [2900, 1200, 300, 200, 900, 300],
    },
  ],
});
</script>
<style lang="scss" scoped>
.echarts{
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}
#home {
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>