成果
<template> <div id="login-box"></div></template><script>import { chartData } from './data'export default { data() { return { option: {} } }, mounted() { this.$nextTick(() => { this.initCharts() }) }, methods: { initCharts() { this.option = { backgroundColor: 'transparent', xAxis: { show: false, type: 'value' }, yAxis: { show: false, type: 'value' }, tooltip: { show: false }, series: [ { type: 'graph', zlevel: 5, draggable: false, coordinateSystem: 'cartesian2d', //应用二维的直角坐标系（也称笛卡尔坐标系） label: { normal: { show: false } }, data: chartData, links: [ { source: '数据中心', target: '分数据中心一' }, { source: '数据中心', target: '分数据中心二' }, { source: '数据中心', target: '分数据中心三' } ], lineStyle: { normal: { opacity: 1, color: '#53B5EA', curveness: 0.5, width: 2 } } }, { type: 'lines', coordinateSystem: 'cartesian2d', z: 1, zlevel: 2, animation: false, effect: { show: true, period: 8, trailLength: 0.01, symbolSize: 24, symbol: 'pin', loop: true, color: 'pink' }, lineStyle: { normal: { color: '#22AC38', width: 0, curveness: 0.5 //值越大，曲度越大 } }, data: [ { coords: [ [170, 200], [400, 200] ] }, { coords: [ [170, 200], [10, 380] ] }, { coords: [ [170, 200], [10, 10] ] } ] } ] } const myChart = this.$echarts.init(document.getElementById('login-box')) myChart.setOption(this.option) } }}</script>