首页 前端知识 echarts设置阴影、折线条样式、圆点大小

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

2024-02-11 10:02:48 前端知识 前端哥 362 272 我要收藏

关键代码

 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" // 圆点背景色
        }
      }
    ]
  };

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1743.html
标签
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!