项目中使用了 百度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;
