echarts指数坐标轴

2026-05-02 10:34:32 358
分类:echarts

echarts指数坐标轴

image.png

代码如下

var myChart = echarts.init(document.getElementById('main'), 'chalk');

var option = {
    title: {
        text: '某网店月度销售额度变化统计',
        left: 'center',
        subtext: '数据纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    toolbox: {
        show: true,     //默认不显示
        feature: {
            dataView: {
                show: true,
                readOnly: false
            },
            saveAsImage: {}
        }
    },
    // xAxis: {
    //     type: 'category',
    //     data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    // },
    xAxis: {
        type: "log",
        gridIndex: 0,
        min: 1,
        max: 5000,
        interval: [1, 10, 50, 100, 500, 5000],
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}万元'
        }
    },
    series: [{
        name: '销售额',
        type: 'bar',
        data: [125, 86, 256, 231, 582, 765, 175, 352, 135, 278, 1425, 289],
        itemStyle: {
            normal: {
                color: function (params) {
                    var colorList = ['#f25118', '#f4db4e', '#32bbe0', '#a5ec7f', '#4d7fff', '#f95d60', '#f4ac4e', '#a179f1', '#f1598d', '#0080d9', '#d05757', '#83d540', '#f46d9b', '#346ef9', '#ffdf33', '#84adff', '#ff8484', '#3cb371'];
                    return colorList[params.dataIndex];
                }
            }
        },
        markPoint: {
            data: [
                {name: '最小值', type: 'min'},
                {name: '最大值', type: 'max'}
            ]
        },
        markLine: {
            data: [
                {name: '平均值', type: 'average'}
            ]
        }
    }]
}
myChart.setOption(option);