Echarts常用属性设置

1.x轴斜着显示

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

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

2.x轴文字格式化

例如：每8个字符自动换行，具体方法可以自formatter对应的function中自行定义

xAxis.axisLabel 属性
xAxis.axisLabel.align 文字对其方式:'left'、'center'、'right'

 xAxis: [{
             axisLabel: {
                                // fontSize: 12,
                                color: '#fff',
                                align: 'left',
                                formatter: function (value) {
                                    value = value.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{8}\x01?/g, "$&\n").replace(/\x01/g, "");
                                    return value;
                                }
                            }
}]

3.timeLine

image.png

官方地址：http://echarts.baidu.com/option.html#timeline

默认的时间轴，对于容器的左右两侧都是有一定距离的，有时我们需要缩小这个距离可以通过设置left、right属性来达到目的

timeline.left :timeline组件离容器左侧的距离,

• left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

timeline.right

timeline:{
      left:10,
      right:10
}

4. tooltip 格式化

官方api文档地址：https://echarts.baidu.com/option.html#tooltip
有时我们需要对提示框的内容进行格式化，这是我们可以通过设置其formatter进行设置

5.饼图label及legend的设置

image.png

设置legend 为可滚动的

legend: {
        type: 'scroll'
      }

image.png

设置线段长度

 series : [
        {
            name: '姓名',
            type: 'pie',
            radius : '55%',
            center: ['40%', '50%'],
            data: data.seriesData,
            labelLine: {
                normal: {
                    show: true,
                       length:130 #线段长度设置
                }
            },

image.png