The product requires us to achieve such an effect
1. Introduce echarts into the vue page
import echarts from 'echarts'
Second, define the echarts container
<div ref="box1" style="width:100%;height: 350px" class="main-content-lt01"></div>
Third, custom container style (See comments for specific custom style)
mounted(){<!-- -->
this.init1()
},
methods: {<!-- -->
init1() {<!-- -->
var myChart = echarts.init(this.$refs.box1)
myChart.setOption({<!-- -->
title: {<!-- -->
text: 'Product Life Cycle',
},
// tooltip: {}, // The mouse hovers to display the corresponding content
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
// legend: [
// {<!-- -->
// x: "left", //Legend position
// data: ["Reported 1", "reception company"], //The relationship diagram needs to be consistent with the names of the categories in the series
// },
// ],
legend: [
{<!-- -->
height: 10,
left: 'center',
itemGap: 15,
// padding:'10px',
textStyle: {<!-- -->
// color:'#fff',
color: (params) => params,
fontSize: 13,
},
// data:echartsData.map(function(a){<!-- -->
// return a
// }),
},
],
color: ['#fc853e', '#28cad8', '#9564bf', '#bd407e', '#28cad8', '#e5a214'],
series: [
// {<!-- -->
// name: "Budget vs spending",
// type: "radar",
// data: [
// {<!-- -->
// name: "corresponding text content"
// }
// ],
// },
{<!-- -->
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: false, // false prohibits zooming in and out dragging
label: {<!-- -->
show: true,
// normal:{<!-- -->
// position:'left',
// // distance:10,
// // show: true,
// formatter:['content'].join('\
'),
// color: '#fff'
// }
},
edgeSymbolSize: [0, 10],
edgeLabel: {<!-- -->
fontSize: 20,
},
data: [
{<!-- -->
// name: '1 \
Reported',
name: '1', // text inside the ball
x: 275, // The position of the ball's X axis
y: 0, // // The position of the Y axis of the ball
itemStyle: {<!-- -->
normal: {<!-- -->
borderColor: '#3E8EF7', // border color inside the ball
borderWidth: 15, // the size of the ball
color: '#3E8EF7', // the color of the ball
},
},
label: {<!-- -->
fontSize: 12, // text size inside the ball
color: '#fff', // Text color inside the ball
},
},
{<!-- -->
// name: '2',
name: '2',
x: 288,
y: 7,
// legend: {},
itemStyle: {<!-- -->
// custom style for each circle
normal: {<!-- -->
borderColor: this.active >= 2 ? '#3E8EF7' : '#ccc', // Judgment, when active is greater than or equal to 2, the border color inside the ball is #3E8EF7, otherwise the color is #ccc
borderWidth: 15,
// shadowBlur: 20,
shadowColor: '#ccc',
color: this.active >= 2 ? '#3E8EF7' : '#ccc', // Judgment, when active is greater than or equal to 2, the color of the ball is #3E8EF7, otherwise the color is #ccc
// color: this.active == 'verifying' ? '#3E8EF7':'#ccc',
// color: this.active == 'Authentication failed' ? '#3E8EF7':'#ccc',
},
},
label: {<!-- -->
fontSize: 12,
fontWeight: 600,
color: '#fff',
// formatter:function(params){<!-- -->
// console. log(params,'params')
// return `<div>111</div>` + params;
// }
},
},
{<!-- -->
// name: '3',
name: '3',
// x: 0,
// y: 200,
x:288,
y:20,
itemStyle: {<!-- -->
// custom style for each circle
normal: {<!-- -->
borderColor: this.active >= 3 ? '#3E8EF7' : '#ccc',
borderWidth: 15,
// shadowBlur: 20,
shadowColor: this.active >= 3 ? '#3E8EF7' : '#ccc',
// color: new echarts. graphic. RadialGradient(0.5, 0.5, 1.0),
color: this.active >= 3 ? '#3E8EF7' : '#ccc',
},
},
label: {<!-- -->
fontSize: 12,
fontWeight: 600,
color: '#fff',
},
},
{<!-- -->
// name: '4',
name: '4',
x: 275,
y: 28,
itemStyle: {<!-- -->
// custom style for each circle
normal: {<!-- -->
borderColor: this.active >= 4 ? '#3E8EF7' : '#ccc',
borderWidth: 15,
// shadowBlur: 20,
shadowColor: this.active >= 4 ? '#3E8EF7' : '#ccc',
// color: new echarts. graphic. RadialGradient(0.5, 0.5, 1.0),
color: this.active >= 4 ? '#3E8EF7' : '#ccc',
},
},
label: {<!-- -->
fontSize: 12,
fontWeight: 600,
color: '#fff',
},
},
{<!-- -->
// name: '5',
name:'5',
x: 262,
y: 20,
itemStyle: {<!-- -->
// custom style for each circle
normal: {<!-- -->
borderColor: this.active >= 5 ? '#3E8EF7' : '#ccc',
borderWidth: 15,
// shadowBlur: 20,
shadowColor: this.active >= 5 ? '#3E8EF7' : '#ccc',
color: this.active >= 5 ? '#3E8EF7' : '#ccc',
},
},
label: {<!-- -->
fontSize: 12,
fontWeight: 600,
color: '#fff',
},
},
{<!-- -->
// name: '6',
name: '6',
x: 262,
y: 7,
itemStyle: {<!-- -->
// custom style for each circle
normal: {<!-- -->
borderColor: this.active >= 6 ? '#3E8EF7' : '#ccc',
borderWidth: 15,
// shadowBlur: 20,
shadowColor: this.active >= 6 ? '#3E8EF7' : '#ccc',
color: this.active >= 6 ? '#3E8EF7' : '#ccc',
},
},
label: {<!-- -->
fontSize: 12,
fontWeight: 600,
color: '#fff',
},
},
],
// links: [],
links: [ // links custom line
// 1-2 The line from position 1 to 2
{<!-- -->
source: 0,
target: 1,
symbolSize: [20, 20], // the size of the line
symbol: ['', 'arrow'], // line plus arrow, two arrows, it is double arrow
label: {<!-- -->
// show: true
},
lineStyle: {<!-- -->
// The color of the line, when it is determined that active is 2, the color of the line is #3E8EF7, otherwise it is #ccc
color: this.active >= 2 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
// 2-3, the line from 2 to 3 positions
source: 1,
target: 2,
symbolSize: [10, 20],
symbol: ['', 'arrow'],
lineStyle: {<!-- -->
color: this.active >= 3 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
// source: 2,
// target: 0,
// symbolSize: [0, 10],
// symbol: ['', 'arrow'],
lineStyle: {<!-- -->
color: this.active >= 3 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
source: 2,
target: 3,
symbolSize: [0, 20],
symbol: ['', 'arrow'],
lineStyle: {<!-- -->
color: this.active >= 4 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
// source: 3,
// target: 0,
// symbolSize: [0, 10],
// symbol: ['', 'arrow'],
lineStyle: {<!-- -->
color: this.active >= 4 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
source: 3,
target: 4,
symbolSize: [0, 20],
symbol: ['', 'arrow'],
lineStyle: {<!-- -->
color: this.active >= 5 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
// source: 4,
// target: 0,
// symbolSize: [0, 10],
// symbol: ['', 'arrow'],
lineStyle: {<!-- -->
color: this.active >= 5 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
// 5-6 lines
source: 4,
target: 5,
symbolSize: [0, 20],
symbol: ['', 'arrow'],
lineStyle: {<!-- -->
//width:10,
curveness: 0.2,
color: this.active >= 6 ? '#3E8EF7' : '#ccc',
},
},
{<!-- -->
source: 5,
target: 0,
// symbol: ['', 'arrow'],
// symbolSize: [0, 10],
lineStyle: {<!-- -->
// width: 3,
// curveness: 0
//width:10,
curveness: 0.2,
color: this.active >= 6 ? '#3E8EF7' : '#ccc',
},
},
],
lineStyle: {<!-- -->
opacity: 0.8,
width: 10,
curveness: 0.2,
color: '#3E8EF7',
},
},
],
})
// Make echarts adaptive
window. addEventListener("resize", function () {<!-- -->
myChart. resize();
});
},
}
Four, effect
