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