使用echarts做对比图

Posted 2023-04-13

参考技术A

最近的项目中用到了对比图，为了以后不再到处找资料，特记录下对比图的做法。

对比图实际上是一组横向的柱状图，以x轴为度量，y轴为维度，与echarts官方给出的示例不同的是，一般x轴左右侧都需要是正值。这样的话可以建立三个坐标系来实现：第一个坐标系对应左侧部分（x轴设置 inverse ），第二个坐标系对应右侧部分，两个坐标系均隐藏y轴，第三个坐标系用来显示y轴（y轴一般放在左侧，视情况也可以放右侧）同时隐藏x轴。如图所示

对比图中还加入了datazoom，将三个y轴联动起来。
最后有一个美中不足的地方，鼠标移入时tooltip暂时只能显示某一侧的内容，如果再增加坐标系或许能够解决...

[echarts] 同指标对比柱状图

 

需求：对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率

 

 

http://echarts.baidu.com/echarts2/doc/example/bar1.html

option = {
    title : {
        text: ‘学院课程获得学分率对比统计‘,
        subtext: ‘绿色柱：通过率由高到低；蓝色柱：本学院课程平均获得学分率；红色柱：挂科率由高到低‘
    },
    tooltip : {
        trigger: ‘axis‘
    },
    legend: {
        data:[‘获得学分率‘]
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: false},
            dataView : {show: false, readOnly: false},
            magicType : {show: false, type: [‘line‘, ‘bar‘]},
            restore : {show: false},
            saveAsImage : {show: false}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : ‘category‘,
            axisLabel: {
              interval: 0,
              rotate: 40
              },
            data : [‘高数1‘,‘高数2‘,‘高数3‘,‘高数4‘,‘高数5‘,‘高数6‘,‘高数7‘,‘高数8‘,‘...‘,‘全部课程‘,‘...‘,‘大学英语1‘,‘大学英语2‘,‘大学英语3‘,‘大学英语4‘,‘大学英语5‘,‘大学英语6‘,‘大学英语7‘,‘大学英语8‘]
        }
    ],
    yAxis : [
        {
            type : ‘value‘,
             axisLabel : {
            formatter: ‘{value} %‘
          }
        }
    ],
    series : [
        
        {
            name:‘获得学分率‘,
            type:‘bar‘,
            barWidth:30, 
          itemStyle: {
                normal: {
                    color: function(params) {
                      console.log(params);
                        // build a color map as your need.
                        var colorList = [
                          ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘,‘#9BCA63‘, ‘#9BCA63‘,
                           ‘#27727B‘,‘#27727B‘,‘#27727B‘,
                           ‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘
                        ];
                        return colorList[params.dataIndex]
                    }
                }
            },
              data:[100, 100, 100, 100,100,100,100,100,0,95.4,0, 58.5, 48.2,58.5, 48.2, 38.7, 24.8, 16.0, 5.3]
        }
    ]
};