Multiple Categoriesecharts shadow' } }, grid: { left: '10%配置项内容和展示

多系列的 boxplot，结合 dataZoom 组件。

      
// Generate data.
data = [];
for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
    var seriesData = [];
    for (var i = 0; i < 18; i++) {
        var cate = [];
        for (var j = 0; j < 90; j++) {
            cate.push(Math.random() * 200);
        }
        for (var j = 0; j < 10; j++) {
            cate.push(Math.random() * 400);
        }
        seriesData.push(cate);
    }
    data.push(echarts.dataTool.prepareBoxplotData(seriesData));
}


option = {
    title: {
        text: 'Multiple Categories',
        left: 'center',
    },
    legend: {
        y: '10%',
        data: ['category0', 'category1', 'category2', 'category3']
    },
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '10%',
        top: '20%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        data: data[0].axisData,
        boundaryGap: true,
        nameGap: 30,
        splitArea: {
            show: true
        },
        axisLabel: {
            formatter: 'expr {value}'
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        name: 'Value',
        min: -400,
        max: 600,
        splitArea: {
            show: false
        }
    },
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 20
        },
        {
            show: true,
            height: 20,
            type: 'slider',
            top: '90%',
            xAxisIndex: [0],
            start: 0,
            end: 20
        }
    ],
    series: [
        {
            name: 'category0',
            type: 'boxplot',
            data: data[0].boxData,
            tooltip: {formatter: formatter}
        },
        {
            name: 'category1',
            type: 'boxplot',
            data: data[1].boxData,
            tooltip: {formatter: formatter}
        },
        {
            name: 'category2',
            type: 'boxplot',
            data: data[2].boxData,
            tooltip: {formatter: formatter}
        },
        {
            name: 'category0',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            data: data[0].outliers
        },
        {
            name: 'category1',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            data: data[1].outliers
        },
        {
            name: 'category2',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            barGap: '30%',
            data: data[2].outliers
        }
    ]
};
console.log(data)

function formatter(param) {
    return [
        'Experiment ' + param.name + ': ',
        'upper: ' + param.data[0],
        'Q1: ' + param.data[1],
        'median: ' + param.data[2],
        'Q3: ' + param.data[3],
        'lower: ' + param.data[4]
    ].join('<br/>')
}