Echarts在线免费图表

 
            // 2x轴+假数据列
// 细粒度数据，必须根据主分类排序
var dummy = [
    ['2015冬','1月',Math.random()*10,Math.random()*10],
    ['2015冬','2月',Math.random()*20,Math.random()*20],
    ['2016春','3月',Math.random()*50,Math.random()*50],
    ['2016春','4月',Math.random()*100,Math.random()*100],
    ['2016春','5月',Math.random()*150,Math.random()*150],
    ['2016夏','6月',Math.random()*200,Math.random()*200],
    ['2016夏','7月',Math.random()*250,Math.random()*250],
    ['2016夏','8月',Math.random()*200,Math.random()*200],
    ['2016秋','9月',Math.random()*150,Math.random()*150],
    ['2016秋','10月',Math.random()*100,Math.random()*100],
    ['2016秋','11月',Math.random()*20,Math.random()*20],
    ['2016冬','十二月',Math.random()*10,Math.random()*10]
];
// 元数据处理，e.g. metadata.init().xxx
var metadata = {
    flag: true,
    quarter: [],
    month: [],
    data1: [],
    data2: [],
    data3: [],
    x_major_offset: dummy[0][1].length,
    init: function() {
        // 首次初始化
        if (metadata.flag) {
            // 数据遍历
            for (var i = 0; i < dummy.length; i++) {
                //debugger;
                if (i === 0) {
                    metadata.quarter.push(dummy[i][0]);
                } else {
                    // 与子分类列匹配
                    metadata.quarter.push(dummy[i-1][0] === dummy[i][0] ? '' : dummy[i][0]);
                }
                metadata.month.push(dummy[i][1]);
                metadata.data1.push(dummy[i][2]);
                metadata.data2.push(dummy[i][3]);
                metadata.data3.push('');
                // 计算子分类字符长度（按汉字计算，*12号字体）
                metadata.x_major_offset = metadata.x_major_offset > dummy[i][1].length ? metadata.x_major_offset : dummy[i][1].length;
            }
            metadata.flag = false;
        }
        return metadata;
    }
};

option = {
    tooltip: {
        axisPointer: {
            type: 'shadow'
        },
        trigger: 'axis'
    },
    grid: {
        bottom: metadata.init().x_major_offset * 12 + 30
    },
    legend: {
        data:['蒸发量','降水量']
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
                rotate: 90
            },
            splitArea: {show: false},
            data: metadata.init().month
        },
        {
            type: 'category',
            position: 'bottom',
            offset: metadata.init().x_major_offset * 12,
            axisLine: {show: false},
            axisTick: {
                length: metadata.init().x_major_offset * 12 + 20,
                lineStyle: {color: '#CCC'},
                interval: function (index, value) {
                    return value!=='';
                }
            },
            splitArea: {
                show: true,
                interval: function (index, value) {
                    return value!=='';
                }
            },
            data: metadata.init().quarter
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            z: 1,
             data: metadata.init().data1
        },
        {
            name:'降水量',
            type:'bar',
            z: 1,
            data: metadata.init().data2
        },
        {
            type:'line',
            xAxisIndex: 1,
            z: 0,
            data: metadata.init().data3
        }
    ]
};