第一步:先安装:
npm install echarts
第二步:在组件中引入:
import * as echarts from 'echarts';
第三步:在自己的组见之中可以写以下代码:注:以下代码是 ECharts中的桑吉图
<template>
<div id="echarts1" ref="container"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from 'echarts';
// 获取echart挂载的DOM节点
const container = ref();
onMounted(() => {
const chart = echarts.init(container.value);
let option = null
var data = {
"nodes": [
{ "name": "奥特园区" },
{ "name": "我" },
{ "name": "碧桂园" },
{ "name": "郑州西站" },
{ "name": "中原西路站" },
{ "name": "吾悦广场" }
],
"links": [
{ "source": "奥特园区", "target": "我", "value": 1.1 },
{ "source": "我", "target": "郑州西站", "value": 0.8 },
{ "source": "我", "target": "碧桂园", "value": 2 },
{ "source": "我", "target": "中原西路站", "value": 1.2 },
{ "source": "吾悦广场", "target": "我", "value": 2.9 },
]
}
chart.setOption(option = {
title: {
text: '以我为中心点'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
nodeGap: 100,
nodeWidth: 50,
type: 'sankey',
data: data.nodes,
links: data.links,
focusNodeAdjacency: 'allEdges',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#aaa'
}
},
lineStyle: {
normal: {
color: 'source',
curveness: 0.5
}
}
}
]
});
});
</script>
<style lang="scss" scoped>
#echarts1 {
width: 800px;
height: 500px;
background: aqua;
margin: auto;
}
</style>