echarts折线图颜色-折线图颜色设置-线条设置

最新推荐文章于 2024-05-16 10:32:40 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-05-16 10:32:40 发布

阅读量1.3w

点赞数 6

分类专栏： vue echarts 方法文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Maxueyingying/article/details/127809092

版权

vue 同时被 3 个专栏收录

98 篇文章 4 订阅

订阅专栏

方法

72 篇文章 1 订阅

订阅专栏

echarts

16 篇文章 1 订阅

订阅专栏

原图：
在这里插入图片描述

需要实现的效果：
在这里插入图片描述

开始修改

1.首先去掉x轴以及y轴刻度线及坐标线，留下刻度值

需要设置xAxis和yAxis里的axisLine 以及axisTick

xAxis

     xAxis: {
        //设置x轴
        type: "category",
        boundaryGap: false, //坐标轴两边不留白
        data: ["0", "1", "2", "3", "4", "5", "6"],
        axisLine:{    
         show:false  //隐藏x轴线 
         lineStyle: {
            color: "#ffffff",
          },  
       },
        axisTick:{
            show:false //隐藏x轴刻度
      }
   }

yAxis

   yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏y轴刻度
          },
       },

2. 修改折线图背景横线颜色

图背景的横向每一条白线都改变颜色，需要设置yAxis的splitLine里的lineStyle

   yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏y轴刻度
          },
          splitLine: {
            lineStyle: {
              // 设置背景横线
              color: "#BBBBBB",
           },
         },
      },

3.如何使echarts折线图连线平滑

只需要在series中添加 smooth: true，即可

示例代码

series: [
          {
            data: [2, 3, 2, 3, 2, 3, 2, 3, 3, 4, 5, 6, 6],
            type: "line",
            smooth: true, //默认是false,判断折线连线是平滑的还是折线
            itemStyle: {
              normal: {
                color: "#FDE708", //改变折线点的颜色
                lineStyle: {
                  color: "#FDE708", //改变折线颜色
                },
              },
            },
          },
        ],

关键词 smooth 还有其他的值

当type为line时
smooth 表示是否平滑曲线显示。

如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。

如果需要修改平滑算法，请参考 smoothMonotone。

设置为1
在这里插入图片描述

 let option = {
        //直角坐标系内绘图网格
        grid: {
          top: "5%",
          left: "3%", //grid 组件离容器左侧的距离
          right: "4%",
          bottom: "3%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签
        },
        // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
        xAxis: {
          type: "category",
          data: ["0", "1", "2", "3", "4", "5", "6"],
          name: "data",
          axisLine: {
            show: false, //隐藏x轴线
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏x轴刻度
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏y轴刻度
          },
          splitLine: {
            lineStyle: {
              // 设置背景横线
              color: "#BBBBBB",
            },
          },
        },
        series: [
          {
            data: [2, 3, 2, 3, 2, 3, 2, 3, 3, 4, 5, 6, 6],
            type: "line",
            // smooth: true, //默认是false,判断折线连线是平滑的还是折线
            itemStyle: {
              normal: {
                color: "#FDE708", //改变折线点的颜色
                lineStyle: {
                  color: "#FDE708", //改变折线颜色
                },
              },
            },
          },
        ],
      };