echarts设置阴影、折线条样式、圆点大小

最新推荐文章于 2024-07-03 16:24:53 发布

____独饮༄敌敌畏

最新推荐文章于 2024-07-03 16:24:53 发布

阅读量4.4k

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_44089126/article/details/130827197

版权

该文章展示了一段Echarts的配置代码，用于创建一条具有实心圆点、特定颜色、阴影效果和线条宽度的折线图。图表的x轴和y轴都进行了定制，包括刻度、线条颜色和背景线条类型。此外，还设置了提示框和标题的样式。

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

关键代码

 series: [
      {
        data: [10, 30, 20, 57, 40, 50],
        type: "line",
        smooth: true,
        symbol: "circle", //将小圆点改成实心 不写symbol默认空心
        symbolSize: 6, //小圆点的大小
        lineStyle: {
          width: 2,
          color: "#6AF0FF", //线条颜色
          // type: "dotted", //'dotted'虚线 'solid'实线
          shadowColor: "#6AF0FF", //阴影颜色
          shadowBlur: 5, //阴影的模糊大小。
          shadowOffsetX: 5, // 阴影水平方向上的偏移距离
          shadowOffsetY: 5 // 阴影垂直方向上的偏移距离
        },
        itemStyle: {
          color: "#6AF0FF" // 圆点背景色
        }
      }
    ]

所有options 设置代码

 let option = {
    xAxis: {
      type: "category",
      data: ["2023.01", "2023.02", "2023.03", "2023.04", "2023.05", "2023.06"],
      axisTick: {
        show: false //隐藏x轴刻度,
      },
      axisLine: {
        lineStyle: {
          color: "#999999"
        }
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false //隐藏x轴刻度
      },
      axisLine: {
        show: true, //显示y轴,
        lineStyle: {
          color: "#999999"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed" //将背景线条设置成虚线
        }
      }
    },
    grid: {
      //设置图表大小
      left: "7%",
      top: "15%",
      right: "5%",
      bottom: "15%"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    title: {
      text: "mg/L",
      textStyle: {
        fontSize: "normal",
        fontStyle: "normal",
        fontWeight: "normal",
        color: "#999999"
      },
      // left: "7%",
      top: "0%"
    },
    series: [
      {
        data: [10, 30, 20, 57, 40, 50],
        type: "line",
        smooth: true,
        symbol: "circle", //将小圆点改成实心 不写symbol默认空心
        symbolSize: 6, //小圆点的大小
        lineStyle: {
          width: 2,
          color: "#6AF0FF", //线条颜色
          // type: "dotted", //'dotted'虚线 'solid'实线
          shadowColor: "#6AF0FF", //阴影颜色
          shadowBlur: 5, //阴影的模糊大小。
          shadowOffsetX: 5, // 阴影水平方向上的偏移距离
          shadowOffsetY: 5 // 阴影垂直方向上的偏移距离
        },
        itemStyle: {
          color: "#6AF0FF" // 圆点背景色
        }
      }
    ]
  };