echarts中折線圖常用配置項

  var option = {
        //修改兩條線的顏色
        color:['#fd79a8','#e17055'],
        tooltip: {
            //觸發方式
            trigger: 'axis' //坐標
        },
        //圖例組件
        legend: {
            data: ['郵件營銷', '聯盟廣告'],
            //修改圖例組件中的文字顏色
            textStyle: {
                color:"pink"
            },
            right:"10%"
        },
        //網格配置 控制折線圖，柱狀圖的圖表大小
        grid: {
            top:"20%",
            left: '3%%',
            right: '4%',
            bottom: '3%',
            //是否顯示網格
            show:true,
            //是否顯示刻度標簽
            containLabel: true,
            borderColor: "green",

        },
        //工具箱組件
      /*  toolbox: {
            feature: {
                saveAsImage: {}
            }
        },*/
        xAxis: {
            type: 'category',
            //去除軸內間距
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick:{
                show:false   //去除刻度線
            },
            axisLine:{
                show:false  //去除軸線
            },
            axisLabel:{
                color:"red"  //x軸文本顏色
            },

        },
        yAxis: {
            type: 'value',
            axisTick:{
                show:false   //去除刻度線
            },
            axisLine:{
                show:false  //去除軸線
            },
            axisLabel:{
                color:"red"  //x軸文本顏色
            },
            splitLine: {  //分割線
                lineStyle:{
                    color:"#2d3436"
                }
            }
        },
        //系列圖表設置 絕定顯示哪種類型的圖表
        series: [
            {
                name: '郵件營銷',
                type: 'line',
                stack: '總量',
                data: [120, 132, 101, 134, 90, 230, 210],
                smooth:true    //折線圓滑
            },
            {
                name: '聯盟廣告',
                type: 'line',
                stack: '總量',
                data: [220, 182, 191, 234, 290, 330, 310],
              //  smooth:true    //折線圓滑
            },
        ]
    };
    myChart.setOption(option)
})();

(function () {
    let myChart=echarts.init(document.querySelector('.panel3'))
    var option={
        color: ['#e74c3c'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐標軸指示器，坐標軸觸發有效
                type: 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
            }
        },
        grid: {
            top:"10%",
            left: '0%',
            right: '0%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [
                    "吃",
                    "喝",
                    "玩",
                    "樂",
                    "天",
                    "地",
                    "人"
                ],
                axisTick: {
                    alignWithLabel: true
                },
                //改變刻度值
                axisLabel:{
                    color:"green",
                    fontSize:"16"
                },
                //不顯示x軸的樣式
                axisLine:{
                    show:false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel:{
                    color:"purple",

                },
                axisLine: {
                    lineStyle:{
                        color:"#00cec9",
                        width:3
                    }
                },
                //修改分割線樣式
                splitLine:{
                    lineStyle: {
                        color:"red"
                    }
                }
            }
        ],
        series: [
            {
                name: '直接訪問',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle:{
                    barBorderRadius:[5,5,0,0]
                }
            }
        ]
    }