<!DOCTYPE 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">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="lib/esl.js"></script>
    <script src="lib/config.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="main0"></div>
    <div id="main1"></div>
    <script>
        var chart1;

        require([
            'echarts'
        ], function (echarts) {
            var colorList = ['#33ff11', '#aa0088', '#224477', '#00ee44', '#6611ff', '#889911'];
            var option = {
                legend: {
                    left: 'center',
                    bottom: 'bottom'
                },
                xAxis: {
                    type: 'category',
                    data: [100, 200, 20, 30, 60, 89],
                },
                yAxis: {
                    type: 'value',
                },
                grid: {
                    bottom: 120
                },
                series: [
                    {
                        // itemStyle.color is callback, lineStyle.color not set
                        name: 'Symbol color is from callback, line color should be palette color',
                        type: 'line',
                        data: [100, 110, 100, 120, 100, 130],
                        symbolSize: 10,
                        smooth: true,
                        itemStyle: {
                            color: function (param) {
                                return colorList[param.dataIndex]
                            }
                        }
                    },
                    {
                        // itemStyle.color is callback, lineStyle.color is "blue"
                        name: 'Symbol color is from callback, line color should be "blue"',
                        type: 'line',
                        data: [200, 210, 200, 220, 200, 230],
                        symbolSize: 10,
                        smooth: true,
                        itemStyle: {
                            color: function (param) {
                                return colorList[param.dataIndex]
                            }
                        },
                        lineStyle: {
                            color: 'blue'
                        }
                    },
                    {
                        // itemStyle.color is "green", lineStyle.color not set
                        name: 'Both symbol color and line color should be "green"',
                        type: 'line',
                        data: [300, 310, 300, 320, 300, 330],
                        symbolSize: 10,
                        smooth: true,
                        itemStyle: {
                            color: 'green'
                        }
                    },
                    {
                        // itemStyle.color is "green", lineStyle.color is "blue"
                        name: 'Symbol color should be "green", line color should be "blue"',
                        type: 'line',
                        data: [400, 410, 400, 420, 400, 430],
                        symbolSize: 10,
                        smooth: true,
                        itemStyle: {
                            color: 'green'
                        },
                        lineStyle: {
                            color: 'blue'
                        }
                    },
                    {
                        // itemStyle.color not set, lineStyle.color not set
                        name: 'Both symbol color and line color should be palette color',
                        type: 'line',
                        data: [500, 510, 500, 520, 500, 530],
                        symbolSize: 10,
                        smooth: true
                    }
                ]
            };

            chart1 = testHelper.create(echarts, 'main0', {
                title: [
                    'Test itemStyle.color and lineStyle.color',
                    'The colors should follow what the legend described.'
                ],
                option: option
            });
        });

    </script>

    <script>
        var chart2;

        require([
            'echarts'
        ], function (echarts) {
            var option = {
                // textStyle: {
                //     color: 'red',
                //     textBorderWidth: 5,
                //     textBorderColor: 'red',
                //     textBorderType: 'dashed',
                //     textBorderType: [2, 2]
                // },
                title: {
                    text: '这是标题~',
                    borderColor: 'red',
                    borderWidth: 1,
                    borderType: 'dashed',
                    textStyle: {
                        textBorderWidth: 1,
                        textBorderColor: 'red',
                        textBorderType: 'dotted'
                    },
                    subtext: '这是副标题',
                    subtextStyle: {
                        textBorderWidth: 1,
                        textBorderColor: 'cyan',
                        textBorderType: [15, 3, 3]
                    }
                },
                legend: {
                    left: '10%',
                    bottom: '2%',
                    right: '10%',
                    itemWidth: 50,
                    borderWidth: 1,
                    borderColor: 'blue',
                    borderType: 'dotted',
                    textStyle: {
                        textBorderWidth: 1,
                        textBorderColor: 'green',
                        textBorderType: 'dotted'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                      dataZoom: {
                        yAxisIndex: "none"
                      },
                      dataView: {
                        readOnly: false
                      },
                      magicType: {
                        type: ["line", "bar"]
                      },
                      restore: {},
                      saveAsImage: {}
                    },
                    iconStyle: {
                        borderType: 'dotted',
                        borderWidth: 1,
                        borderColor: 'cyan'
                    }
                },
                tooltip: {
                    formatter: '{c}'
                },
                axisPointer: {
                    show: false,
                    type: 'line',
                    lineStyle: {
                        type: 'dotted',
                        color: 'cyan',
                        width: 2
                    },
                    label: {
                        //show: false,
                        fontWeight: 'bold',
                        precision: 2,
                        fontSize: '1rem',
                        textShadowBlur: 10,
                        //textShadowOffsetX: 2,
                        //textShadowOffsetY: 2,
                        textShadowColor: 'red',
                        textBorderColor: 'cyan',
                        textBorderWidth: 2,
                        textBorderType: 'dotted',
                        //textBorderType: [5, 5],
                        borderWidth: 1,
                        borderColor: 'black',
                        borderType: [15, 3, 3],
                        borderRadius: 20,
                        backgroundColor: 'yellow',
                        padding: 10,
                        shadowColor: 'green',
                        shadowBlur: 5,
                        //shadowOffsetX: 10,
                        //shadowOffsetY: 10,
                        color: '#fff',
                        fontFamily: 'SimHei',
                        rich: {
                            name: {
                                textBorderColor: 'purple',
                                fontSize: 12,
                                fontFamily: 'Courier New'
                            }
                        },
                        //formatter: '{name|{value}}',
                        //width: 120,
                        //height: 30,
                        //lineHeight: 30
                        //opacity: 0.5
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [100, 200, 20, 30, 60, 89],
                    name: 'X轴',
                    nameTextStyle: {
                        borderWidth: 1,
                        borderColor: 'red',
                        borderType: 'dashed',
                        textBorderWidth: 1,
                        textBorderColor: 'green',
                        //textBorderType: 'dashed'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            type: 'dotted'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: 'Y轴',
                    nameTextStyle: {
                        borderWidth: 1,
                        borderColor: 'black'
                    },
                    splitLine: {
                        lineStyle: {
                            type: [20, 5, 5]
                        }
                    }
                },
                graphic: {
                    elements: [{
                        type: 'group',
                        left: '10%',
                        top: 'center',
                        children: [
                            {
                                type: 'rect',
                                z: 100,
                                left: 'center',
                                top: 'middle',
                                shape: {
                                    width: 190,
                                    height: 90
                                },
                                style: {
                                    fill: '#fff',
                                    stroke: '#555',
                                    lineWidth: 2,
                                    lineDash: [5, 5],
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.3)'
                                }
                            },
                            {
                                type: 'text',
                                z: 100,
                                left: 'center',
                                top: 'middle',
                                style: {
                                    fill: '#333',
                                    text: [
                                        '横轴表示温度，单位是°C',
                                        '纵轴表示高度，单位是km',
                                        '右上角有一个图片做的水印',
                                        '这个文本块可以放在图中各',
                                        '种位置'
                                    ].join('\n'),
                                    stroke: 'red',
                                    lineDash: [2],
                                    lineWidth: 1,
                                    borderWidth: 2,
                                    borderColor: 'blue',
                                    borderDash: [5, 5],
                                    font: '14px Microsoft YaHei'
                                }
                            }
                        ]
                    }]
                },
                grid: {
                    bottom: 180
                },
                series: [
                    {
                        name: 'lineStyle.type is [10, 5]',
                        type: 'line',
                        data: [{
                            value: 7200,
                            itemStyle: {
                                color: 'cyan',
                                //borderWidth: 10,
                                borderType: 'solid',
                                borderColor: 'red'
                            },
                            //symbolRotate: 45
                        }, 7210, 7200, 7220, 7200, 7230],
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            type: [10, 5]
                        },
                        symbol: 'circle',
                        //symbolRotate: 60,
                        itemStyle: {
                            color: 'red',
                            borderType: 'dashed',
                            borderWidth: 1,
                            borderColor: 'purple'
                        },
                        emphasis: {
                            lineStyle: {
                                type: 'dotted'
                            },
                            itemStyle: {
                                borderType: [12, 3, 3],
                                borderWidth: 2,
                                borderColor: '#000'
                            }
                        }
                    },
                    {
                        name: 'lineStyle.type is [12, 3, 3]',
                        type: 'line',
                        data: [6200, 6210, 6200, 6220, 6200, 6230],
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            type: [12, 3, 3]
                        }
                    },
                    {
                        name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]',
                        type: 'line',
                        data: [5200, 5210, 5200, 5220, 5200, 5230],
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            type: [20, 3, 3, 3, 3, 3, 3, 3]
                        }
                    },
                    {
                        name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]\nlineStyle.dashOffset is 20',
                        type: 'line',
                        data: [4200, 4210, 4200, 4220, 4200, 4230],
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            type: [20, 3, 3, 3, 3, 3, 3, 3],
                            dashOffset: 20
                        }
                    },
                    {
                        name: 'lineStyle.type is [2, 6]',
                        type: 'line',
                        data: [3250, 3260, 3250, 3270, 3250, 3280],
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            type: [2, 6]
                        }
                    },
                    {
                        name: 'lineStyle.type is [2, 2]',
                        type: 'line',
                        data: [2200, 2210, 2200, 2220, 2200, 2230],
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            type: [2, 2]
                        }
                    },
                    {
                        name: 'lineStyle.cap is butt',
                        type: 'line',
                        data: [1200, 1210, 1200, 1240, 1210, 1230],
                        symbolSize: 4,
                        smooth: true,
                        lineStyle: {
                            width: 8,
                            type: 'solid',
                            cap: 'butt'
                        },
                        smooth: false
                    },
                    {
                        name: 'lineStyle.cap is square',
                        type: 'line',
                        data: [200, 230, 300, 340, 310, 330],
                        symbolSize: 4,
                        smooth: true,
                        lineStyle: {
                            width: 8,
                            type: 'solid',
                            cap: 'square'
                        },
                        smooth: false
                    },
                    {
                        name: 'lineStyle.cap is round',
                        type: 'line',
                        data: [-1000, -970, -900, -860, -890, -870],
                        symbolSize: 4,
                        smooth: true,
                        lineStyle: {
                            width: 8,
                            type: 'solid',
                            cap: 'round'
                        },
                        smooth: false
                    },
                    {
                        name: 'lineStyle.join is bevel',
                        type: 'line',
                        data: [-1800, -3800, -1800, -3800, -1800, -3800],
                        symbolSize: 5,
                        smooth: true,
                        lineStyle: {
                            width: 10,
                            type: 'solid',
                            join: 'bevel'
                        },
                        smooth: false
                    },
                    {
                        name: 'lineStyle.join is round',
                        type: 'line',
                        data: [-2800, -4800, -2800, -4800, -2800, -4800],
                        symbolSize: 5,
                        smooth: true,
                        lineStyle: {
                            width: 10,
                            type: 'solid',
                            join: 'round'
                        },
                        smooth: false
                    }
                ]
            };

            chart2 = testHelper.create(echarts, 'main1', {
                title: [
                    'Test lineStyle.cap, lineStyle.join, lineStyle.dashArray and lineStyle.dashOffset'
                ],
                option: option
            });

            // setTimeout(function() {
            //     option.series[0].symbol = 'emptyCircle';
            //     chart2.setOption(option);
            // }, 2000);
        });
    </script>
</body>

</html>