js/cheat-sheet.js

var $chart = $('#cheat-chart');
var width = $chart.width();
var heightRatio = width > 400 ? 0.5 : 1.5;
var height = width * heightRatio;
var maxWidth = 848;
$chart.height(height);

var highlightFill = 'rgba(132, 181, 228, 0.5)';

var grid = {
    left: 60,
    top: 100,
    bottom: 70,
    right: 100
};
grid.width = width - grid.left - grid.right;
grid.height = height - grid.top - grid.bottom;

var xScale = grid.width / (maxWidth - grid.left - grid.right);
var yScale = grid.height / (maxWidth * heightRatio - grid.top - grid.bottom);

var chart;
var option;

var $detail = $('#cheat-detail');

var selectedRegion = null;
$(window).click(function (e) {
    // When click outside of chart or detail area, cancel selection
    if (e.target !== $('#cheat-chart canvas')[0]
        && $(e.target).closest($('#cheat-detail')).length < 1
    ) {
        selectedRegion = null;
        _doUnhighlight(option.graphic.elements, true);
        chart.setOption(option);
    }
});

var baseOption = {
    title: {
        text: '图表的标题',
        left: 5,
        top: 5
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        silent: true,
        renderMode: 'richText'
    },
    toolbox: {
        right: 15,
        top: 5,
        feature: {
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    visualMap: {
        inRange: {
            symbolSize: [5, 20],
            color: ['#2F4554', '#C23431']
        },
        min: 0,
        max: 25,
        seriesIndex: 2,
        left: 80,
        top: 80,
        itemWidth: 20,
        itemHeight: 80,
        calculable: true
    },
    dataZoom: {
        type: 'slider',
        show: true,
        yAxisIndex: 1
    },
    legend: {
        data: ['蒸发量', '降水量', '平均温度'],
        top: 35,
        left: 5
    },
    grid: grid,
    xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }],
    yAxis: [{
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [{
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            silent: true
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            silent: true
        },
        {
            name: '平均温度',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            silent: true,
            symbol: 'circle',
            markPoint: {
                data: [{
                    coord: ['4月', 5],
                    value: '5℃'
                }]
            }
        }
    ],
    graphic: {
        elements: [{
            type: 'sector',
            position: [220, 140],
            shape: {
                r: 50,
                r0: 20,
                cx: 0,
                cy: 0,
                startAngle: 0,
                endAngle: Math.PI * 1.2
            },
            style: {
                fill: '#C23431'
            }
        }, {
            type: 'text',
            position: [210, 120],
            style: {
                text: '绘制图形和文字',
                fill: '#2F4554',
                font: '14px Arial'
            }
        }]
    },
    timeline: {
        data: [
            '2010', '2011', '2012', '2013', '2014', '2015', '2016'
        ],
        axisType: 'category',
        show: true,
        autoPlay: false
    }
};

var baseActions = [{
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 7,
    position: [width * 0.65, height * 0.45]
}];

var regions = [{
    left: grid.left,
    top: grid.top,
    width: grid.width,
    height: grid.height,
    option: {
        id: 'grid',
        desc: '直角坐标系内绘图区域'
    }
}, {
    group: (function () {
        var group = [];
        for (var i = 0; i < 12; ++i) {
            group.push({
                left: grid.left + grid.width / 12 * (i + 0.05),
                bottom: grid.bottom,
                width: grid.width / 12 * 0.9,
                height: grid.height / 25 * baseOption.series[2].data[i] + 10
            });
        }
        return group;
    })(),
    option: {
        id: 'series.itemStyle',
        desc: '系列的图形样式，对不同类型的图表有不同的意义。\n对折线图而言，这个配置项用于设置拐点处图形的样式；对柱状图而言，用于设置柱子的样式。该配置项是对整个系列的图形做设置，如果要对其中的某一个特定数据点做设置，应使用 <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>。'
    }
}, {
    left: 10,
    top: 5,
    width: 100,
    height: 24,
    option: {
        id: 'title',
        desc: '图表的标题'
    }
}, {
    left: 10,
    top: 35,
    width: 238,
    height: 24,
    option: {
        id: 'legend',
        desc: '图例，展现了不同系列的标记、颜色和名字'
    }
}, {
    right: 15,
    top: 5,
    width: 133,
    height: 29,
    option: {
        id: 'toolbox',
        desc: '工具栏，提供操作图表的工具，可自定义'
    }
}, {
    left: 5,
    top: grid.top - 35,
    width: 70,
    height: grid.height + 40,
    option: {
        id: 'yAxis',
        desc: '直角坐标系 grid 中的 y 轴'
    }
}, {
    left: grid.left - 3,
    top: grid.top,
    width: 6,
    height: grid.height,
    option: {
        id: 'yAxis.axisLine',
        desc: 'y 轴轴线'
    }
}, {
    left: grid.left + grid.width - 15,
    top: grid.top - 35,
    width: 60,
    height: grid.height + 40,
    option: {
        id: 'yAxis',
        desc: '直角坐标系 grid 中的 y 轴；第二个 y 轴默认显示在右边'
    }
}, {
    left: grid.width + grid.left - 3,
    top: grid.top,
    width: 6,
    height: grid.height,
    option: {
        id: 'yAxis.axisLine',
        desc: 'y 轴轴线'
    }
}, {
    group: [{
        left: grid.left + grid.width - 20,
        top: grid.top - 30,
        width: 40,
        height: 20
    }, {
        left: 38,
        top: grid.top - 30,
        width: 40,
        height: 20
    }],
    option: {
        id: 'yAxis.name',
        desc: 'y 轴名称，可以通过<code>nameLocation</code>改变位置'
    }
}, {
    group: (function () {
        var group = [];
        for (var i = 0; i < 6; ++i) {
            group.push({
                left: 11,
                top: grid.top + grid.height / 5 * i - 9,
                width: 42,
                height: 18
            });
        }
        for (var i = 0; i < 6; ++i) {
            group.push({
                left: grid.left + grid.width,
                top: grid.top + grid.height / 5 * i - 9,
                width: 42,
                height: 18
            });
        }
        return group;
    })(),
    option: {
        id: 'yAxis.axisLabel',
        desc: '坐标轴刻度标签'
    }
}, {
    group: (function () {
        var group = [];
        for (var i = 0; i < 5; ++i) {
            group.push({
                left: grid.left,
                top: grid.top + grid.height / 5 * i - 3,
                width: width - grid.left - grid.right,
                height: 6
            });
        }
        return group;
    })(),
    option: {
        id: 'yAxis.splitLine',
        desc: '坐标轴分割线，除此之外，还有 <code>splitArea</code> 设置背景色分割'
    }
}, {
    group: (function () {
        var group = [];
        for (var i = 0; i < 6; ++i) {
            group.push({
                left: 50,
                top: grid.top + grid.height / 5 * i - 5,
                width: 10,
                height: 10
            });
        }
        for (var i = 0; i < 6; ++i) {
            group.push({
                left: grid.left + grid.width,
                top: grid.top + grid.height / 5 * i - 5,
                width: 10,
                height: 10
            });
        }
        return group;
    })(),
    option: {
        id: 'yAxis.axisTick',
        desc: '坐标轴刻度'
    }
}, {
    left: grid.left,
    bottom: grid.bottom - 3,
    width: grid.width,
    height: 6,
    option: {
        id: 'xAxis',
        desc: '直角坐标系 grid 中的 x 轴'
    }
}, {
    left: grid.left,
    bottom: grid.bottom - 3,
    width: grid.width,
    height: 6,
    option: {
        id: 'xAxis.axisLine',
        desc: 'x 轴轴线'
    }
}, {
    group: (function () {
        var group = [];
        for (var i = 0; i < 12; ++i) {
            group.push({
                left: grid.left + grid.width * (i + 0.5) / 12 - 20 * xScale,
                bottom: grid.bottom - 25,
                width: 40 * xScale,
                height: 20
            });
        }
        return group;
    })(),
    option: {
        id: 'xAxis.axisLabel',
        desc: '坐标轴刻度标签'
    }
}, {
    group: (function () {
        var group = [];
        for (var i = 0; i < 13; ++i) {
            group.push({
                left: grid.left + grid.width * (i / 12) - 5,
                bottom: grid.bottom - 5,
                width: 10,
                height: 10
            });
        }
        return group;
    })(),
    option: {
        id: 'xAxis.axisTick',
        desc: '坐标轴刻度'
    }
}, {
    left: width * 0.65 - 5,
    top: height * 0.45 - 5,
    width: 118,
    height: 80,
    option: {
        id: 'tooltip',
        desc: '提示框'
    }
}, {
    left: grid.width / 12 * 7.5 + grid.left - 3,
    top: grid.top,
    width: 6,
    height: grid.height,
    option: {
        id: 'tooltip.axisPointer.lineStyle',
        desc: '提示框坐标轴指示器的线条样式'
    }
}, {
    left: grid.left,
    bottom: grid.height / 250 * 162.2 + grid.bottom - 4,
    width: grid.width,
    height: 6,
    option: {
        id: 'tooltip.axisPointer.crossStyle',
        desc: '提示框坐标轴指示器的十字线样式'
    }
}, {
    group: [{
        left: 5,
        bottom: grid.height / 250 * 162.2 + grid.bottom - 10,
        width: 50,
        height: 20
    }, {
        left: width - grid.right + 3,
        bottom: grid.height / 250 * 162.2 + grid.bottom - 10,
        width: 43,
        height: 20
    }, {
        left: grid.width / 12 * 7.5 + grid.left - 16,
        bottom: grid.bottom - 24,
        width: 32,
        height: 20
    }],
    option: {
        id: 'tooltip.axisPointer.label',
        desc: '提示框坐标轴指示器的文字'
    }
}, {
    left: baseOption.visualMap.left,
    top: baseOption.visualMap.top,
    width: 60,
    height: 110,
    option: {
        id: 'visualMap',
        desc: '视觉映射，可以将数据值映射到图形的形状、大小、颜色等。\n除了这个例子中连续型的视觉映射之外，还有<a href="option.html#series-line.data.itemStyle" target="_blank">离散型的视觉映射</a>。'
    }
}, {
    group: [{
        left: baseOption.visualMap.left + 20,
        top: baseOption.visualMap.top,
        width: 40,
        height: 20
    }, {
        left: baseOption.visualMap.left + 20,
        top: baseOption.visualMap.top + 90,
        width: 40,
        height: 20
    }],
    option: {
        id: 'visualMap.calculable',
        desc: '是否显示拖拽用的手柄（手柄能拖拽调整选中范围）'
    }
}, {
    right: 5,
    top: grid.top - 5,
    height: grid.height + 12,
    width: 34,
    option: {
        id: 'dataZoom',
        desc: '区域缩放，用来放大一部分的数据，以看清细节'
    }
}, {
    left: 160,
    top: 105,
    width: 150,
    height: 90,
    option: {
        id: 'graphic',
        desc: '绘制图形元素，包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group 等'
    }
}, {
    left: 150,
    top: grid.top + grid.height + 20,
    width: grid.width - 120,
    height: 45,
    option: {
        id: 'timeline',
        desc: '多个 option 切换，展现不同时间段的数据'
    }
}, {
    left: grid.left + grid.width / 12 * 3,
    width: grid.width / 12,
    bottom: grid.bottom + grid.height / 5,
    height: 50,
    option: {
        id: 'series.markPoint',
        desc: '标记点。\n除此之外，还可以用 <code>markLine</code> 设置标记线，<code>markArea</code> 设置标记区域'
    }
}];

setSheet(baseOption, baseActions, regions);

function setSheet(baseOption, actions, regions) {
    getBaseChart(width, height, baseOption, actions, function (baseImage) {
        chart = echarts.init($chart[0]);

        option = {
            graphic: {
            }
        };

        var elements = [];

        var createRect = function (region, regionId, group) {
            return {
                type: 'rect',
                left: region.left,
                top: region.top,
                right: region.right,
                bottom: region.bottom,
                shape: {
                    width: region.width,
                    height: region.height
                },
                style: {
                    fill: 'transparent',
                    stroke: 'transparent'
                },
                onmouseover: function () {
                    highlight(chart, elements, regionId, option, group || region);
                },
                onmouseout: function () {
                    unhighlightAll(chart, elements, option);
                    if (selectedRegion) {
                        setDetailHtml(selectedRegion.option);
                    }
                },
                onclick: function (e) {
                    // Selecting region
                    if (selectedRegion) {
                        _doUnhighlight(elements, true);
                    }
                    selectedRegion = group || region;
                    highlight(chart, elements, regionId, option, group || region, true);
                    e.event.stopPropagation();
                }
            };
        };

        for (var i = 0; i < regions.length; ++i) {
            var shape;
            if (regions[i].group) {
                var group = regions[i].group;
                shape = {
                    type: 'group',
                    children: [],
                    width: '100%',
                    height: '100%'
                };
                for (var g = 0; g < group.length; ++g) {
                    var rect = createRect(group[g], i, regions[i]);
                    shape.children.push(rect);
                }
            }
            else {
                shape = createRect(regions[i], i);
            }
            elements.push(shape);
        }

        elements.push({
            type: 'image',
            style: {
                image: baseImage,
                width: width,
                height: height
            },
            silent: true,
            z: -1
        });

        option.graphic.elements = elements;

        chart.setOption(option);
    });
}

function getBaseChart(width, height, option, actions, callback) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var chart = echarts.init(canvas, null, {
        devicePixelRatio: 2
    });
    option.animation = false;
    option = {
        baseOption: option
    };
    chart.setOption(option);

    for (var i = 0; actions && i < actions.length; ++i) {
        chart.dispatchAction(actions[i]);
    }

    if (typeof callback === 'function') {
        setTimeout(function () {
            callback(canvas.toDataURL());
        }, 10);
    }
}

function highlight(chart, elements, highlightIndex, option, region, isSelect) {
    setDetailHtml(region.option);

    if (!isSelect) {
        _doUnhighlight(elements);
    }

    if (elements[highlightIndex].type === 'group') {
        var children = elements[highlightIndex].children;
        for (var i = 0; i < children.length; ++i) {
            if (isSelect) {
                children[i].style.stroke = '#24c';
            }
            else {
                children[i].style.fill = highlightFill;
            }
        }
    }
    else {
        if (isSelect) {
            elements[highlightIndex].style.stroke = '#24c';
        } else {
            elements[highlightIndex].style.fill = highlightFill;
        }
    }
    chart.setOption(option);
}

function unhighlightAll(chart, elements, option) {
    $detail.text('');
    _doUnhighlight(elements);
    chart.setOption(option);
}

function _doUnhighlight(elements, isSelect) {
    for (var i = 0; i < elements.length; ++i) {
        if (elements[i].type === 'rect') {
            elements[i].style.fill = 'transparent';
            if (isSelect) {
                elements[i].style.stroke = 'transparent';
            }
        }
        else if (elements[i].type === 'group') {
            var children = elements[i].children;
            for (var j = 0; j < children.length; ++j) {
                children[j].style.fill = 'transparent';
                if (isSelect) {
                    children[j].style.stroke = 'transparent';
                }
            }
        }
    }
}

function setDetailHtml(option) {
    var link = option.id;
    switch (link) {
        case 'series.itemStyle':
            link = 'series-line.itemStyle';
            break;

        case 'dataZoom.handleStyle':
            link = 'dataZoom-slider.handleStyle';
            break;

        case 'series.markPoint':
            link = 'series-line.markPoint';
            break;
    }

    var html = [
        '<h3>',
            option.id,
        '</h3>',
        '<p class="desc">点击图形固定说明文字</p>',
        '<p>',
            option.desc.split('\n').join('</p><p>'),
        '</p>',
        '<p>',
            '<a href="./option.html#' + link + '" target="_blank">',
                '查看配置项手册',
            '</a>',
        '</p>'
    ].join('');

    $detail.html(html);
}