下载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>