
<!--
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>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                /*border: 1px solid #000;*/
            }
        </style>
        <div id="main"><div>
        <script>
            require(['echarts'], function (echarts) {

                var chart = echarts.init(document.getElementById('main'), null, {});

                window.onresize = function () {
                    chart.resize();
                };

                var weatherIcons = {
                    'Sunny': './data/weather/sunny_128.png',
                    'Cloudy': './data/weather/cloudy_128.png',
                    'Showers': './data/weather/showers_128.png'
                };

                chart.setOption({
                    title: {
                        text: "Expect only to change the fontsize of 'rate' rich text",
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['西凉', '益州','兖州','荆州','幽州']
                    },
                    series : [
                        {
                            type: 'pie',
                            radius : '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data:[
                                {
                                    value:1548,
                                    name: '幽州',
                                    label: {
                                        normal: {
                                            formatter: [
                                                '{title|{b}}{abg|}',
                                                '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                                                '{hr|}',
                                                '  {Sunny|}{value|202}{rate|55.3%}',
                                                '  {Cloudy|}{value|142}{rate|38.9%}',
                                                '  {Showers|}{value|21}{rate|5.8%}'
                                            ].join('\n'),
                                            backgroundColor: '#eee',
                                            borderColor: '#777',
                                            borderWidth: 1,
                                            borderRadius: 4,
                                            rich: {
                                                title: {
                                                    color: '#eee',
                                                    align: 'center'
                                                },
                                                abg: {
                                                    backgroundColor: '#333',
                                                    width: '100%',
                                                    align: 'right',
                                                    height: 25,
                                                    borderRadius: [4, 4, 0, 0]
                                                },
                                                Sunny: {
                                                    height: 30,
                                                    align: 'left',
                                                    backgroundColor: {
                                                        image: weatherIcons.Sunny
                                                    }
                                                },
                                                Cloudy: {
                                                    height: 30,
                                                    align: 'left',
                                                    backgroundColor: {
                                                        image: weatherIcons.Cloudy
                                                    }
                                                },
                                                Showers: {
                                                    height: 30,
                                                    align: 'left',
                                                    backgroundColor: {
                                                        image: weatherIcons.Showers
                                                    }
                                                },
                                                weatherHead: {
                                                    color: '#333',
                                                    height: 24,
                                                    align: 'left'
                                                },
                                                hr: {
                                                    borderColor: '#777',
                                                    width: '100%',
                                                    borderWidth: 0.5,
                                                    height: 0
                                                },
                                                value: {
                                                    width: 20,
                                                    padding: [0, 20, 0, 30],
                                                    align: 'left'
                                                },
                                                valueHead: {
                                                    color: '#333',
                                                    width: 20,
                                                    padding: [0, 20, 0, 30],
                                                    align: 'center'
                                                },
                                                rate: {
                                                    width: 40,
                                                    align: 'right',
                                                    fontSize: 60,
                                                    padding: [0, 10, 0, 0]
                                                },
                                                rateHead: {
                                                    color: '#333',
                                                    width: 40,
                                                    align: 'center',
                                                    padding: [0, 10, 0, 0]
                                                }
                                            }
                                        }
                                    }
                                },
                                {value:535, name: '荆州'},
                                {value:510, name: '兖州'},
                                {value:634, name: '益州'},
                                {value:735, name: '西凉'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            });
        </script>
    </body>
</html>