显示grid边框

grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },

图例组件

文字颜色、颜色

 legend: {
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: "12"
            }
        },

位置

legend: 
              right: '10%' // 距离右边10%
        },

折线

颜色

color: ['#00f2f1', '#ed3f35']

单独修改折线样式

series: [{
                lineStyle: {
                    // type: 'dashed',
                    color: "#0184d5",
                    width: 2 
                }
            },

直线或曲线

series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [220, 182, 191, 234, 290, 330, 310]
            }
        ]

线条下的区域填充颜色

series: [{
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)" 
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)" 
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                }
            }
        ]

折线上拐点

symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
       itemStyle: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

点击切换不同的折线图

得到数据

var yearData = [
        {
          year: '2020',  // 年份
          data: [  // 两个数组是因为有两条线
               [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
               [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
        },
        {
          year: '2021',  // 年份
          data: [  // 两个数组是因为有两条线
               [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
               [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
            ]
        }
    ];

写点击事件

$('.line h2').on('click',"a",function(){
        var obj = yearData[$(this).index()]
        option.series[0].data = obj.data[0]
        option.series[1].data = obj.data[1]
    })

再次实例化

$('.line h2').on('click',"a",function(){
        var obj = yearData[$(this).index()]
        option.series[0].data = obj.data[0]
        option.series[1].data = obj.data[1]
        myChart.setOption(option)
    })