天天看点

ECharts Y 轴 倒置

ECharts:

参考 http://echarts.baidu.com/doc/example/line6.html 降雨图,进行修改。

这是我完成的:供参考

option = {

title: 

  { 

          text: '成绩排名' 

        }, 

legend: 

  { 

          x: '200', 

          data: ['最高分', '最低分', '平均分', '级部排名'] 

        }, 

tooltip: 

  { 

          trigger: 'axis', 

          textStyle: 

          { 

            fontSize: 10, 

            fontStyle: 'consolas' 

          } 

        }, 

xAxis: 

  [

          { 

            type: 'category', 

            boundaryGap: true, 

            axisLine: {onZero: false},    //让Y轴 下来,不加这句话,Y轴在上面

            axisLabel: 

            { 

              show: true, 

              interval: 0, 

              rotate: -10 

            }, 

            data: ['八年级期末练习1', '八年级期末练习2'] 

          }

        ], 

yAxis: 

  [

          { 

            type: 'value', 

            name: '分数', 

            //max: 150, 

            //splitNumber: 5, 

            axisLabel: 

            { 

              formatter: '{value} ' 

            } 

          }, 

          { 

            type: 'value', 

            name: '排名', 

            //splitNumber: 5, 

            axisLabel: 

            { 

              //formatter: '{value} ' 

              formatter: function(v){

                    return - v;

                }

            } 

          }

        ], 

series: 

  [

          { 

            name: '最高分', 

            type: 'bar', 

            data: [83, 74] 

          }, 

          { 

            name: '最低分', 

            type: 'bar', 

            data: [32, 27] 

          }, 

          { 

            name: '平均分', 

            type: 'bar', 

            data: [56.68, 43.1] 

          }, 

          { 

            name: '级部排名', 

            type: 'line', 

            yAxisIndex: 1, 

            //data: [1, 2] 

            data: (function(){

                var oriData = [1, 2];

                var len = oriData.length;

                while(len--) {

                    oriData[len] *= -1;

                }

                return oriData;

            })()

          }

        ]

}

;

继续阅读