echarts折线图属性

最新推荐文章于 2024-04-17 10:09:38 发布

都挺好，刚刚好

最新推荐文章于 2024-04-17 10:09:38 发布

阅读量6.3k

点赞数 5

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/seimeii/article/details/121225469

版权

echarts 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、去掉刻度线

放在X轴与 Y轴的属性配置里面


axisTick: {
    show: false
}

在这里插入图片描述

2、取消网格线


splitLine: {
    show: false 
}

在这里插入图片描述

3、取消显示坐标值


axisLabel: {
    show: false
}

在这里插入图片描述

4、取消显示坐标轴


axisLine: {
    show: false
}

在这里插入图片描述

5、取消显示坐标轴,坐标轴刻度,坐标值(如果是y轴,默认的网格线也会取消显示)

在这里插入图片描述

6、更改坐标轴字体颜色

axisLabel: {
            show: true,
            textStyle: {
              color: '#ccc',  //更改坐标轴文字颜色
              fontSize: 12      //更改坐标轴文字大小
            }
          }

在这里插入图片描述

7、更改坐标轴颜色

axisLine: {
            lineStyle: {
              // type: 'solid',
              color: '#556178',// X坐标轴的颜色
              // width: '2' //坐标线的宽度
            }
          }

在这里插入图片描述

8、网格线配置

splitLine: {
            show: true,
            lineStyle:
            {
              color: ['#556178'],
              width: 1,
              type: 'solid'
            }
          }

在这里插入图片描述

9、更改折线与折线点颜色

        lineStyle: {
          color: '#1A3D84' //改变折线颜色
        },
        itemStyle: {
          color: '#1A3D84',   // 折线点设置
        },

在这里插入图片描述

10、拐点设置

1.拐点大小设置
在这里插入图片描述

symbolSize: 8

2.拐点边框设置
在这里插入图片描述

symbolSize: 8,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#fff', // 设置边框内颜色
                barBorderRadius: 18,
                borderColor: '#04B0E0' // 折线边框颜色
              }

            },

11、更改tooltip小圆圈颜色

tooltip: {
          formatter: function (params) {
            var result = ''
            var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>'
            params.forEach(function (item) {
              result += item.axisValue + "</br>" + dotHtml + item.data
            })
            return result
          },
          trigger: 'axis',
          axisPointer: {
            // type: 'cross',
            label: {
              backgroundColor: '#04B0E1'
            }
          }
        },

在这里插入图片描述

12、折线图显示提示信息

 trigger: 'axis',
          axisPointer: {
            // type: 'cross',
            label: {
              backgroundColor: '#04B0E1'
            }
 }

在这里插入图片描述

13、让图表占满div

 grid:{
      	 top:"0px",
         left:"0px",
         right:"0px",
         bottom:"0px"
	  }

grid 的四个参数值：top、left、right 、bottom
分别是图标距离容器的顶部、左边、右边、底部的距离

14、折线图下面显示阴影

  areaStyle: {            // 折现下是否填充
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#1C3D77' // 0% 处的颜色
            }, {
              offset: 1, color: '#1C3D77' // 100% 处的颜色
            }],
            global: false
          }
        },