正文

学会echarts坐标设置，轻松绘制精准图表

/0 浏览量
0416

ECharts 是一款使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松地将数据通过图表的形式展示出来。坐标系统是 ECharts 中非常重要的一个组成部分，它决定了图表中数据点的位置和图表的布局。学会如何设置坐标系统，能够让你绘制出更加精准和美观的图表。

坐标系类型

ECharts 支持多种坐标系类型，包括直角坐标系（也称为二维坐标系）、极坐标系、地理坐标系以及散点图坐标系等。下面分别介绍这些坐标系的基本设置和使用方法。

1. 直角坐标系（二维坐标系）

直角坐标系是最常用的坐标系类型，它由 x 轴和 y 轴组成，数据点在坐标系中通过 x 和 y 的值来确定位置。

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

// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

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

2. 极坐标系

极坐标系主要用于展示环形图和雷达图等。

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

var option = {
    polar: {
        radius: [0, '75%']
    },
    angleAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    radiusAxis: {
        type: 'value'
    },
    series: [{
        type: 'line',
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

myChart.setOption(option);

3. 地理坐标系

地理坐标系用于展示地图相关的图表。

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

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }, {
            name: '广东',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

myChart.setOption(option);

4. 散点图坐标系

散点图坐标系主要用于展示散点图。

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

var option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [[10, 20], [20, 10], [30, 30]],
        type: 'scatter'
    }]
};

myChart.setOption(option);

坐标轴的设置

坐标轴的设置包括坐标轴的名称、类型、最小值、最大值、分割线等。

xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    boundaryGap: false,
    axisLabel: {
        interval: 0
    },
    axisLine: {
        lineStyle: {
            color: '#57617B'
        }
    }
},
yAxis: {
    type: 'value',
    axisLabel: {
        formatter: '{value}'
    },
    axisLine: {
        lineStyle: {
            color: '#57617B'
        }
    }
},

总结

通过学习 ECharts 的坐标系设置，你可以轻松地绘制出各种类型的图表。掌握坐标系的基本设置和坐标轴的调整，能够让图表更加精准和美观。希望本文能帮助你更好地理解和使用 ECharts。

-- 展开阅读全文 --