echarts折线图属性

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
          }
        },