Echarts 30分钟入门

echarts 作为一个常用的数据可视化库,功能非常强大,最关键是使用非常简单:传参就行。但作为一个完全没用过echarts的人来说,通过看官方的文档来上手,花时间不说,还不一定看得明白(我地一次看就有点懵)。所以本文的目的就是要让一个完全没用过 echarts 的人在半小时内学会 echarts 的大部分用法。

1. echarts API 设计原则:配置优先,组件化

myChart.setOption(option, true); 

echarts 图表的展示效果都是由 options 决定。options 是一个对象,可以配置图表的各种组件,组件组合后在画布(grid)上展示出来,就生成了图表。

以下是常用的组件配置:

  • 标题组件(title)
  • 图例组件(legend)
  • 画布组件(grid)
  • x坐标轴组件(xAxis)
  • y坐标轴组件(yAxis)
  • 数据(series)
  • 提示框组件(tooltip)

    提示框组件可以设置在多种地方:

  • 全局,即 tooltip

  • 坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
  • 系列中,即 series.tooltip
  • 系列的每个数据项中,即 series.data.tooltip

  • 缩放过滤组件(dataZoom)

  • 坐标轴指示器(axisPointer)

    一般来说,axisPointer 的具体配置项会配置在各个轴中(如 xAxis.axisPointer)或者 tooltip 中(如 tooltip.axisPointer)。但是这几个选项只能配置在全局的 axisPointer 中:axisPointer.triggerOn、axisPointer.link。

多 grid 下的 axisPointer 有很多坑。

  • 工具栏(toolbox)

    内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具

2. echart 图表组成部分,及在 option 中对应的 key

echart组件 echart组件

3. echart 如何把组件合成图表

图表绘制在画布(grid)中,通过组件的 gridIndex 来指定此组件作用于哪个画布(grid)。比如上面的示例图的 option 如下:

4. 一个基本的 option 配置

var legendText = '销量(图例)';
var legendText2 = '图例2';
var legendText3 = '图例Pie图';

var option = {
    /**
     * 标题,包含主标题和副标题
     * 可以配置任意个标题
     */
    title: [
        {
            textAlign: 'center',
            text: '标题1',
            left: 100,
            top: 20,
            link: 'https://www.baidu.com',
            textStyle: {
                fontSize: 12,
                color: '#666666',
            },
            subtext: '副标题1'
        },
        {
            textAlign: 'center',
            text: '标题2',
            left: 400,
            top: 20
        }
    ],

    /**
     * 支持任意个图例
     */
    legend: [
        {
            left: 20,
            bottom: 10,
            data: [{
                name: legendText, // legend.data.name 必须与 series.name 一样
                // 强制设置图形为圆。
                icon: 'circle',
                // 设置文本为红色
                textStyle: {
                    color: 'red'
                }
            }]
        },
        {
            left: 120,
            bottom: 10,
            data: [{
                name: legendText2
            }]
        },
        {
            left: 420,
            bottom: 10,
            data: [{
                name: legendText3
            }]
        }
    ],

    /**
     * 可以认为是图表画布
     */
    grid: [
        {
            x: 80,
            y: 80,
            width: 200,
            height: 200,
            show: true,
            backgroundColor: 'rgb(128, 128, 128)',
        },
        {
            x: 350,
            y: 80,
            width: 300,
            height: 250,
            show: false
        }
    ],
    /**
     * x 轴配置。可以任意个
     */
    xAxis: [
        {
            type: 'category',
            gridIndex: 0, // 这个值很重要,用于指定图表组件属于哪个画布
            data: [
                'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
            ],
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'cross'
                }
            }
        },
        {
            show: false, // 隐藏此 x 轴
            type: 'category',
            gridIndex: 1,
            data: [
                2011, 2012, 2013, 2014, 2015
            ],
            axisPointer: {
                show: true,
                type: 'line',
                label: {
                    show: true,
                    formatter: function (params) {
                        return echarts.format.formatTime('yyyy-MM-dd', params.value);
                    },
                    backgroundColor: '#004E52'
                }
            },
        }
    ],
    /**
     * y 轴配置。可以任意个
     */
    yAxis: [
        {
            type: 'value',
            gridIndex: 0
        },
        {
            type: 'value',
            gridIndex: 1
        },
        {
            type: 'value',
            name: '降水量',
            min: 0,
            max: 250,
            position: 'right',
            gridIndex: 1,
            offset: 10,
            axisLine: {
                lineStyle: {
                    color: 'purple'
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
        }
    ],

    /**
     * 数据配置。可以任意个
     */
    series: [
        {
            name: legendText,
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [
                120, 200, 150, 80, 70, 110, 130
            ],
            type: 'bar',
        },
        {
            name: legendText2,
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [
                120, 200, 150, 80, 70
            ],
            type: 'line'
        },
        {
            name: legendText3,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [
                {
                    value: 120,
                    tooltip: {
                        trigger: 'item',
                        showContent: true,
                        formatter: function (params) {
                            return `${params.name}:${params.value}`;
                        },
                        position: ['center', 'center']
                    },
                },
                {
                    value: 200
                },
                {
                    value: 150
                },
                {
                    value: 80
                },
                {
                    value: 70
                }
            ],
            type: 'bar'
        }
    ],

    /**
     * 工具栏:内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具
     */
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    /**
     * 在 option 根上要声明 tooltip 才能启用 series.tooltip/series.data[i].tooltip
     * 为每个gird配置特定tooltip方法:
     * 1. 先在 option 根配置: tooltip: {showContent: false}
     * 2. 在特定series.data配置 tooltip: { trigger: 'item', showContent: true, formatter: function() {} }
     */
    tooltip: {showContent: false}
};

5. 小结

本文主要围绕 echarts 的配置项来介绍了 echarts 的入门知识,希望对大家有用,以上。

留言列表

    发表评论: