Echarts

官网

官网示例

图表类型

只列举一部分

图表	type值	是否支持dataset
折线图	line	是
柱状图	bar	是
饼图	pie	是
散点图	scatter	是
地理坐标/地图	map	是
K线图	candlestick	是
雷达图	radar	否
盒须图	boxplot	否
热力图	heatmap	否
关系图	graph	否
路径图	lines	否
树图	tree	否
矩形树图	treemap	否
旭日图	sunburst	否
平行坐标系	parallel	是
桑基图	sankey	否
漏斗图	funnel	是
仪表盘	gauge	否
象形柱图	pictorialBar	否
主题河流图	themeRiver	否
日历坐标系	calendar	否
自定义系列	custom	是

encode格式

全局支持属性

// 在任何坐标系和系列中，都支持：
encode: {
    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
    tooltip: ['product', 'score']
    // 使用第一个维度和第三个维度的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
    seriesName: [1, 3],
    // 表示使用第二个维度中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
    itemId: 2,
    // 指定数据项的名称使用第三个维度在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
    itemName: 3,
    // 指定数据项的组 ID (groupId)。当全局过渡动画功能开启时，setOption 前后拥有相同 groupId 的数据项会进行动画过渡。
    itemGroupId: 4,
    // 指定数据项对应的子数据组 ID (childGroupId)，用于实现多层下钻和聚合。详见 childGroupId。
    // 从 v5.5.0 开始支持
    itemChildGroupId: 5
}

直角坐标系

// 直角坐标系（grid/cartesian）特有的属性：
encode: {
    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
    x: [1, 5, 'score'],
    // 把“维度0”映射到 Y 轴。
    y: 0
}

单轴特有

// 单轴（singleAxis）特有的属性：
encode: {
    single: 3
}

地理坐标系

// 地理坐标系（geo）特有的属性：
encode: {
    lng: 3,
    lat: 2
}

其他属性

// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
    value: 3
}

自定义系列

特殊地，在 自定义系列（custom series） 中，encode 中轴可以不指定或设置为 null/undefined，从而使系列免于受这个轴控制，也就是说，轴的范围（extent）不会受此系列数值的影响，轴被 dataZoom 控制时也不会过滤掉这个系列：

var option = {
    xAxis: {},
    yAxis: {},
    dataZoom: [{
        xAxisIndex: 0
    }, {
        yAxisIndex: 0
    }],
    series: {
        type: 'custom',
        renderItem: function (params, api) {
            return {
                type: 'circle',
                shape: {
                    cx: 100, // x 位置永远为 100
                    cy: api.coord([0, api.value(0)])[1],
                    r: 30
                },
                style: {
                    fill: 'blue'
                }
            };
        },
        encode: {
            // 这样这个系列就不会被 x 轴以及 x
            // 轴上的 dataZoom 控制了。
            x: -1,
            y: 1
        },
        data: [ ... ]
    }
};

折线图(line)

{
    series: [
        {
            type: 'line',
            encode: {
                x: ['attr1'],
                y: ['attr2']
            }
        }
    ]
}

柱状图(bar)

{
    series: [
        {
            type: 'bar',
            encode: {
                x: ['attr1'],
                y: ['attr2']
            }
        }
    ]
}

散点图(scatter)

{
    series: [
        {
            type: 'scatter',
            encode: {
                x: ['attr1'],
                y: ['attr2']
            }
        }
    ]
}

K线图(candlestick)

{
    series: [
        {
            type: 'candlestick',
            encode: {
                x: 'date',
                y: {
                    open: 'attr1',
                    close: 'attr2',
                    high: 'attr3',
                    low: 'attr4'
                }
            }
        }
    ]
}