echarts箱线图x轴标签如何设置？

Question

如何更改echart箱线图上的x轴标签？在示例中，绘制了 5 个数据集，我需要能够为它们提供自己的 x 轴值/标签。我更习惯使用chartjs，但他们没有箱形图。出于本示例的目的，我需要标签为 ['PTM 07'、'PTM 08'、'PTM 09'、'PTM 10'、'PTM 11']

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eCHarts</title>
<!-- including ECharts file -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

</head>

<body>

<!-- preparing a DOM with width and height for ECharts -->
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main'));

    // specify chart configuration item and data
    var option = {
title: [
    {
        text: 'Progress Test Progression',
        left: 'center'
    },
    {
        text: 'Some text',
        borderColor: '#999',
        borderWidth: 1,
        textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            lineHeight: 20
        },
        left: '10%',
        top: '90%'
    }
],
dataset: [{
    source: [
        [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
        [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
        [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
        [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
        [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
    ]
}, {
    transform: {
        type: 'boxplot',
        config: { 
            itemNameFormatter: 'Option {value}' }
    }
}, {
    fromDatasetIndex: 1,
    fromTransformResult: 1
}],
tooltip: {
    trigger: 'item',
    axisPointer: {
        type: 'shadow'
    }
},
grid: {
    left: '10%',
    right: '10%',
    bottom: '15%'
},
xAxis: {
    type: 'category',
    boundaryGap: true,
    nameGap: 30,
    splitArea: {
        show: false
    },
    splitLine: {
        show: false
    }
},
yAxis: {
    type: 'value',
    name: 'Score',
    splitArea: {
        show: true
    }
},
series: [
    {
        name: 'boxplot',
        type: 'boxplot',
        datasetIndex: 1
    }
]};

    // use configuration item and data specified to show chart
    myChart.setOption(option);
</script>

Answer 1

更换

itemNameFormatter: 'Option {value}' }

到

itemNameFormatter: function (params) {
            return scopes[params.value];
    }

其中 params.value 将为 0,1,2,3... 关键是这是一个你可以返回任何你喜欢的东西的函数......

Answer 2

为@Ginger_Chacha 的答案添加更多细节......

更换

itemNameFormatter: 'Option {value}'

与

itemNameFormatter: function (params) {
    return mylabels[params.value];
}

哪里

option

可以访问

const mylabels = ['PTM 07', 'PTM 08', 'PTM 09', 'PTM 10', 'PTM 11'];

echarts箱线图x轴标签如何设置？

问题描述投票：0回答：2

2个回答

最新问题

echarts箱线图x轴标签如何设置？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2