Echarts的x,y网格线样式
直接上代码:
var myChart = echarts.init(document.getElementById("lineCtx"));var option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],splitLine: {//x网格样式show: true,lineStyle: {color: "rgba(255, 255, 255, 0.1)",type: "solid",width: "3",},},axisLine: {//x坐标轴样式lineStyle: {type: "solid",color: "#657CA8", //左边线的颜色width: "2", //坐标线的宽度},},axisLabel:{textStyle:{color:'white'}},},yAxis: {type: "value",axisLine: {show: true},splitArea: {//背景是否显示show: false,},splitLine: {//网格线lineStyle: {type: "solid", //设置网格线类型 dotted:虚线 solid:实线color: "rgba(255, 255, 255, 0.1)"},show: true, //隐藏或显示},axisLabel:{textStyle:{color:'white'}},},tooltip: {//鼠标响应trigger: "axis",axisPointer: {type: "cross",label: {backgroundColor: "#6a7985",},},},series: [{data: [50, 230, 224, 28, 135, 147, 260, 230, 224, 28, 135, 147, 260],type: "line",smooth: true,symbolSize: 12, //拐点圆的大小color: ["#228FFE"], //折线条的颜色lineStyle: {normal: {width: 5, //折线宽度},},},],grid: {top: "10%",left: "0%",right: "0%",bottom: "8%",containLabel: true,},dataZoom: [//数据区缩放组件{type: "inside",start: 0,end: 100,},{start: 0,end: 10,},],};option && myChart.setOption(option);window.addEventListener("resize", () => {myChart.resize();});},
效果图:
(忽略我的蓝底色)