area-stack.html

<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
        <meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
    </head>
    <body>
        <style>
            .test-title {
                background: #146402;
                color: #fff;
            }
        </style>

        <div id="main0"></div>
        <div id="main1"></div>


        <script>

            require([
                'echarts'
            ], function (echarts) {

                var chart = echarts.init(document.getElementById('main0'));

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];
                var data4 = [];
                var data5 = [];
                var data6 = [];

                xAxisData.push('类目' + -1);
                data1.push('-');
                data2.push('-');
                data3.push('-');
                data4.push('-');
                data5.push('-');
                data6.push('-');

                for (var i = 0; i < 5; i++) {
                    xAxisData.push('类目' + i);
                    data1.push((-Math.random() - 0.2).toFixed(3));
                    data2.push((Math.random() + 0.3).toFixed(3));
                    data3.push((Math.random() + 0.2).toFixed(3));
                    data4.push((-Math.random() - 0.2).toFixed(3));
                    data5.push((-Math.random() - 0.2).toFixed(3));
                    data6.push((Math.random() + 0.2).toFixed(3));
                }

                xAxisData.push('类目' + i);
                data1.push('-');
                data2.push('-');
                data3.push('-');
                data4.push('-');
                data5.push('-');
                data6.push('-');

                for (; i < 10; i++) {
                    xAxisData.push('类目' + i);
                    data1.push((-Math.random() - 0.2).toFixed(3));
                    data2.push((Math.random() + 0.3).toFixed(3));
                    data3.push((Math.random() + 0.2).toFixed(3));
                    data4.push((-Math.random() - 0.2).toFixed(3));
                    data5.push((-Math.random() - 0.2).toFixed(3));
                    data6.push((Math.random() + 0.2).toFixed(3));
                }
                xAxisData.push('类目' + i);
                data1.push('-');
                data2.push('-');
                data3.push('-');
                data4.push('-');
                data5.push('-');
                data6.push('-');

                var itemStyle = {
                    normal: {
                        // borderColor: 'white',
                        // borderWidth: 3,
                        // shadowBlur: 10,
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 5,
                        // shadowColor: 'rgba(0, 0, 0, 0.4)',
                        lineStyle: {
                            width: 2
                            // shadowBlur: 10,
                            // shadowOffsetX: 0,
                            // shadowOffsetY: 5,
                            // shadowColor: 'rgba(0, 0, 0, 0.4)'
                        },
                        areaStyle: {
                        }
                    }
                };

                var option = {
                    legend: {
                    },
                    toolbox: {
                        feature: {
                            magicType: {
                                type: ['line', 'bar', 'stack', 'tiled']
                            }
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        position: function (point) {
                            return [point[0], '10%'];
                        },
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
                        data: xAxisData,
                        boundaryGap: false,
                        // inverse: true,
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        splitLine: {
                            // show: false
                        }
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider'
                    }],
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 10,
                        data: data1,
                        itemStyle: itemStyle,
                        smooth: true,
                        connectNulls: true
                    }, {
                        name: 'line2',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 10,
                        data: data2,
                        itemStyle: itemStyle,
                        connectNulls: true,
                        smooth: true
                    }, {
                        name: '+connectNulls:true',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 10,
                        data: data3,
                        itemStyle: itemStyle,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        connectNulls: true,
                        smooth: true
                    }, {
                        name: '-connectNulls:false',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 10,
                        data: data4,
                        itemStyle: itemStyle,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        connectNulls: false,
                        smooth: true
                    }, {
                        name: '-connectNulls:true',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 10,
                        data: data5,
                        itemStyle: itemStyle,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        connectNulls: true,
                        smooth: true
                    }, {
                        name: '+connectNulls:false',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 10,
                        data: data6,
                        itemStyle: itemStyle,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        connectNulls: false,
                        smooth: true
                    }]
                };

                testHelper.create(echarts, 'main0', {
                    title: 'line break',
                    option: option,
                    height: 600
                });

            })

        </script>


        <script>

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var xAxisData = ["2018-04-11 13:30:00","2018-04-11 13:45:00","2018-04-11 14:00:00","2018-04-11 14:30:00","2018-04-11 14:45:00","2018-04-11 15:00:00","2018-04-11 15:15:00","2018-04-11 15:30:00","2018-04-11 15:45:00","2018-04-12 09:30:00","2018-04-12 09:45:00","2018-04-12 10:00:00","2018-04-12 10:15:00","2018-04-12 10:30:00","2018-04-12 10:45:00","2018-04-12 11:00:00","2018-04-12 11:15:00","2018-04-12 11:30:00","2018-04-12 11:45:00","2018-04-12 12:00:00","2018-04-12 12:15:00","2018-04-12 12:30:00","2018-04-12 12:45:00","2018-04-12 13:00:00","2018-04-12 13:15:00","2018-04-12 13:30:00","2018-04-12 13:45:00","2018-04-12 14:00:00","2018-04-12 14:15:00","2018-04-12 14:30:00","2018-04-12 14:45:00","2018-04-12 15:00:00","2018-04-12 15:15:00","2018-04-12 15:30:00","2018-04-12 15:45:00","2018-04-13 09:30:00","2018-04-13 09:45:00","2018-04-13 10:00:00","2018-04-13 10:15:00","2018-04-13 10:30:00","2018-04-13 10:45:00","2018-04-13 11:00:00","2018-04-13 11:15:00","2018-04-13 11:45:00","2018-04-13 12:00:00","2018-04-13 12:15:00","2018-04-13 12:45:00","2018-04-13 13:00:00","2018-04-13 13:30:00","2018-04-13 13:45:00","2018-04-13 14:00:00","2018-04-13 14:30:00","2018-04-13 14:45:00","2018-04-13 15:00:00","2018-04-13 15:15:00","2018-04-13 15:30:00","2018-04-13 15:45:00","2018-04-16 09:30:00","2018-04-16 09:45:00","2018-04-16 10:00:00","2018-04-16 10:15:00","2018-04-16 10:30:00","2018-04-16 10:45:00","2018-04-16 11:00:00","2018-04-16 11:15:00","2018-04-16 11:45:00","2018-04-16 12:00:00","2018-04-16 12:15:00","2018-04-16 12:30:00","2018-04-16 12:45:00","2018-04-16 13:00:00","2018-04-16 13:15:00","2018-04-16 13:30:00","2018-04-16 13:45:00","2018-04-16 14:00:00","2018-04-16 14:15:00","2018-04-16 14:30:00","2018-04-16 14:45:00","2018-04-16 15:00:00","2018-04-16 15:15:00","2018-04-16 15:30:00","2018-04-16 15:45:00","2018-04-17 09:30:00","2018-04-17 09:45:00","2018-04-17 10:00:00","2018-04-17 10:15:00","2018-04-17 10:30:00","2018-04-17 10:45:00","2018-04-17 11:00:00","2018-04-17 11:15:00","2018-04-17 11:30:00","2018-04-17 11:45:00","2018-04-17 12:00:00","2018-04-17 12:30:00","2018-04-17 13:00:00","2018-04-17 13:15:00","2018-04-17 13:30:00","2018-04-17 13:45:00","2018-04-17 14:15:00","2018-04-17 14:30:00","2018-04-17 14:45:00","2018-04-17 15:00:00","2018-04-17 15:15:00","2018-04-17 15:30:00","2018-04-17 15:45:00","2018-04-18 09:30:00","2018-04-18 09:45:00","2018-04-18 10:00:00","2018-04-18 10:15:00","2018-04-18 10:30:00","2018-04-18 10:45:00","2018-04-18 11:00:00","2018-04-18 11:15:00","2018-04-18 11:30:00","2018-04-18 11:45:00","2018-04-18 12:00:00","2018-04-18 12:15:00","2018-04-18 12:30:00","2018-04-18 12:45:00","2018-04-18 13:00:00","2018-04-18 13:15:00","2018-04-18 13:30:00","2018-04-18 13:45:00","2018-04-18 14:00:00","2018-04-18 14:15:00","2018-04-18 14:45:00","2018-04-18 15:00:00","2018-04-18 15:15:00","2018-04-18 15:30:00","2018-04-18 15:45:00"];
                var dataUpper = [6.89,6.9,6.9,6.9,6.89,6.87,6.86,6.83,6.8,6.78,6.75,6.71,6.67,6.65,6.64,6.62,6.61,6.6,6.6,6.61,6.65,6.67,6.68,6.69,6.72,6.74,6.79,6.83,6.87,6.9,6.93,6.95,6.98,6.99,7.01,7.01,7.02,7.02,7,7,7.02,7.01,7.01,7,6.98,6.97,6.97,6.97,6.97,6.97,6.97,6.97,6.98,6.98,6.98,6.99,6.99,6.99,6.99,6.99,6.98,6.97,6.97,6.97,6.97,6.99];
                var dataMiddle = [6.7,6.69,6.67,6.66,6.64,6.63,6.61,6.6,6.59,6.58,6.57,6.56,6.55,6.54,6.54,6.53,6.53,6.53,6.52,6.53,6.53,6.54,6.55,6.56,6.58,6.59,6.61,6.62,6.64,6.65,6.67,6.68,6.7,6.72,6.73,6.75,6.77,6.78,6.81,6.82,6.84,6.85,6.86,6.87,6.88,6.89,6.89,6.89,6.89,6.89,6.89,6.89,6.89,6.9,6.9,6.9,6.91,6.91,6.91,6.91,6.9,6.91,6.9,6.9,6.9,6.89];
                var dataLower = [6.51,6.48,6.45,6.42,6.4,6.38,6.37,6.37,6.38,6.38,6.39,6.4,6.43,6.43,6.44,6.44,6.45,6.45,6.45,6.44,6.42,6.42,6.42,6.43,6.44,6.44,6.42,6.41,6.4,6.4,6.4,6.41,6.42,6.44,6.46,6.49,6.52,6.54,6.61,6.65,6.66,6.68,6.71,6.75,6.77,6.8,6.81,6.81,6.81,6.81,6.81,6.81,6.81,6.81,6.82,6.82,6.82,6.82,6.82,6.82,6.83,6.84,6.84,6.83,6.83,6.79];

                dataUpper = dataUpper.map(function (value, index) {
                    return value - dataMiddle[index];
                });
                dataMiddle = dataMiddle.map(function (value, index) {
                    return value - dataLower[index];
                });

                var option = {
                    "series": [
                        {
                            "smooth": true,
                            "lineStyle": {
                                "normal": {
                                    "opacity": 0.5,
                                    "width": 1
                                }
                            },
                            "name": "range",
                            "id": "lower",
                            "stack": "range",
                            "data": dataLower,
                            "type": "line",
                            "showSymbol": false
                        },
                        {
                            "smooth": true,
                            "lineStyle": {
                                "normal": {
                                    "opacity": 0.5,
                                    "width": 1
                                }
                            },
                            "name": "range",
                            "id": "middle",
                            "stack": "range",
                            "data": dataMiddle,
                            "areaStyle": {
                                "normal": {
                                    "color": "rgba(102, 202, 196, .3)"
                                }
                            },
                            "type": "line",
                            "showSymbol": false
                        },
                        {
                            "smooth": true,
                            "lineStyle": {
                                "normal": {
                                    "opacity": 0.5,
                                    "width": 1
                                }
                            },
                            "name": "range",
                            "id": "upper",
                            "stack": "range",
                            "data": dataUpper,
                            "areaStyle": {
                                "normal": {
                                    "color": "rgba(102, 202, 196, .3)"
                                }
                            },
                            "type": "line",
                            "showSymbol": false
                        }
                    ],
                    "tooltip": {
                        "trigger": "axis"
                    },
                    "grid": [
                        {
                            "containLabel": false,
                            "show": false
                        }
                    ],
                    "xAxis": [
                        {
                            "type": "category",
                            "boundaryGap": true,
                            "max": "dataMax",
                            "axisLabel": {
                                "show": false
                            },
                            "axisLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "splitLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#edeff2"
                                }
                            },
                            "data": xAxisData
                        }
                    ],
                    "yAxis": [
                        {
                            "scale": true,
                            "boundaryGap": [
                                "5%",
                                "5%"
                            ],
                            "splitArea": {
                                "show": false
                            },
                            "axisLabel": {
                                "color": "#32325d",
                                "fontFamily": "rubiklight",
                                "fontSize": 14,
                                "showMinLabel": false,
                                "showMaxLabel": false
                            },
                            "axisLine": {
                                "lineStyle": {
                                    "color": "#32325d"
                                }
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#edeff2"
                                }
                            },
                            "position": "right"
                        }
                    ],
                    "axisPointer": {
                        "link": {
                            "xAxis": "all"
                        },
                        "lineStyle": {
                            "color": "#c3c6c9",
                            "type": "dotted"
                        }
                    }
                };


                testHelper.create(echarts, 'main1', {
                    title: 'yAxis extent should not contain 0 (should about [5, 8])',
                    option: option
                });
            });

        </script>


    </body>
</html>