正文

掌握echarts图表，从配置选项开始：一图看懂各类图表设置技巧

/0 浏览量
0918

在数字化时代，数据可视化成为展示和分析信息的重要手段。ECharts 作为一款强大的开源 JavaScript 数据可视化库，因其易用性和丰富的图表类型，被广泛应用于各种场景。要想充分利用 ECharts 的强大功能，首先需要了解其配置选项。本文将通过一张图表，帮助您快速掌握各类图表的设置技巧。

1. 基础配置

在开始之前，我们需要设置 ECharts 的基本配置，包括图表类型、容器 DOM、全局配置等。

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. 饼图

饼图用于展示部分与整体的关系。

  • radius: 半径，可以设置为 '50%' 或具体的像素值。
  • center: 图表中心位置。
option = {
    // ... 其他配置
    series: [{
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            // ...
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

3. 折线图

折线图用于显示数据的变化趋势。

  • smooth: 是否平滑曲线。
  • symbol: 图表上的点标记。
option = {
    // ... 其他配置
    series: [{
        type: 'line',
        smooth: true,
        symbol: 'none', // 不显示点标记
        data: [10, 20, 30, 40, 50]
    }]
};

4. 柱状图

柱状图适合对比多个类别的数据。

  • barWidth: 柱形的宽度。
option = {
    // ... 其他配置
    series: [{
        type: 'bar',
        barWidth: 30,
        data: [10, 20, 30, 40, 50]
    }]
};

5. 散点图

散点图用于展示两个变量的关系。

  • symbolSize: 图形的大小。
option = {
    // ... 其他配置
    series: [{
        type: 'scatter',
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.07, 6.95],
            // ...
        ]
    }]
};

6. 3D 图表

ECharts 也支持 3D 图表，如散点图和柱状图。

  • view3D: 启用 3D 视图。
option = {
    // ... 其他配置
    grid3D: {
        viewControl: {
            enable: true,
            alpha: 10,
            beta: 40
        }
    },
    series: [{
        type: 'scatter3D',
        data: [
            [10.0, 8.04, 5.0],
            [8.07, 6.95, 6.0],
            // ...
        ]
    }]
};

通过这张图表，您应该能够快速掌握 ECharts 的各类图表设置技巧。当然，ECharts 的功能远不止这些，建议您在官方文档中深入学习和实践，以便更好地利用这款强大的数据可视化工具。

-- 展开阅读全文 --