bar-上下渐变色柱形图，提示信息自定义显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/84141033

var x_data1 = ['0', '1', '2', '3', '4', '5', '6']; // 横坐标
var jstr = [5, 6, 40, 100, 58, 99]; //进场数据
var cstr = [36, 11, 22, 69, 115, 196]; //出场数据
var option = {
    backgroundColor: '#8B4513',
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params) {
            // 重定义marker值
            var marker1 = "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(2,242,180,1);'></span>";
            var marker2 = "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(2,209,223,1);'></span>";
            var res = "时间：" + params[0].name + ":00<br/>";
            var index = x_data1.indexOf(params[0].name); //定位到悬浮的名称在横坐标的位置
            for (var i = 0; i < params.length; i++) { //只有一个系列
                res += marker1 + "进场数：" + jstr[index] + "辆<br/>";
                res += marker2 + "出场数：" + cstr[index] + "辆<br/>";
            }
            return res;
        },
    },
    grid: [
        // 0 进场数
        {
            top: '20%',
            left: '15%',
            right: '15%',
            height: '30%',
        },
        // 1 出场数
        {
            top: '60%',
            left: '15%',
            right: '15%',
            height: '30%',
        }
    ],
    calculable: true,
    xAxis: [{
        name: 'h',
        nameLocation: 'end',
        nameTextStyle: {
            color: '#fff',
            fontSize: 12,
        },
        gridIndex: 0, // 对应前面grid的索引位置（第一个）进场
        type: 'category',
        axisLabel: {
            show: true,
            textStyle: {
                color: function(value) { // x轴颜色的设定
                    return value >= 4 ? 'gray' : 'white'; // 横坐标预警值
                },
                fontSize: 20,
            },
            margin: 18,
        },
        axisTick: {
            show: false,
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#2B70A6' // x轴颜色
            }
        },
        data: x_data1,
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }, {
        gridIndex: 1, // 对应前面grid的索引位置（第二个）出场
        position: 'top',
        type: 'category',
        axisTick: {
            show: false,
            alignWithLabel: true
        },
        axisLabel: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: '#2B70A6' // x轴颜色
            }
        },
        data: x_data1,
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }],
    yAxis: [{
        // show : false,//隐藏了y轴

        type: 'value',
        gridIndex: 0,
        name: '进场',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#fff',
            fontSize: 20,
        },
        nameGap: 1,
        nameRotate: 0,
        axisTick: {
            show: false,
            // alignWithLabel: true
        },
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }, {
        // show : false,//隐藏了y轴
        type: 'value',
        gridIndex: 1,
        name: '出场',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#fff',
            fontSize: 20,
        },
        nameGap: 1,
        nameRotate: 0,
        inverse: true,
        axisLine: { // y轴
            show: false

        },
        axisLabel: {
            show: false,
        },
        axisTick: { // y轴刻度线
            show: false,
            alignWithLabel: false
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }],
    series: [{
        name: '进场数',
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 0, // 对应前面x的索引位置（第一个）
        yAxisIndex: 0, // 对应前面y的索引位置（第一个）
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                            offset: 0,
                            color: 'rgba(2,242,180,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(2,242,180,.2)'
                        }
                    ]
                )
            },
        },
        data: jstr
    }, {
        name: '出场数',
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 1, // 对应前面x的索引位置（第二个）
        yAxisIndex: 1, // 对应前面y的索引位置（第二个）
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                            offset: 0,
                            color: 'rgba(2,209,223,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(2,209,223,.2)'
                        }
                    ]
                )
            },
        },
        data: cstr
    }]
};