正文

学会echarts自定义坐标轴，轻松打造个性化图表，数据展示更直观

/0 浏览量
0527

在数据可视化领域，ECharts 是一款功能强大、易于使用的图表库。它能够帮助我们轻松地将数据转化为直观的图表，其中自定义坐标轴是 ECharts 的一项重要功能。通过自定义坐标轴，我们可以打造出具有个性化的图表，使得数据展示更加直观易懂。下面，让我们一起来学习如何使用 ECharts 自定义坐标轴。

一、ECharts 基础知识

在开始自定义坐标轴之前，我们需要了解一些 ECharts 的基础知识。

1.1 ECharts 的安装与引入

首先，我们需要在项目中引入 ECharts。可以通过以下两种方式引入：

方式一：使用 CDN

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

方式二：使用 npm/yarn

npm install echarts
# 或者
yarn add echarts

1.2 ECharts 的基本使用

接下来，我们可以创建一个简单的图表来熟悉 ECharts 的基本使用。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

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

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

二、自定义坐标轴

在 ECharts 中，我们可以通过以下几种方式自定义坐标轴：

2.1 自定义坐标轴名称

通过设置 axisLabel 属性，我们可以自定义坐标轴名称。

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    axisLabel: {
        interval: 0,
        formatter: '{value}'
    }
},
yAxis: {
    name: '销量（件）',
    axisLabel: {
        formatter: '{value}'
    }
},

2.2 自定义坐标轴刻度

通过设置 axisTick 属性，我们可以自定义坐标轴刻度。

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    axisTick: {
        show: false
    }
},
yAxis: {
    axisTick: {
        show: false
    }
},

2.3 自定义坐标轴标签

通过设置 axisLabel 属性，我们可以自定义坐标轴标签。

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    axisLabel: {
        interval: 0,
        formatter: function (value) {
            return value + '（件）';
        }
    }
},
yAxis: {
    axisLabel: {
        formatter: '{value}'
    }
},

2.4 自定义坐标轴轴线

通过设置 axisLine 属性，我们可以自定义坐标轴轴线。

xAxis: {
    axisLine: {
        show: false
    }
},
yAxis: {
    axisLine: {
        show: true,
        lineStyle: {
            color: '#333',
            type: 'solid',
            width: 2
        }
    }
},

2.5 自定义坐标轴分割线

通过设置 splitLine 属性，我们可以自定义坐标轴分割线。

xAxis: {
    splitLine: {
        show: true,
        lineStyle: {
            color: '#eee',
            type: 'dashed',
            width: 1
        }
    }
},
yAxis: {
    splitLine: {
        show: true,
        lineStyle: {
            color: '#eee',
            type: 'dashed',
            width: 1
        }
    }
},

三、实战案例

接下来，让我们通过一个实战案例来学习如何使用 ECharts 自定义坐标轴。

3.1 案例背景

某电商平台上，一款手机在一段时间内的销量数据如下：

日期 销量
2021-01-01 200
2021-01-02 250
2021-01-03 300
2021-01-04 350
2021-01-05 400
2021-01-06 450

我们需要使用 ECharts 创建一个折线图，展示这款手机在一段时间内的销量变化。

3.2 案例代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '手机销量折线图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["2021-01-01", "2021-01-02", "2021-01-03", "2021-01-04", "2021-01-05", "2021-01-06"],
            axisLabel: {
                interval: 0,
                formatter: '{value}'
            }
        },
        yAxis: {
            name: '销量（件）',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [{
            name: '销量',
            type: 'line',
            data: [200, 250, 300, 350, 400, 450]
        }]
    };

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

通过以上代码，我们可以得到一个具有个性化坐标轴的折线图，展示手机在一段时间内的销量变化。

四、总结

通过学习本文，我们了解到 ECharts 自定义坐标轴的相关知识。通过自定义坐标轴，我们可以打造出具有个性化的图表，使得数据展示更加直观易懂。在实际开发中，我们可以根据需求灵活运用这些技巧，为用户呈现更加精美的图表。

希望本文对您有所帮助，如果您有任何疑问或建议，请随时留言。祝您学习愉快！

-- 展开阅读全文 --