[GitHub] ZhongMingKun commented on issue #9752: yAxis[i].axisLabel.rich..verticalAlign不生效

[GitBox <gi...@apache.org>]

ZhongMingKun commented on issue #9752: yAxis[i].axisLabel.rich.<user defined style name>.verticalAlign不生效
URL: https://github.com/apache/incubator-echarts/issues/9752#issuecomment-454282807
 
 
   > @ZhongMingKun please provide a picture to show me the expected effect you want.
   
   ### I want to reproduce the chart like image with Echarts.
   The image is from tushuo.
   https://tushuo.baidu.com/p.php?p=dta90t3y3zvla0wks (password: hz73)
   
   ![image](https://user-images.githubusercontent.com/33282718/51161727-8e39e800-18ce-11e9-999e-ff396ad5335f.png)
   
   ```
   option = {
       title: {
           text: "某地区蒸发量和降水量",
           subtext: "双Y轴 折线图柱状图混搭"
       },
       tooltip: {
           trigger: "axis"
       },
       legend: {
           data: ["蒸发量", "降水量"]
       },
       toolbox: {
           show: true,
           feature: {
               mark: {
                   show: true
               },
               dataView: {
                   show: true,
                   readOnly: false
               },
               restore: {
                   show: true
               },
               saveAsImage: {
                   show: true
               }
           }
       },
       calculable: true,
       xAxis: [
           {
               type: "category",
               axisLine: {
                   onZero: false
               },
               data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
               name: "月份"
           },
           {
               type: "category",
               axisLine: {
                   onZero: false
               },
               data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
               name: "月份",
               nameLocation: "end"
           }
       ],
       grid: {
           y: 70
       },
       yAxis: [
           {
               type: "value",
               name: "绝对值"
           },
           {
               type: "value",
               name: "增量",
               min: -300,
               max: 150
           }
       ],
       series: [
           {
               name: "蒸发量",
               type: "bar",
               data: [2, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3],
               xAxisIndex: 0
           },
           {
               name: "降水量",
               type: "bar",
               data: [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3],
               xAxisIndex: 0
           },
           {
               name: "蒸发量增量",
               type: "line",
               yAxisIndex: 1,
               data: [0, 2.9, 2.1, 16.2, 2.4, 51.1, 58.9, 26.6, -129.6, -12.6, -13.6, -3.1],
               xAxisIndex: 1
           },
           {
               name: "降水量增量",
               type: "line",
               yAxisIndex: 1,
               data: [0, 3.3, 3.1, 17.4, 2.3, 42, 104.9, 6.6, -133.5, -29.9, -12.8, -3.7],
               xAxisIndex: 1
           }
       ]
   }
   ```
   
   ### But when I copy the option-code to Echarts demo, I found that xAxis-name overlap with yAxis-label.
   
   ![image](https://user-images.githubusercontent.com/33282718/51162218-6186d000-18d0-11e9-96cc-a5216e4980ba.png)
   
   ### So I want to use `yAxis[i].axisLabel.rich.<user defined style name>.verticalAlign` and `formatter` to imitate.
   ```
   yAxis: [
       {
           type: "value",
           name: "绝对值"
       },
       {
           type: "value",
           name: "增量",
           min: -300,
           max: 150,
           axisLabel: {
               formatter: function(value, index) {
                   if (index === 0) {return `{bottom|${value}}`; }
                   return `{top|${value}}`;
               },
               rich: {
                   top: { verticalAlign: 'top'},
                   bottom: { verticalAlign: 'bottom'},
               }
           }
       }
   ],
   ```
   But `yAxis[i].axisLabel.rich.<user defined style name>.verticalAlign`,  not effect.
   I doubt that is my wrong in `formatter` function.
   
   Then I created an example.
   https://gallery.echartsjs.com/editor.html?c=xSLFCY0sd2&comment=0
   ![image](https://user-images.githubusercontent.com/33282718/51104774-026a8200-1822-11e9-9adf-1d58e4251a69.png)
   I found that `yAxis[i].axisLabel.rich.<user defined style name>.verticalAlign`  still not effect.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org