正文

从零开始，学会echarts自定义坐标轴，轻松应对各种图表需求

/0 浏览量
0717

了解 ECharts 及其坐标轴

ECharts 是一款使用 JavaScript 实现的开源可视化库，可以方便地实现各种数据的可视化展示。在 ECharts 中，坐标轴是图表的基础，它用于标示数据的量和类别。学会自定义坐标轴，可以使图表更直观、更符合数据特性。

1. ECharts 基础设置

在开始自定义坐标轴之前，我们先来了解一下 ECharts 基础设置。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义坐标轴示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. 自定义坐标轴

2.1 设置坐标轴类型

ECharts 提供了多种坐标轴类型，如数值轴、类目轴、时间轴等。根据需求选择合适的类型。

xAxis: {
    type: 'category', // 类目轴
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
    type: 'value' // 数值轴
}

2.2 设置坐标轴名称

xAxis: {
    name: '商品名称'
},
yAxis: {
    name: '销量'
}

2.3 设置坐标轴标签

xAxis: {
    name: '商品名称',
    axisLabel: {
        interval: 0, // 自动间隔
        rotate: 45 // 标签旋转角度
    }
},
yAxis: {
    name: '销量',
    axisLabel: {
        formatter: '{value} 件'
    }
}

2.4 设置坐标轴分割线

xAxis: {
    splitLine: {
        lineStyle: {
            type: 'dashed'
        }
    }
},
yAxis: {
    splitLine: {
        lineStyle: {
            type: 'dashed'
        }
    }
}

3. 自定义坐标轴刻度

xAxis: {
    type: 'category',
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    axisLabel: {
        interval: 0,
        rotate: 45,
        formatter: function(value) {
            return value;
        }
    }
},
yAxis: {
    type: 'value',
    axisLabel: {
        formatter: '{value} 件',
        minInterval: 1 // 最小间隔
    },
    splitNumber: 5 // 分割数量
}

4. 实战：自定义时间坐标轴

在实际应用中，我们经常会用到时间序列数据。下面是一个自定义时间坐标轴的例子：

xAxis: {
    type: 'time',
    boundaryGap: false,
    data: ['2017-01-01 00:00:00','2017-01-02 00:00:00','2017-01-03 00:00:00','2017-01-04 00:00:00','2017-01-05 00:00:00','2017-01-06 00:00:00','2017-01-07 00:00:00']
},
yAxis: {
    type: 'value',
    axisLabel: {
        formatter: '{value} 件'
    }
}

通过以上步骤，你可以轻松地自定义 ECharts 坐标轴，让你的图表更加美观、实用。希望本文对你有所帮助！

-- 展开阅读全文 --