vue中引入echarts关系图

完成图

微信截图_20220419174946.png

• 安装echarts

npm install echarts --save
cnpm install echarts --save

• 页面局部引入

import * as  echarts from "echarts";

<template>
 <div>
   <div id="chart"></div>
 </div>
</template>

mounted() {
   this.initChart()
 },
 methods:{
     initChart() {
     //初始化echarts
     let myChart = echarts.init(document.getElementById('chart'))
     myChart.resize();  //自适应大小
     myChart.setOption(this.setOption());
   },
 }

注意这里如果import echarts from "echarts"引入;这时候会报一个错误，Cannot read properties of undefined (reading 'init')，找不到init,因为eachrt 5版本以上 找不到init的函数，需要 * as 或者require 一下

微信截图_20220419175019.png

完整的页面代码

<template>
 <div>
   <div id="chart"></div>
 </div>
</template>
<script>
import * as  echarts from "echarts";
export default {
 data() {
   return {
   };
 },
 mounted() {
   this.initChart()
 },

 methods: {
   initChart() {
     //初始化echarts
     let myChart = echarts.init(document.getElementById('chart'))
     myChart.resize();  //自适应大小
     myChart.setOption(this.setOption());
   },
   //初始化echarts
   setOption() {
     let option = {
       tooltip: {}, //提示框
       animationDurationUpdate: 1500,
       animationEasingUpdate: "quinticInOut",
       series: [
         {
           type: "graph",
           layout: "force",
           symbolSize: 100, //倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小
           symbolSize: (value, params) => {
             console.log(params)
             switch (params.data.category) {
               case 0:
                 return 100;
                 break;
               case 1:
                 return 50;
                 break;
             }
           },
           roam: true, //鼠标缩放功能
           label: {
             show: true, //是否显示标签
           },
           focusNodeAdjacency: true, //鼠标移到节点上时突出显示结点以及邻节点和边
           edgeSymbol: ["circle","arrow"], //关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头
           edgeSymbolSize: [4, 10],
           draggable: true,
           edgeLabel: {
             fontSize: 14, //关系（也即线）上的标签字体大小
           },
           force: {
             repulsion: 200,
             edgeLength: 120,
           },
           data: [
             {
               name: "工作重点",
               category: 0,
             },
             {
               name: "1",
               category: 1,
             },
             {
               name: "2",
               category: 1,
             },
             {
               name: "3",
               category: 1,
             }
           ],
           links: [
             {
               source: "工作重点",
               target: "1",
             },
             {
               source: "工作重点",
               target: "2",
             },
             {
               source: "工作重点",
               target: "3",
             }
           ],
           lineStyle: {
             opacity: 0.9,
             width: 2,
             curveness: 0,
           },
         },
       ],
     };
     return option;
   },
 },
};
</script>

<style lang="scss" scoped>
</style>