vue3 ECharts中引入

第一步：先安装：

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>