效果图

image.png

后端数据格式使用的是比较通用的表格格式(很多前端表格插件都使用这种格式)

import { map, filter, isEqual, find, forEach, isNil, random } from 'lodash'
const createRandomRow = length => {
    const row = () => {
        const models = [
            'IPhone12mini', '小米10 Ultra', '华为Mate40', '红米K30 Ultra', 'IPhone 12 Pro', '真我X50 Pro', '小米9 Pro', '荣耀V20', 'IPad8', 'IPad Air4', 'IPad Mini5', 'IPad 11Pro 2',
            'Air Pods2', 'Air Pods Pro', 'Home Pod', 'Home Pod Mini'
        ]
        const date = `${random(2018, 2021, false)}-${random(1, 12, false)}-${random(1, 30, false)}`
        return { date, model: models[random(0, 15, false)], shipment: random(0, 10000, false) }
    }
    return map(new Array(length), () => row())
}
export const TASK_RESULT = {
    headers: [
        { name: 'date', label: '日期', type: 'dimension' },
        { name: 'model', label: '机型', type: 'dimension' },
        { name: 'shipment', label: '出货量', type: 'measure', unit: '台' },
    ],
    
    data: createRandomRow(10000 * 10),
}
export const createTwoDimensionOption = () => {
    const { headers, data } = TASK_RESULT
    console.time('生成图表')
    const [ xAxis, color ] = filter(headers, header => isEqual(header.type, 'dimension'))
    const measure = find(headers, header => isEqual(header.type, 'measure'))
    const option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {type: 'category'},
        yAxis: {},
        dataset: {
            source: []
        },
    }
    const filterXAxisMap = new Map() 
    const xAxisList = [] 
    
    forEach(data, row => {
        const value = row[xAxis.name]
        if (!filterXAxisMap.has(value)) {
            filterXAxisMap.set(value, filterXAxisMap.size)
            xAxisList.push(value)
        }
    })
   
    option.dataset.source.push([xAxis.name, ...xAxisList])
    const sourceRowLength = xAxisList.length + 1
    const createEmptySourceRow = () => new Array(sourceRowLength).fill(0)
    const sourceColorRowLocationMap = new Map()
    forEach(data, row => {
        const xAxisValue = row[xAxis.name] 
        const colorValue = row[color.name] 
        const measureValue = row[measure.name] 
        const currentColorRowIndex = sourceColorRowLocationMap.get(colorValue)
        const currentMeasureInsertIndex = filterXAxisMap.get(xAxisValue) + 1
        if (isNil(currentColorRowIndex)) {
            const newSourceRow = createEmptySourceRow()
            newSourceRow[0] = colorValue
            newSourceRow[currentMeasureInsertIndex] = measureValue
            option.dataset.source.push(newSourceRow)
            sourceColorRowLocationMap.set(colorValue, sourceColorRowLocationMap.size + 1)
        } else {
            option.dataset.source[currentColorRowIndex][currentMeasureInsertIndex] = measureValue
        }
    })
    console.timeEnd('生成图表')
    option.series = new Array(option.dataset.source.length - 1).fill({type: 'bar', smooth: true, seriesLayoutBy: 'row'})
    return option
}