Echarts 双Y轴刻度不一致

项目中使用了 百度Echarts
根据项目需要，要实现双Y轴展示柱状图
最终的样子是这样的

最终效果

实现过程中遇到的问题
一开始是这个样子的（因为没有设置max min，天真的以为只要有数据，就会系统均分，万万没想到，出现左右刻度不重合现象，what ~~）

类似官网这个例子

• 闲言碎语不要讲，开始正文，开发中问题总结

①x轴 文字太长 展示不全

解决方法：（大致思路就是让文字倾斜）

grid: {
         y2: 140
          },
xAxis: {
            data: [],
            axisLabel: {
              interval: 0,//横轴信息全部显示
              rotate: -30,//-30度角倾斜显示
            }
          },

②对于动态数据，如何定义右侧Y轴的刻度

解决方法： 翻来覆去，终于在github 的issue上看到，貌似echart3.0需要自己去定义 max，min，interval。系统不再自动计算适配。
既然这样，那就计算呗，根据项目需要，在这一块

yAxis:[
            {......},
            {
              type: 'value',
              name: '销售额(元)',
              min: 0,
              max: max,        // 计算最大值
              interval: Math.ceil(max / 5),   //  平均分为5份
              axisLabel: {
                formatter: '{value}'
              }
]

小插曲：由于两侧都是动态数据，测试时候发现，左侧Y轴有时候会变为6份或者更多份。妹的，那就乱套了，左右Y轴不对应。那就固定起来，将左侧也固定为 5份。具体方法同上（计算max min interval）

基本就能解决了
that's all

番外篇：

• 控制图表与外部容器之间的间距

  
  
  

  image.png

options : {
    //...
    grid : {
        left: 40,    //距离容器左边界40像素
        right: 30   //距离容器右边界30像素
    }
}

• 实现图表的宽度随着屏幕宽度的改变而改变
  在setoption之后添加这段代码：

window.onresize = myChart.resize;