echarts 高温低温对比图案例代码

// 新的数据
var coolData = [31, 28, 13, 0, 0, 0, 0, 0, 0, 0, 19, 28];
var hotData = [0, 0, 0, 11, 15, 27, 30, 31, 26, 10, 0, 0];

// 计算最大数据值
function getMaxData() {
    let tempList = [...coolData, ...hotData];
    return Math.max(...tempList);
}

var maxData = getMaxData();

// x轴的数据，表示月份
var xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

option = {
    legend: {
        data: ['低温', '高温'],
        right: '10%', // 可根据需求调整图例的位置
        top: '5%'
    },
    grid: [
        {
            show: false,
            left: '0%',
            top: '10%',
            bottom: '8%',
            containLabel: true,
            width: '50%'
        },
        {
            show: false,
            right: '0%',
            top: '10%',
            bottom: '8%',
            containLabel: true,
            width: '50%'
        }
    ],
    xAxis: [
        {
            gridIndex: 0,
            type: 'value',
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            max: maxData
        },
        {
            gridIndex: 1,
            type: 'value',
            inverse: false,
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            max: maxData
        }
    ],
    yAxis: [
        {
            type: 'category',
            gridIndex: 0,
            data: xData,
            axisTick: { show: false },
            axisLabel: { show: true }
        },
        {
            type: 'category',
            gridIndex: 1,
            data: xData,
            axisTick: { show: false },
            axisLabel: { show: true }
        }
    ],
    series: [
        {   
            name: '低温', // 对应图例
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: coolData,
            type: 'bar',
            barWidth: '20',
             itemStyle: {
                // 使用更优雅的蓝色
                color: '#4169E1' // 皇家蓝
            },
            backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
            label: {
                show: true,
                position: 'insideBottom',
                formatter: function (params) {
                    // 当数据值为0时不显示标签
                    return params.value !== 0 ? params.value : '';
                }
            }
        },
        { 
            name: '高温', // 对应图例
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: hotData,
            type: 'bar',
            barWidth: '20',
             itemStyle: {
                // 使用更优雅的红色
                color: '#DC143C' // 猩红
            },
             
            backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
           label: {
                show: true,
                position: 'insideBottom',
                formatter: function (params) {
                    // 当数据值为0时不显示标签
                    return params.value !== 0 ? params.value : '';
                }
            }
        }
    ]
};

demo