Echarts在线免费图表

 
            
option = {
    legend: {
        // data: ['煤炭', '电力', '运输', '化工', '科技环保']
    },
    tooltip: {
        trigger: 'item',
    },
    grid: {
        top: '13%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: [2023],
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: '#ccc'
            }
        }
    },

    series: [
        {
            name: '煤炭',
            type: 'boxplot',
            itemStyle: {
                borderColor: '#FE6470',
                borderWidth: 1,
                color: '#FFB2B8',
            },
            data: [[6, 22, 33, 66, 88]],
            tooltip: { formatter: formatter }
        },
        {
            name: '电力',
            type: 'boxplot',
            itemStyle: {
                borderColor: '#0177FB',
                borderWidth: 1,
                color: '#74B5FF',
            },
            data: [[60, 65, 70, 80, 90]],
            tooltip: { formatter: formatter }
        },
        {
            name: '运输',
            type: 'boxplot',
            itemStyle: {
                borderColor: '#FDC142',
                borderWidth: 1,
                color: '#FFDD96',
            },
            data: [[6, 22, 25, 50, 60]],
            tooltip: { formatter: formatter }
        },
        {
            name: '化工',
            type: 'boxplot',
            itemStyle: {
                borderColor: '#7C6AFF',
                borderWidth: 1,
                color: '#b0a9e7',
            },
            data: [[6, 22, 50, 70, 80]],
            tooltip: { formatter: formatter }
        },
        {
            name: '科技环保',
            type: 'boxplot',
            itemStyle: {
                borderColor: '#03EFBC',
                borderWidth: 1,
                color: '#B1FFEE',
            },
            data: [[6, 22, 45, 60, 70]],
            tooltip: { formatter: formatter }
        },
        {
            name: '金融',
            type: 'boxplot',
            itemStyle: {
                borderColor: '#ED589D',
                borderWidth: 1,
                color: '#FFA8D0',
            },
            data: [[6, 22, 45, 60, 70]],
            tooltip: { formatter: formatter }
        },
        {
            name: '支持保障',
            type: 'boxplot',
            itemStyle: {
                borderColor: '#3AACFF',
                borderWidth: 1,
                color: '#9DD6FF',
            },
            data: [[6, 22, 45, 60, 70]],
            tooltip: { formatter: formatter }
        },
        {
            name: '异常值',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            itemStyle: {
                color: '#FE6470',
            },
            zlevel: 1,
            data: [60],
            tooltip: { formatter: errFormatter }
        },
        {
            name: '异常值',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            itemStyle: {
                color: '#0177FB',
            },
            zlevel: 1,
            data: [55],
            tooltip: { formatter: errFormatter }
        },
        {
            name: '异常值',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            itemStyle: {
                color: '#FDC142',
            },
            zlevel: 1,
            data: [55],
            tooltip: { formatter: errFormatter }
        },
        {
            name: '异常值',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            itemStyle: {
                color: '#7C6AFF',
            },
            zlevel: 1,
            data: [20],
            tooltip: { formatter: errFormatter }
        },
        {
            name: '异常值',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            itemStyle: {
                color: '#03EFBC',
            },
            zlevel: 1,
            data: [30],
            tooltip: { formatter: errFormatter }
        },
        {
            name: '异常值',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            itemStyle: {
                color: '#ED589D',
            },
            zlevel: 1,
            data: [40],
            tooltip: { formatter: errFormatter }
        },
        {
            name: '异常值',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: 8,
            itemStyle: {
                color: '#3AACFF',
            },
            barGap: '0%',
            zlevel: 1,
            data: [60],
            tooltip: { formatter: errFormatter }
        }
    ]
};

function formatter(param) {
    // console.log('param---', param)
    // [下边缘，下四分位数，中位数，上四分位，上边缘]
    return [
        param.seriesName + ': ',
        param.marker + '下边缘: ' + param.data[1],
        param.marker + '下四分位数: ' + param.data[2],
        param.marker + '中位数: ' + param.data[3],
        param.marker + '上四分位数: ' + param.data[4],
        param.marker + '上边缘: ' + param.data[5]
    ].join('<br/>')
}
function errFormatter(param) {
    // console.log('param---', param)
    return [
        param.marker + param.seriesName + ': ' + param.data,
    ].join('<br/>')
}