echarts 图表外观优化

1.祛除y轴分割线

yAxis : [
              {
                type : 'value',
                splitLine:{
                  show: false
                  }
                }
           ]

优化前

image.png

优化后

image.png

2.给坐标轴增加名字 并设置适当的距离,设置字体大小颜色

yAxis : [
              {
                type : 'value',
                name : '时长分布(h)',
                nameGap: 25,
                nameTextStyle: {
                color: '#333',
                fontSize: 15
              },
                splitLine:{
                  show: false
                  }
                }
           ]

修改前

image.png

修改后

image.png

3.去除分隔符

  xAxis : [
            {
              type : 'category',
              data : xData,
              axisTick: {
                show: false,
              }
            }
          ],

修改前

image.png

修改后

image.png

4.改变x,y轴颜色和宽度，以及字体的样式

yAxis : [
              {
                type : 'value',
                name : '时长分布(h)',
                nameGap: 25,
                splitLine:{
                  show: false
                  },
              axisLine: {
                lineStyle: {
                  color: '#999',
                  width: 2
                }
              },
              axisLabel: {
                color: '#333',
                fontWeight: 400,
                margin: 16,
                fontSize: 14
              }
            }
           ]

修改前

image.png

修改后

image.png