2021-07-14 echarts记录

Echarts 折线图给xy最大值的线设置实线，网格线设置虚线（ps:我的竖线也是有虚线的，可能颜色太浅看不清楚）

想要让最外面的边线为实线，网格线为虚线，我找了很久没有找到具体方法，于是我发现，可以给两个边框线多加一个x轴和一个Y轴
html:

js配置： var myChart = echarts.init(document.getElementById('你的id'));

// 指定图表的配置项和数据
var option = {
color:[’#FD825E’],//图例的颜色
title: {
text: ‘人数’,//主标题
subtext: ‘副标题’,//副标题
textStyle: { //主title颜色
color: “#63BDC5”,
},
},
tooltip: {//鼠标放置后显示的提示框
trigger: ‘axis’,
},
grid: {//图表在给定位置的定位
left: ‘4%’,
right: ‘4%’,
bottom: ‘10%’,
containLabel: true,//防止标签溢出
},

legend: {//图例设置
    data:['人数'],
    x: 'center',
    y: 'bottom',
    textStyle: {
        //文字样式
        color: "#3FB7BF",
         fontSize: "12",
         fontWeight: 'bold'
     }

},
lineStyle:{//折线的颜色
    color:'#FD825E'
},
xAxis: [{
    type: 'category',
    // boundaryGap: false,//设置x轴刻度不居中
    data:['9:00','10:00','11:00','10:00','11:00','10:00','11:00']
    ,axisLine: {
        lineStyle: {
            type: 'solid',//实线     虚线 dashed  波点dotted
            color: '#2D8CC0',//坐标线的颜色46938F
            width:'2'//坐标线的宽度
        }
    },
    axisLabel: {//坐标标签
        textStyle: {
            color: '#49B1B9',//坐标值的具体的颜色

        }
    },
    splitLine: {//背景网格
        show: true,//显示背景网格
        lineStyle:{
           color: ['#F1F1F1'],//网格线的颜色
           width: 1,
           type: 'dashed',
      }
　　}
},
    {//此处就是我写的边框实线的设置  给x轴多设置了一个轴线，样式颜色设置为想要的
        type: 'category',
      //  axisTick: { //
      //      alignWithLabel: true//显示刻度线
    //    },
        axisLine: {//轴线设置
            onZero: false,
            lineStyle: {//轴线颜色设置
                color: '#CECECE'
            }
        },
    }
],
yAxis: [{
    type: 'value',
    boundaryGap: false,//设置刻度轴居中
    axisLabel: {
        formatter: '{value} 人',
        textStyle: {
            color: '#49B1B9',//坐标值的具体的颜色 //橙色FD825E

        }
    },
    axisTick:{       //y轴刻度线不显示
        "show":false
    },
    axisLine: {
        lineStyle: {
            type: 'solid',
            color: '#2D8CC0',//坐标线的颜色46938F
            width:'2'//坐标线的宽度
        }
    },
    splitLine: {//网格虚线颜色
        show: true,
        lineStyle:{
           color: ['#D3D3D3'],
           width: 1,
           type: 'dashed'
      }
　　}
},
    {
        type: 'category',
        axisLine: {
            onZero: false,
            lineStyle: {
                color: '#CECECE'
            }
        },
    }],
series: [
    {
        name: '人数',
        type: 'line',
        data: [10,30,50,30,0,20,0],
        markPoint: {
            data: [
                {type: 'max', name: '进入车辆数量'}
            ],
            itemStyle:{//修改气泡的颜色
                color: '#FD825E',
                // normal:{
                //     label:{ 
                //         show: true,  
                //         color: '#FD825E',//气泡中字体颜色
                //     }
                // }
               },
        },
        markLine: {//平均线
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }
    
]

};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

我想出来的方法就是这样，能够实现我要的效果，若有不对的烦请指出，或者有更好的方法可以分享一下。