vue结合echarts画出关系图

1.在前端页面的路径中安装echarts

cnpm install echarts

2.在main.js中引入echarts(一般安装好了会自动引入)

import echarts from 'echarts'Vue.prototype.$echarts = echarts

3.直接在页面上应用(注释都写上了,数据是临时的)

<template>    <div class="echartLayout">        <div id="container" style="width:100%; height:100%; overflow:hidden;">div>    div>template><script>    import echarts from 'echarts'    export default {        name: "personRelation",        data() {            return {                myChart: null,                chartData: [],                chartLink: [],                colors: [                    "#00ADD0",                    "#FFA12F",                    "#B62AFF",                    "#604BFF",                    "#6E35FF",                    "#002AFF",                    "#20C0F4",                    "#95F300",                    "#04FDB8",                    "#AF5AFF"                ],                color: null,            }        },        mounted() {            this.initEchart()        },        methods: {            initEchart() {                let dom = document.getElementById("container");                // 图表的init                this.myChart = echarts.init(dom);                // 数据填充                this.chartData = this.dataEChart();                // 选项设置                let option = {                    // 关系图                    type: "tree",                    // 全图默认背景                    // backgroundColor: "#000",                    backgroundColor: "#2F4F4F",                    //工具栏                    toolbox: {                        // 是否显示                        show: true,                        iconStyle: {                            borderColor: "#03ceda"                        },                        feature: {                            restore: {}                        }                    },                    //提示框                    tooltip: {                        // 触发类型，默认数据触发,可选为：'item' ¦ 'axis'                        trigger: "item",                        // 触发时机                        triggerOn: "mousemove",                        // rgba 颜色设置                        backgroundColor: "rgba(1,70,86,1)",                        borderColor: "rgba(0,246,255,1)",                        borderWidth: 0.5,                        textStyle: {                            fontSize: 10                        }                    },                    // 标记线、标记点                    series: [                        {                            type: "tree",                            // 是否开启鼠标 hover 的提示动画效果                            hoverAnimation: false,                            // 数据                            data: this.dataEChart(),                            // 样式                            top: 0,                            bottom: 0,                            left: 0,                            right: 0,                            // 图的布局，类型为力导图，'radial' 采用环形布局，'force' 采用左右布局(左是根数据)                            layout: "radial",                            // 关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'(矩形), 'roundRect'(圆角矩形), 'triangle'(三角形), 'diamond'(菱形), 'pin'(大头针), 'arrow'(箭头)                            // 也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿                            symbol: "circle",                            // 也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array                            symbolSize: 10,                            nodePadding: 20,                            // 数据更新动画的时长，默认300                            animationDurationUpdate: 750,                            // 子树折叠和展开的交互，默认打开                            expandAndCollapse: true,                            // 默认：2，树图初始展开的层级(深度)。根节点是第 0 层，然后是第 1 层、第 2 层，... ，直到叶子节点                            initialTreeDepth: 2,                            // 是否开启鼠标缩放和平移漫游。scale/move/true                            roam: true,                            // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点                            focusNodeAdjacency: true,                            // 图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。                            itemStyle: {                                borderWidth: 1,                            },                            //标签样式                            label: {                                color: "#fff",                                fontSize: 10,                                fontFamily: "SourceHanSansCN",                                position: "inside",                                rotate: 0,                            },                            // 关系边的公用线条样式                            lineStyle: {                                /*width: 1,                                curveness: 0.5,*/                                color : 'rgba(255,0,255,0.4)',                                width : '2',                                // 线的类型 'solid'(实线)'dashed'(虚线)'dotted'(点线)                                type : 'dashed',                                // 线条的曲线程度，从0到1                                curveness : 0.2,                                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5                                opacity : 1                            }                        }                    ]                };                this.myChart.setOption(option);                this.myChart.on('click', function (params) {                    //获取点击的头像的数据信息                    console.log(params.data)                });            },            /**             * 数据集合             */            dataEChart() {                let data = {                    name: "根节点1",                    value: 0,                    children: []                };                for (let i = 1; i <= 10; i++) {                    let obj = {                        name: "节点" + i,                        value: i,                        children: [],                    };                    for (let j = 1; j <= 5; j++) {                        let obj2 = {                            name: `节点1-${i}-${j}`,                            value: 1 + "-" + i + "-" + j,                        };                        if (j % 2 == 1) {                            obj2.children = []                            for (let k = 1; k <= 3; k++) {                                let obj3 = {                                    name: `节点1-${i}-${j}-${k}`,                                    value: 1 + "-" + i + "-" + j + '-' + k,                                };                                obj2.children.push(obj3);                            }                        }                        obj.children.push(obj2);                    }                    data.children.push(obj);                }                let arr = []                arr.push(data)                //                arr = this.handleData(arr, 0)                console.log(arr);                return arr;            },            // 事件处理            handleData(data, index, color = '#00f6ff') {                //index标识第几层                return data.map((item, index2) => {                    //计算出颜色                    if (index == 1) {                        color = this.colors.find((item, eq) => eq == index2 % 10);                    }                    // 设置节点大小                    if (index === 0 || index === 1) {                        item.label = {                            position: "inside",                            //   rotate: 0,                            //   borderRadius: "50%",                        }                    }                    // 设置label大小                    switch (index) {                        case 0:                            item.symbolSize = 70                            break;                        case 1:                            item.symbolSize = 50                            break;                        default:                            item.symbolSize = 10                            break;                    }                    // 设置线条颜色                    item.lineStyle = {color: color}                    if (item.children) {//存在子节点                        item.itemStyle = {                            borderColor: color,                            color: color                        };                        item.children = this.handleData(item.children, index + 1, color)                    } else {// 不存在                        item.itemStyle = {                            color: 'transparent',                            borderColor: color                        };                    }                    return item                })            },        }    }script><style scoped>    .echartLayout {        margin: auto;        position: absolute;        top: 0;        left: 0;        bottom: 0;        right: 0;    }style>