xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/testHelper.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            .test-title {
                background: rgb(97, 17, 97);
            }
            .test-chart {
                height: 400px;
            }
        </style>


        <div id="specify-dimensions"></div>
        <div id="key-columns"></div>
        <div id="category-no-encode-two-value-axis"></div>
        <div id="category-no-axis-data-multi"></div>
        <div id="category-no-encode-no-axis-data-single"></div>
        <div id="category-no-encode-has-axis-data"></div>
        <div id="category"></div>
        <div id="two-value-axes"></div>
        <div id="empty-data"></div>
        <div id="dynamic-category"></div>
        <div id="dynamic-time"></div>


        <script>
            var keyColumnsDrink = {
                'product': ['2012', '2013', '2014', '2015', '2016', '2017'],
                'Matcha Latte': [41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                'Milk Tea': [86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                'Cheese Cocoa': [24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                'Walnut Brownie': [55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            };
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var source = [
                    [21, 120, 220, 150, 320, 820],
                    [31, 132, 182, 232, 332, 932],
                    [41, 101, 191, 201, 301, 901],
                    [51, 134, 234, 154, 334, 934],
                    [61, 90, 290, 190, 309, 1290],
                    [71, 230, 330, 330, 330, 1330],
                    [81, 210, 310, 410, 320, 1320]
                ];

                var option = {
                    legend: {},
                    tooltip: {trigger: 'axis'},
                    grid: {},
                    xAxis: {},
                    yAxis: {},
                    dataZoom: [{}, {type: 'inside'}],
                    dataset: [{
                        dimensions: ['G', 'H', 'I', 'Q', 'R'],
                        // sourceHeader: true,
                        source: source
                    }],
                    series: [
                        {type:'scatter', label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'}, dimensions: ['cccccccccc', 'ddddddddddd']},
                        {type:'scatter', label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'}},
                        {type:'scatter', label: {show: true, position: 'top', textBorderWidth: 2, textBorderColor: '#fff'}, sourceHeader: true}
                    ]
                };
                testHelper.create(echarts, 'specify-dimensions', {
                    title: 'speify dimensions',
                    dataTable: source,
                    option: option,
                    info: {
                        dimensions: option.dataset[0].dimensions,
                        serise: option.series
                    }
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var option = {
                    legend: {},
                    tooltip: {trigger: 'axis'},
                    grid: {},
                    xAxis: {type: 'category'},
                    yAxis: {},
                    dataset: [{
                        source: keyColumnsDrink
                    }],
                    series: [
                        {type:'line'},
                        {type:'line'},
                        {type:'line'}
                    ]
                };
                testHelper.create(echarts, 'key-columns', {
                    title: 'category: no encode declared, two value axis',
                    dataTable: keyColumnsDrink,
                    option: option
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var source = [
                    [21, 120, 220, 150, 320, 820],
                    [21, 132, 182, 232, 332, 932],
                    [21, 101, 191, 201, 301, 901],
                    [21, 134, 234, 154, 334, 934],
                    [21, 90, 290, 190, 309, 1290],
                    [21, 230, 330, 330, 330, 1330],
                    [21, 210, 310, 410, 320, 1320]
                ];
                var option = {
                    legend: {
                        data: ['A', 'B', 'C']
                    },
                    tooltip: {trigger: 'axis'},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {},
                    yAxis: {},
                    dataset: [{
                        source: source
                    }],
                    series: [
                        {
                            name:'A',
                            type:'line',
                        },
                        {
                            name:'B',
                            type:'line',
                        },
                        {
                            name:'C',
                            type:'line',
                        }
                    ]
                };
                testHelper.create(echarts, 'category-no-encode-two-value-axis', {
                    title: 'category: no encode declared, two value axis',
                    option: option,
                    dataTable: source
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var source = [
                    ['周一', 120, '苹果', 150, 320, 820],
                    ['周二', 132, '狸猫', 232, 332, 932],
                    ['周三', 101, '周一', 201, 301, 901],
                    ['周四', 134, '周八', 154, 334, 934],
                    ['周五', 90, '周六', 190, 309, 1290],
                    ['周六', 230, '-', 330, 330, 1330],
                    ['周日', 210, '周日', 410, 320, 1320]
                ];
                var option = {
                    legend: {
                        data:[
                            '{x: 0, y: 1}',
                            '{x: 2, y: 3}',
                            '{x: 2, y: 4}',
                            '{x: 1, y: 2}',
                            '{x: 2, y: 0}'
                        ]
                    },
                    tooltip: {trigger: 'axis'},
                    grid: {
                        bottom: 70
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false
                    }],
                    dataZoom: {
                        type: 'slider'
                    },
                    yAxis: [{
                        type: 'value'
                    }, {
                        type: 'category'
                    }],
                    dataset: [{
                        source: source
                    }, {
                        source: [
                            [122, '第二个 dataset', 44],
                            [56, '周六', 10],
                            [96, '狸猫', 112]
                        ]
                    }],
                    series: [
                        {
                            name:'{x: 0, y: 1}',
                            type:'line',
                            encode: {x: 0, y: 1}
                        },
                        {
                            name:'{x: 2, y: 3}',
                            type:'line',
                            encode: {x: 2, y: 3}
                        },
                        {
                            name:'{x: 2, y: 4}',
                            type:'line',
                            encode: {x: 2, y: 4}
                        },
                        {
                            name:'{x: 1, y: 2}',
                            type:'line',
                            encode: {x: 1, y: 2},
                            datasetIndex: 1
                        },
                        {
                            name: '{x: 2, y: 0}',
                            type: 'scatter',
                            yAxisIndex: 1,
                            symbolSize: function (val) {
                                return val[5] / 30;
                            },
                            encode: {x: 2, y: 0}
                        }
                    ]
                };

                testHelper.create(echarts, 'category-no-axis-data-multi', {
                    title: 'category: no axis.data, multi category',
                    dataTable: source,
                    option: option
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var source = [
                    ['周一', 120, 220, 150, 320, 820],
                    ['周二', 132, 182, 232, 332, 932],
                    ['周三', 101, 191, 201, 301, 901],
                    ['周四', 134, 234, 154, 334, 934],
                    ['周五', 90, 290, 190, 309, 1290],
                    ['周六', 230, 330, 330, 330, 1330],
                    ['周日', 210, 310, 410, 320, 1320]
                ];
                var option = {
                    legend: {
                        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                    },
                    tooltip: {trigger: 'axis'},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    dataset: {
                        source: source
                    },
                    series: [
                        {
                            name:'邮件营销',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'联盟广告',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'视频广告',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'直接访问',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'搜索引擎',
                            type:'line',
                            stack: '总量',
                            label: {show: true},
                            areaStyle: {normal: {}}
                        }
                    ]
                };

                testHelper.create(echarts, 'category-no-encode-no-axis-data-single', {
                    title: 'category: no encode declared, no axis.data, single category',
                    dataTable: source,
                    option: option
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var source = [
                    ['周一', 120, 220, 150, 320, 820],
                    ['周二', 132, 182, 232, 332, 932],
                    ['周三', 101, 191, 201, 301, 901],
                    ['周四', 134, 234, 154, 334, 934],
                    ['周五', 90, 290, 190, 309, 1290],
                    ['周六', 230, 330, 330, 330, 1330],
                    ['周日', 210, 310, 410, 320, 1320]
                ];
                var option = {
                    legend: {
                        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                    },
                    tooltip: {trigger: 'axis'},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周零', '周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    dataset: {
                        source: source
                    },
                    series: [
                        {
                            name:'邮件营销',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'联盟广告',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'视频广告',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'直接访问',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}}
                        },
                        {
                            name:'搜索引擎',
                            type:'line',
                            stack: '总量',
                            label: {show: true},
                            areaStyle: {normal: {}}
                        }
                    ]
                };
                testHelper.create(echarts, 'category-no-encode-has-axis-data', {
                    title: 'category: no encode declared, axis.data given',
                    dataTable: source,
                    option: option
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var source = [
                    ['周一', 120, 220, 150, 320, 820],
                    ['周二', 132, 182, 232, 332, 932],
                    ['周三', 101, 191, 201, 301, 901],
                    ['周四', 134, 234, 154, 334, 934],
                    ['周五', 90, 290, 190, 309, 1290],
                    ['周六', 230, 330, 330, 330, 1330],
                    ['周日', 210, 310, 410, 320, 1320]
                ];
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    dataset: {
                        source: source
                    },
                    series: [
                        {
                            name:'邮件营销',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            encode: {x: 0, y: 1}
                        },
                        {
                            name:'联盟广告',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            encode: {x: 0, y: 2}
                        },
                        {
                            name:'视频广告',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            encode: {x: 0, y: 3}
                        },
                        {
                            name:'直接访问',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            encode: {x: 0, y: 4}
                        },
                        {
                            name:'搜索引擎',
                            type:'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {normal: {}},
                            encode: {x: 0, y: 5}
                        }
                    ]
                };
                testHelper.create(echarts, 'category', {
                    title: 'category: encode declared',
                    dataTable: source,
                    option: option
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var source = [
                    ['周一', 120, 220, 150, 320, 820],
                    ['周二', 132, 182, 232, 332, 932],
                    ['周三', 101, 191, 201, 301, 901],
                    ['周四', 134, 234, 154, 334, 934],
                    ['周五', 90, 290, 190, 309, 1290],
                    ['周六', 230, 330, 330, 330, 1330],
                    ['周日', 210, 310, 410, 320, 1320]
                ];
                var option = {
                    tooltip: {
                    },
                    legend: {
                        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {},
                    yAxis: {},
                    grid: {
                        right: 50,
                        bottom: 70
                    },
                    legend: {
                        left: 'center',
                        data: ['A Series', 'B Series']
                    },
                    dataZoom: [{
                        xAxisIndex: 0,
                        type: 'inside'
                    }, {
                        yAxisIndex: 0,
                        type: 'inside'
                    }, {
                        xAxisIndex: 0,
                        type: 'slider'
                    }, {
                        yAxisIndex: 0,
                        type: 'slider'
                    }],
                    dataset: {
                        source: source
                    },
                    series: [
                        {
                            name:'A Series',
                            type:'scatter',
                            areaStyle: {normal: {}},
                            encode: {x: 2, y: 1}
                        },
                        {
                            name:'B Series',
                            type:'scatter',
                            areaStyle: {normal: {}},
                            encode: {x: 4, y: 1}
                        }
                    ]
                };
                testHelper.create(echarts, 'two-value-axes', {
                    title: 'two value axes (A: {x: 2, y: 1}, B: {x: 4, y: 1})',
                    dataTable: source,
                    option: option
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    xAxis: {},
                    yAxis: {},
                    series: [
                        {
                            type:'line'
                        }
                    ]
                };

                testHelper.create(echarts, 'empty-data', {
                    title: 'data and dataset undefined, only axis shown.',
                    option: option
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var option = {
                    legend: {},
                    tooltip: {trigger: 'axis'},
                    xAxis: {type: 'category'},
                    yAxis: {},
                    series: [
                        {type:'line', encode: {x: 'date', y: 'Matcha Latte', itemId: 'date'}},
                        {type:'line', encode: {x: 'date', y: 'Milk Tea', itemId: 'date'}},
                        {type:'line', encode: {x: 'date', y: 'Cheese Cocoa', itemId: 'date'}},
                        {type:'line', encode: {x: 'date', y: 'Walnut Brownie', itemId: 'date'}}
                    ]
                };

                var baseSource = [
                    ['date', 'Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
                    ['2012-03-01', 11.1, 40.4, 65.1, 13.3],
                    ['2012-03-02', 36.5, 52.1, 85.7, 23.1],
                    ['2012-03-03', 64.1, 17.2, 99.5, 16.4],
                    ['2012-03-04', 15.2, 77.1, 29.2, 62.4],
                    ['2012-03-05', 55.4, 73.1, 49.2, 22.9],
                    ['2012-03-06', 35.2, 27.1, 24.6, 92.7],
                    ['2012-03-07', 51.7, 57.1, 89.1, 69.2]
                ];
                var lastDate = +echarts.number.parseDate('2012-03-07');

                var chart = testHelper.create(echarts, 'dynamic-category', {
                    title: 'dynamic-category',
                    dataTable: keyColumnsDrink,
                    option: option,
                    info: baseSource
                });

                if (chart) {
                    setInterval(function () {
                        lastDate += 3600 * 24 * 1000;

                        baseSource.push([
                            echarts.format.formatTime('yyyy-MM-dd', lastDate),
                            +(Math.random() * 100).toFixed(1),
                            +(Math.random() * 100).toFixed(1),
                            +(Math.random() * 100).toFixed(1),
                            +(Math.random() * 100).toFixed(1)
                        ]);

                        baseSource.splice(1, 1);

                        chart.setOption({
                            dataset: {
                                source: baseSource
                            }
                        });
                    }, 1000);
                }

            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var option = {
                    legend: {},
                    tooltip: {trigger: 'axis'},
                    xAxis: {type: 'time'},
                    yAxis: {},
                    series: [
                        {type:'line', encode: {x: 'date', y: 'Matcha Latte', itemId: 'date'}},
                        {type:'line', encode: {x: 'date', y: 'Milk Tea', itemId: 'date'}},
                        {type:'line', encode: {x: 'date', y: 'Cheese Cocoa', itemId: 'date'}},
                        {type:'line', encode: {x: 'date', y: 'Walnut Brownie', itemId: 'date'}}
                    ]
                };

                var baseSource = [
                    ['date', 'Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
                    ['2012-03-01', 11.1, 40.4, 65.1, 13.3],
                    ['2012-03-02', 36.5, 52.1, 85.7, 23.1],
                    ['2012-03-03', 64.1, 17.2, 99.5, 16.4],
                    ['2012-03-04', 15.2, 77.1, 29.2, 62.4],
                    ['2012-03-05', 55.4, 73.1, 49.2, 22.9],
                    ['2012-03-06', 35.2, 27.1, 24.6, 92.7],
                    ['2012-03-07', 51.7, 57.1, 89.1, 69.2]
                ];
                var lastDate = +echarts.number.parseDate('2012-03-07');

                var chart = testHelper.create(echarts, 'dynamic-time', {
                    title: 'dynamic-time',
                    dataTable: keyColumnsDrink,
                    option: option,
                    info: baseSource
                });

                if (chart) {
                    setInterval(function () {
                        lastDate += 3600 * 24 * 1000;

                        baseSource.push([
                            echarts.format.formatTime('yyyy-MM-dd', lastDate),
                            +(Math.random() * 100).toFixed(1),
                            +(Math.random() * 100).toFixed(1),
                            +(Math.random() * 100).toFixed(1),
                            +(Math.random() * 100).toFixed(1)
                        ]);

                        baseSource.splice(1, 1);

                        chart.setOption({
                            dataset: {
                                source: baseSource
                            }
                        });
                    }, 1000);
                }

            });
        </script>


    </body>
</html>