test/marker-z2.html

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8" />
        <script src="lib/simpleRequire.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" />
    </head>
    <body>
        <div id="main1"></div>
        <div id="main2"></div>
        <div id="main3"></div>

        <script>
            require(["echarts"], function (echarts) {
                var option = {
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {},
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: "none",
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ["line", "bar"] },
                            restore: {},
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            formatter: "{value} °C",
                        },
                    },
                    series: [
                        {
                            name: "Highest",
                            type: "line",
                            data: [10, 11, 13, 11, 12, 12, 9],
                            markPoint: {
                                label: {
                                    normal: {
                                        formatter: function (param) {
                                            return (
                                                param.name +
                                                " " +
                                                (param.value || "")
                                            );
                                        },
                                        textStyle: {
                                            color: "#000",
                                            fontSize: 15,
                                        },
                                        position: "right",
                                    },
                                },
                                data: [
                                    {
                                        name: "series[0]-red-z2:[3]",
                                        extData: { a: 1, b: 2 },
                                        x: 350,
                                        y: 190,
                                        z2: 3,
                                        itemStyle: {
                                            color: "red",
                                        },
                                    },
                                    {
                                        name: "series[0]-blue-z2:[1]",
                                        extData: { a: 1, b: 2 },
                                        x: 350,
                                        y: 220,
                                        z2: 1,
                                        itemStyle: {
                                            color: "blue",
                                        },
                                    },
                                ],
                            },
                        },
                        {
                            name: "Lowest",
                            type: "line",
                            data: [1, -2, 2, 5, 3, 2, 0],
                            markPoint: {
                                label: {
                                    normal: {
                                        formatter: function (param) {
                                            return (
                                                param.name +
                                                " " +
                                                (param.value || "")
                                            );
                                        },
                                        textStyle: {
                                            color: "#000",
                                            fontSize: 15,
                                        },
                                        position: "left",
                                    },
                                },
                                data: [
                                    {
                                        name: "series[1]-green-z2:[2]",
                                        extData: { a: 1, b: 2 },
                                        x: 350,
                                        y: 205,
                                        z2: 2,
                                        itemStyle: {
                                            color: "green",
                                        },
                                    },
                                ],
                            },
                        },
                    ],
                };
                var chart = testHelper.create(echarts, "main1", {
                    option,
                    title: ["MarkPoint z2"],
                });
            });
        </script>

        <script>
            require(["echarts"], function (echarts) {
                var option = {
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {},
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: "none",
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ["line", "bar"] },
                            restore: {},
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            formatter: "{value} °C",
                        },
                    },
                    series: [
                        {
                            name: "Highest",
                            type: "line",
                            data: [10, 11, 13, 11, 12, 12, 9],
                            markLine: {
                                data: [
                                    [
                                        {
                                            name: "series[0]-red-z2:[3]",
                                            x: 200,
                                            y: 50,
                                            z2: 3,
                                            label: {
                                                position: "middle",
                                            },
                                            lineStyle: {
                                                color: "red",
                                                type: "solid",
                                                width: 3,
                                            },
                                        },
                                        {
                                            x: 400,
                                            y: 250,
                                        },
                                    ],
                                    [
                                        {
                                            name: "series[0]-blue-z2:[1]",
                                            x: 200,
                                            y: 350,
                                            z2: 1,
                                            label: {
                                                position: "middle",
                                            },
                                            lineStyle: {
                                                color: "blue",
                                                type: "solid",
                                                width: 3,
                                            },
                                        },
                                        {
                                            x: 400,
                                            y: 150,
                                        },
                                    ],
                                ],
                            },
                        },
                        {
                            name: "Lowest",
                            type: "line",
                            data: [1, -2, 2, 5, 3, 2, 0],
                            markLine: {
                                data: [
                                    [
                                        {
                                            name: "series[1]-green-z2:[2]",
                                            x: 250,
                                            y: 350,
                                            z2: 2,
                                            label: {
                                                position: "middle",
                                            },
                                            lineStyle: {
                                                color: "green",
                                                type: "solid",
                                                width: 3,
                                            },
                                        },
                                        {
                                            x: 250,
                                            y: 50,
                                        },
                                    ],
                                ],
                            },
                        },
                    ],
                };
                var chart = testHelper.create(echarts, "main2", {
                    option,
                    title: ["MarkLine z2"],
                });
            });
        </script>

        <script>
            require(["echarts"], function (echarts) {
                var option = {
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {},
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: "none",
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ["line", "bar"] },
                            restore: {},
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            formatter: "{value} °C",
                        },
                    },
                    series: [
                        {
                            name: "Highest",
                            type: "line",
                            data: [10, 11, 13, 11, 12, 12, 9],
                            markArea: {
                                data: [
                                    [
                                        {
                                            x: 300,
                                            y: 100,
                                            itemStyle: {
                                                color: "red",
                                            },
                                            emphasis: {
                                                label: {
                                                    position: "right",
                                                },
                                            },
                                            label: {
                                                position: "right",
                                            },
                                            z2: 3,
                                            name: "series[0]-red-z2:[3]",
                                        },
                                        {
                                            x: 400,
                                            y: 200,
                                        },
                                    ],
                                    [
                                        {
                                            x: 300,
                                            y: 200,
                                            itemStyle: {
                                                color: "blue",
                                            },
                                            label: {
                                                position: "right",
                                            },
                                            emphasis: {
                                                label: {
                                                    position: "right",
                                                },
                                            },
                                            z2: 1,
                                            name: "series[0]-blue-z2:[1]",
                                        },
                                        {
                                            x: 400,
                                            y: 300,
                                        },
                                    ],
                                ],
                            },
                        },
                        {
                            name: "Lowest",
                            type: "line",
                            data: [1, -2, 2, 5, 3, 2, 0],
                            markArea: {
                                data: [
                                    [
                                        {
                                            x: 300,
                                            y: 150,
                                            itemStyle: {
                                                color: "green",
                                            },
                                            emphasis: {
                                                label: {
                                                    position: "left",
                                                },
                                            },
                                            label: {
                                                position: "left",
                                            },
                                            z2: 2,
                                            name: "series[1]-green-z2:[2]",
                                        },
                                        {
                                            x: 400,
                                            y: 250,
                                        },
                                    ],
                                ],
                            },
                        },
                    ],
                };
                var chart = testHelper.create(echarts, "main3", {
                    option,
                    title: ["MarkArea z2"],
                });
            });
        </script>
    </body>
</html>