vue中使用echarts画一个生命周期图

产品需要我们实现一个这样的效果

一、在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();
            });
        },
     }

四、效果