echarts使用心得

适用版本：echarts-4.0.4

1. 图表外边距

var option = {
            grid: {
                top: '60',     //可以为百分比或像素
                left: '20',     //可以为百分比或像素
                right: '20',   //可以为百分比或像素
                bottom: '3%',   //可以为百分比或像素
                containLabel: true
            }
}

2. 图例过多

解决图例过多的办法有很多，我采用了最简单的方法，取消图例配置项或将图例个数控制在5个以内，多的不予显示。

var option = {
            legend: {
                data:[]
            }
}

 3.双Y轴坐标错位，造成虚线太多导致图表显示混乱，这个问题属于interval显式坐标间距不合理，没有等分。

yAxis: [
                {
                 type: 'value',
                 name: '温度',
                 min: 0,
                 max: 100,
                 interval: 20,
                 axisLabel: {
                     formatter: '{value} ' + 摄氏度
                 }
             },
             {
                 type: 'value',
                 name: '海平面',
                 min: 0,
                 max: 1,
                 interval: 0.2,
                 axisLabel: {
                     formatter: '{value} ' + 米
                 }
             }
      ]

4. 坐标系反转：X轴由底部翻转到顶部，Y轴同步翻转，0坐标由底部翻转到顶部。

var option = {
    xAxis:  [
        {
            data: []
        }, //底部的X轴，如不需要可以删掉
        {
            type: 'category',
            position: 'top',
            axisTick: {
                   alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                color: colors[0]
                }
            },
            data: data.xAxis
        }   //顶部的X轴，如不需要可以删掉
    ],
    yAxis: {
        type: 'value',
        inverse:true,   //Y轴翻转
        axisLabel: {
            formatter: '{value} 米'
        }
    }
}