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]
                }
            }
        ]
    }