「掘金·启航计划」之echart常见的不常见的属性设置

我正在参加「掘金·启航计划」

工作时遇到的几种echart图形问题整理：

1、雷达图

1. 指示器文字过长问题： 在开发的过程中由于界面宽度的原因，雷达图指示器文字太长溢出屏幕，如下图红框所示：

解决思路有两个：

• 整个雷达图缩小（当然多数情况下会产生不和谐的效果，测试还是会来找你麻烦）
• 指示器问题换行显示，所需代码不予赘述，记住name换行符用的是'\n'而不是<br>

2. 指示器文字行高问题: 换行展示之后，无疑会产生一个问题：行高过小，文字重叠，如下图红框所示：

所以我们需要设置行高，那么行高lineHeight写到哪里呢，这里我们用到一个属性：axisName。axisName可以设置指示器的样式：

  axisName: {         
  color: '#004C82', //指示器的文字颜色
  lineHeight:20,//指示器行高        
  }
}

通过设置lineHeight属性，指示器美美哒了~

axisName的其他属性

axisName: { //指示器样式
          color: '#004C82', //指示器的文字颜色
          lineHeight:20,//指示器行高
          borderRadius:5,//指示器圆角
          padding:[0,3,0,3],//指示器的内边距
          backgroundColor:'#fff'//指示器的背景颜色
}

2、柱状图/折线图

1. 横坐标信息展示不全： 看到这个问题估计大家很疑惑，这算是什么问题呢？先贴两张测试提出的问题单。

由于页面宽度不够，柱状图的横向坐标轴数据过多，导致横向坐标轴的数据间隔显示，所以测试就提出了信息不全的问题。拿到这个问题单我也是懵的，那么如果解决这个问题呢？横向坐标数据已经倾斜，那么把页面窗口调到足够大？简单粗暴固然可行，但是下次遇到类似问题，页面宽度又不允许调整怎么办？思来想去，查阅各方资料终于找到一个解决办法。

对！就是interval,把interval设置成0,强制显示所有标签。以下是设置方法：

 xAxis: [{
    xisLabel: {
       interval:0, //设置成 0 强制显示所有标签。
       rotate:40 //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。 
     }
}]

前端菜鸟，谨把自己遇到的问题整理出来方便以后查阅，望路过的大佬指点一二~

后续遇到问题再继续补充。