Echarts的x，y网格线样式

最新推荐文章于 2024-07-18 10:26:51 发布

黄-小智

最新推荐文章于 2024-07-18 10:26:51 发布

阅读量4.3k

点赞数 3

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/mrhxz/article/details/121331710

版权

本文详细介绍了如何使用Echarts设置x轴和y轴的网格线样式，包括颜色、线型和宽度，以及如何调整数据区域缩放和图表布局。通过实例代码演示了如何创建带有白色文字的网格线和轴线，适合前端开发者学习数据可视化定制。

摘要由CSDN通过智能技术生成

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();
        });
      },