产品需要我们实现一个这样的效果
一、在vue页面中引入echarts
import echarts from 'echarts'
二、定义echarts容器
<div ref="box1" style="width:100%;height: 350px" class="main-content-lt01"></div>
三、自定义容器样式 (具体自定义的样式看注释)
mounted(){
this.init1()
},
methods:{
init1() {
var myChart = echarts.init(this.$refs.box1)
myChart.setOption({
title: {
text: '产品生命周期',
},
// tooltip: {}, // 鼠标悬浮显示对应的内容
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
// legend: [
// {
// x: "left", //图例位置
// data: ["已报备 1", "接待公司"], //关系图中需要与series中的categories的name保持一致
// },
// ],
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: "对应的文本内容"
// }
// ],
// },
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: false, // false禁止放大缩小拖拽
label: {
show: true,
// normal:{
// position:'left',
// // distance:10,
// // show: true,
// formatter:['内容'].join('\n'),
// color:'#fff'
// }
},
edgeSymbolSize: [0, 10],
edgeLabel: {
fontSize: 20,
},
data: [
{
// name: '1 \n 已报备',
name: '1', // 球内的文字
x: 275, // 球X轴的位置
y: 0, // // 球Y轴的位置
itemStyle: {
normal: {
borderColor: '#3E8EF7', // 球内的边框颜色
borderWidth: 15, // 球的大小
color: '#3E8EF7', // 球的颜色
},
},
label: {
fontSize: 12, // 球内文字大小
color: '#fff', // 球内文字颜色
},
},
{
// name: '2',
name: '2',
x: 288,
y: 7,
// legend: {},
itemStyle: {
// 各圆圈自定义样式
normal: {
borderColor: this.active >= 2 ? '#3E8EF7' : '#ccc', // 判断,当active大于或者等于2时,球内的边框颜色为#3E8EF7,否则颜色为#ccc
borderWidth: 15,
// shadowBlur: 20,
shadowColor: '#ccc',
color: this.active >= 2 ? '#3E8EF7' : '#ccc', // 判断,当active大于或者等于2时,球的颜色为#3E8EF7,否则颜色为#ccc
// color: this.active == '验证中' ? '#3E8EF7':'#ccc',
// color: this.active == '验证失败' ? '#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: {
// 各圆圈自定义样式
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: {
// 各圆圈自定义样式
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: {
// 各圆圈自定义样式
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: {
// 各圆圈自定义样式
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自定义线
// 1-2 1到2的位置的线
{
source: 0,
target: 1,
symbolSize: [20, 20], // 线的大小
symbol: ['', 'arrow'], // 线加箭头,两个为arrow,则是双箭头
label: {
// show: true
},
lineStyle: {
// 线的颜色,判断active为2时,线的颜色为#3E8EF7,否则为#ccc
color: this.active >= 2 ? '#3E8EF7' : '#ccc',
},
},
{
// 2-3 ,2到3的位置的线
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的线
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',
},
},
],
})
// 让echarts自适应
window.addEventListener("resize", function () {
myChart.resize();
});
},
}