正文

如何用ECharts设置图表坐标方向：横纵坐标自由切换，新手教程及实际案例解析

/0 浏览量
0413

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地实现各种图表的绘制。在 ECharts 中，我们可以通过设置坐标轴的属性来改变图表的横纵坐标方向。本文将详细介绍如何在 ECharts 中实现横纵坐标的自由切换，并提供实际案例解析。

基础知识

在 ECharts 中，坐标轴分为两类：valueAxis 和 categoryAxis。valueAxis 通常用于表示数值轴，而 categoryAxis 用于表示类别轴。通过设置坐标轴的 type 属性，我们可以将其设置为 value 或 category。

横纵坐标切换

要实现横纵坐标的自由切换，我们需要对 ECharts 的配置项进行修改。以下是一个简单的示例：

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

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

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

在上面的代码中，我们首先初始化了一个 ECharts 实例，并设置了图表的配置项和数据。在这个例子中，xAxis 是类别轴，yAxis 是数值轴。

要实现横纵坐标的切换，我们可以通过修改 xAxis 和 yAxis 的 type 属性来实现：

// 切换横纵坐标
myChart.setOption({
    xAxis: {
        type: 'value' // 将x轴改为数值轴
    },
    yAxis: {
        type: 'category' // 将y轴改为类别轴
    }
});

实际案例解析

以下是一个实际案例，展示如何使用 ECharts 绘制一个横纵坐标可切换的饼图：

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

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

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

// 切换横纵坐标
myChart.setOption({
    xAxis: {
        type: 'category',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    yAxis: {
        type: 'value'
    }
});

在这个例子中，我们首先绘制了一个饼图，然后通过修改 xAxis 和 yAxis 的 type 属性来实现横纵坐标的切换。

总结

通过以上教程，我们可以了解到如何在 ECharts 中设置图表的横纵坐标方向。在实际应用中，我们可以根据需求修改坐标轴的类型，实现横纵坐标的自由切换。希望本文对您有所帮助！

-- 展开阅读全文 --