echarts

记一次遇到的echarts图,因为很少用,不是很懂就导致了许多问题,现做记录,
ui样式

这为分组柱状图,官网示例没有类似的,现根据百度和实际进行设置

option = {
        tooltip: {
            trigger: 'axis',
             formatter: function(a) {
           let list = []
           let listItem = ''
           if(a[0].axisValue == "1"){
           for (var i = 0; i < a.length; i++) {
             list.push(
               '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                 a[i].color +
                 ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:auto; display:inline-block;">' +
                 a[i].seriesName+":"+a[i].data+'</span>'
             )
           }
          listItem = list.join('<br>')
           return '<div class="showBox">' + listItem + '</div>'
             
           }else if(a[0].axisValue == "2"){           for (var i = 0; i < a.length; i++) {
             list.push(
               '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                 a[i].color +
                 ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:auto; display:inline-block;">' +
                 a[i].seriesName.replace('早',"中")+":"+a[i].data+'</span>'
             )
           }
           listItem = list.join('<br>')
           return '<div class="showBox">' + listItem + '</div>'}else{           for (var i = 0; i < a.length; i++) {
             list.push(
               '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                 a[i].color +
                 ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:auto; display:inline-block;">' +
                 a[i].seriesName.replace("早","晚")+":"+a[i].data+'</span>'
             )
           }
           listItem = list.join('<br>')
           return '<div class="showBox">' + listItem + '</div>'}
         }
        },
        grid: {
            x: 60,
            y: 40,
            x2: 60,
            y2: 90
        },
        xAxis: [
            {
                type: 'category',
                data: ["1", "2", "3"],
                position: 'bottom',
                offset: 40,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel:{
                  show:false
                }
            },
            {
                type: 'category',
                data: ["早班", "历年早班最佳值", "历年早班均值", "中班", "历年中班最佳值", "历年中班均值","晚班", "历年晚班最佳值", "历年晚班均值",],
                position: 'bottom',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    rotate: 50,
                    textStyle: {
                        color: '#999',
                        fontSize: 10,
                    }
                }
            }

        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    rotate: 0,
                    textStyle: {
                        color: '#999',
                        fontSize: 12,
                    },
                },
                max:10,
                min:0
            }
        ],
        series: [
            {
                name: '早班',
                type: 'bar',
                data: ["-", "-", "-"]
            },
            {
                name: '历年早班最佳值',
                type: 'bar',
                data: ["-", "-", "-"]
            },
            {
                name: '历年早班均值',
                type: 'bar',
                data: ["-", "-", "-"]
            },
        ],
        color:['#5B8FF9','#5AD8A6','#5D7092'],
    };

效果图,可自行更改内容