<!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/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/dat.gui.min.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            html, body {
                height: 100%;
            }
            #main0 {
                width: 100%;
                height: 100%;
            }
        </style>


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


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            option = {
                "backgroundColor": "transparent",
                "color": ["#4F7FF2", "#7BC417", "#F58923", "#FEE222", "#FF6060", "#4FC9F2", "#79E9B1", "#FDB805", "#48AAFF", "#11AF03"],
                "title": {
                    "show": false
                },
                "tooltip": {
                    "formatter": "{b}<br/>{a}: {c} -- {d}%"
                },
                "maxRadius": "60",
                "minRadius": "40",
                "center": "middle",
                "series": [{
                    "type": "pie",
                    "top": 10,
                    "bottom": 10,
                    "center": ["50%", "50%"],
                    "radius": ["30%", "71%"],
                    "label": {
                        "show": true,
                        "color": "#000",
                        "fontSize": 10
                    },
                    "labelLine": {
                        "lineStyle": {
                            "color": '#ccc'
                        },
                        "smooth": true
                    },
                    "data": [{
                        "name": "七台河市易通汽车销售有限公司",
                        "value": "143"
                    }, {
                        "name": "上海丞乐网络科技有限公司",
                        "value": "60"
                    }, {
                        "name": "上海保橙网络科技有限公司OK车险",
                        "value": "694"
                    }, {
                        "name": "上海华驭商务咨询服务部",
                        "value": "573"
                    }, {
                        "name": "上海同鑫信息技术咨询有限公司",
                        "value": "62"
                    }, {
                        "name": "上海庭海农业专业合作社",
                        "value": "17"
                    }, {
                        "name": "上海欣璐网络科技服务有限公司",
                        "value": "82"
                    }, {
                        "name": "上海灿谷投资管理咨询服务有限公司",
                        "value": "16"
                    }, {
                        "name": "上海谷途网络科技有限公司",
                        "value": "1254"
                    }, {
                        "name": "东方启辰信息技术深圳股份有限公司",
                        "value": "435"
                    }, {
                        "name": "东莞市嘉庆汽车信息咨询有限公司",
                        "value": "41"
                    }, {
                        "name": "东莞市天霸电子科技有限公司",
                        "value": "110"
                    }, {
                        "name": "东莞市轩净汽车服务有限公司",
                        "value": "67"
                    }, {
                        "name": "东营五色土商务信息咨询有限公司",
                        "value": "1216"
                    }, {
                        "name": "中民APP",
                        "value": "1982"
                    }, {
                        "name": "乐山耀发企业管理咨询有限公司",
                        "value": "2"
                    }, {
                        "name": "乐陵市乐诚信息咨询有限公司",
                        "value": "118"
                    }, {
                        "name": "云保网",
                        "value": "1"
                    }, {
                        "name": "云达天津国际贸易有限公司",
                        "value": "307"
                    }, {
                        "name": "众友帮",
                        "value": "138"
                    }, {
                        "name": "佰仟租赁",
                        "value": "2766"
                    }, {
                        "name": "保尔保险全省",
                        "value": "2063"
                    }, {
                        "name": "元征APP",
                        "value": "74"
                    }, {
                        "name": "其他免费搜索",
                        "value": "9"
                    }, {
                        "name": "北京一路魔方科技有限公司",
                        "value": "126"
                    }, {
                        "name": "北京京付通支付技术有限公司",
                        "value": "4"
                    }, {
                        "name": "北京日盛昌科技有限公司",
                        "value": "20"
                    }, {
                        "name": "北京智驾出行科技有限公司",
                        "value": "63"
                    }, {
                        "name": "北京欣圣宏源科贸发展有限公司",
                        "value": "1"
                    }, {
                        "name": "北京泰迪熊移动科技有限公司",
                        "value": "1895"
                    }, {
                        "name": "北京联华思创科技有限公司",
                        "value": "54"
                    }, {
                        "name": "北京融智联航科技发展有限公司",
                        "value": "21"
                    }, {
                        "name": "北京阿方提科技有限公司",
                        "value": "53"
                    }, {
                        "name": "北京霏凡网络科技有限公司",
                        "value": "15"
                    }, {
                        "name": "华泽微福投资有限公司",
                        "value": "13"
                    }, {
                        "name": "南宁亮驹信息技术有限公司",
                        "value": "15"
                    }, {
                        "name": "南通亚保信息技术服务有限公司",
                        "value": "388"
                    }, {
                        "name": "南通稳健投资咨询有限公司",
                        "value": "196"
                    }, {
                        "name": "厦门中财在线网络科技有限公司",
                        "value": "271"
                    }, {
                        "name": "厦门人立企业管理咨询有限公司",
                        "value": "410"
                    }, {
                        "name": "厦门北斗行电子科技有限公司",
                        "value": "103"
                    }, {
                        "name": "厦门简约宝贝文化传播有限公司",
                        "value": "2"
                    }, {
                        "name": "合肥玺启商贸有限公司",
                        "value": "7313"
                    }, {
                        "name": "吉林省百盛金融外包服务有限公司",
                        "value": "3"
                    }, {
                        "name": "国美金融",
                        "value": "2250"
                    }, {
                        "name": "天津宏鑫源汽车维修有限公司",
                        "value": "80"
                    }, {
                        "name": "天津市宝坻区宇宙汽车销售有限公司",
                        "value": "332"
                    }, {
                        "name": "天津市车惠保商务信息咨询服务有限公司",
                        "value": "4"
                    }, {
                        "name": "天津市车行家汽车销售服务有限公司",
                        "value": "3"
                    }, {
                        "name": "天津恒信安泰电子信息技术有限公司",
                        "value": "382"
                    }, {
                        "name": "太湖县韦翊汽车销售有限公司",
                        "value": "3"
                    }, {
                        "name": "威海初雅文化传媒有限公司",
                        "value": "294"
                    }, {
                        "name": "孝感市开发区洁美汽车装饰美容店",
                        "value": "27"
                    }, {
                        "name": "孝感市焦点广告传媒有限责任公司",
                        "value": "1"
                    }, {
                        "name": "安徽帝诚人才服务有限公司",
                        "value": "9"
                    }, {
                        "name": "安徽行云天下科技有限公司",
                        "value": "29493"
                    }, {
                        "name": "宝鸡靓拳网络科技有限公司",
                        "value": "4"
                    }, {
                        "name": "宣城市爱车屋汽车销售有限公司",
                        "value": "56"
                    }, {
                        "name": "小米短信",
                        "value": "9166"
                    }, {
                        "name": "山东国银电子科技有限公司",
                        "value": "14"
                    }, {
                        "name": "山东天地通数码科技有限公司",
                        "value": "72"
                    }, {
                        "name": "山东腾信汽车服务有限公司",
                        "value": "2364"
                    }, {
                        "name": "山东车保汇网络科技有限公司",
                        "value": "31"
                    }, {
                        "name": "崇川区惠多保汽车服务中心",
                        "value": "80"
                    }, {
                        "name": "常州市如锦信息技术有限公司",
                        "value": "4613"
                    }, {
                        "name": "常州惠尔丰信息技术有限公司",
                        "value": "18"
                    }, {
                        "name": "常州车友电子商务有限公司",
                        "value": "25"
                    }, {
                        "name": "平安汽融",
                        "value": "4"
                    }, {
                        "name": "广东微转网络科技有限公司",
                        "value": "137"
                    }, {
                        "name": "广东途车网络科技有限公司",
                        "value": "14"
                    }, {
                        "name": "广东雄雄车信息科技有限公司",
                        "value": "155"
                    }, {
                        "name": "广州市时代互联科技有限公司",
                        "value": "1760"
                    }, {
                        "name": "广西创铄网络科技有限公司",
                        "value": "98"
                    }, {
                        "name": "广西车运佳二手车交易有限公司",
                        "value": "2"
                    }, {
                        "name": "开放平台PC",
                        "value": "62"
                    }, {
                        "name": "开放平台广告位",
                        "value": "13644"
                    }, {
                        "name": "徐州五度企业管理有限公司",
                        "value": "47"
                    }, {
                        "name": "徐州市保贵人网络科技有限公司",
                        "value": "148"
                    }, {
                        "name": "微信公众号",
                        "value": "6490"
                    }, {
                        "name": "快逸行",
                        "value": "10379"
                    }, {
                        "name": "惠州市车小宝汽车服务有限公司",
                        "value": "507"
                    }, {
                        "name": "惠州市鸿波投资有限公司",
                        "value": "165"
                    }, {
                        "name": "惠车无忧",
                        "value": "262"
                    }, {
                        "name": "成都和峰企业营销策划有限公司",
                        "value": "175"
                    }, {
                        "name": "抚州御风达服务有限公司",
                        "value": "78"
                    }, {
                        "name": "新乡市华谦信息服务有限公司",
                        "value": "11"
                    }, {
                        "name": "新乡市正安商贸有限公司",
                        "value": "52"
                    }, {
                        "name": "智富金融项目内部账号",
                        "value": "27"
                    }, {
                        "name": "来宾市鸿伟投资有限公司",
                        "value": "152"
                    }, {
                        "name": "杭州吉购实业有限公司",
                        "value": "3"
                    }, {
                        "name": "杭州小卡科技有限公司",
                        "value": "2"
                    }, {
                        "name": "枣庄天熹文化传播有限公司",
                        "value": "15800"
                    }, {
                        "name": "武汉博派通达科技有限公司",
                        "value": "620"
                    }, {
                        "name": "江苏润车网络科技有限公司",
                        "value": "198"
                    }, {
                        "name": "江西宝腾商务咨询有限公司",
                        "value": "37"
                    }, {
                        "name": "江西思建科技有限公司",
                        "value": "28"
                    }, {
                        "name": "江西揽进汽车贸易有限公司",
                        "value": "55"
                    }, {
                        "name": "江西省麦哲伦科技有限公司",
                        "value": "70"
                    }, {
                        "name": "江西赛宝网络科技有限公司",
                        "value": "93"
                    }, {
                        "name": "江阴宇橙电子商务有限公司",
                        "value": "455"
                    }, {
                        "name": "沂水县华馨创客企业管理咨询服务中心",
                        "value": "3002"
                    }, {
                        "name": "河南乾美实业有限公司",
                        "value": "1607"
                    }, {
                        "name": "河南云策智投信息科技有限公司",
                        "value": "2"
                    }, {
                        "name": "河南吴氏文化传媒有限公司",
                        "value": "234"
                    }, {
                        "name": "河南奥德新商务信息咨询有限公司",
                        "value": "8697"
                    }, {
                        "name": "河南悦幸汽车贸易有限公司",
                        "value": "3702"
                    }, {
                        "name": "河南有趣之间网络科技有限公司",
                        "value": "617"
                    }, {
                        "name": "河南永登信息技术有限公司",
                        "value": "1325"
                    }, {
                        "name": "河南润鹏汽车服务有限公司",
                        "value": "1"
                    }, {
                        "name": "河南盖文电子商务有限公司",
                        "value": "15"
                    }, {
                        "name": "河南荣兴汽车销售有限公司",
                        "value": "4"
                    }, {
                        "name": "河南行车道汽车租赁有限公司",
                        "value": "115"
                    }, {
                        "name": "河南诚益隆安网络技术有限公司",
                        "value": "2"
                    }, {
                        "name": "河南金信通信息服务有限公司",
                        "value": "3881"
                    }, {
                        "name": "洛阳华昶汽车服务有限公司",
                        "value": "14769"
                    }, {
                        "name": "济南拓盟网络科技有限公司",
                        "value": "258"
                    }, {
                        "name": "济南泛融汽车服务有限公司",
                        "value": "880"
                    }, {
                        "name": "济南鲁谊兄弟信息技术有限公司",
                        "value": "2"
                    }, {
                        "name": "淄博永浩汽车科技有限公司",
                        "value": "4"
                    }, {
                        "name": "深圳前海贝德财富有限公司",
                        "value": "7"
                    }, {
                        "name": "深圳市博盛汇通实业有限公司",
                        "value": "10"
                    }, {
                        "name": "深圳市宝晟互联信息技术有限公司",
                        "value": "4"
                    }, {
                        "name": "深圳市指掌通电子商务有限公司",
                        "value": "4"
                    }, {
                        "name": "深圳市晨威信息科技有限公司",
                        "value": "392"
                    }, {
                        "name": "深圳市通易达咨询服务有限公司",
                        "value": "2178"
                    }, {
                        "name": "深圳市鑫汇通企业管理有限公司",
                        "value": "1"
                    }, {
                        "name": "深圳百家财商教育服务有限公司",
                        "value": "714"
                    }, {
                        "name": "温州慧峰电子商务有限公司",
                        "value": "22"
                    }, {
                        "name": "渭南市临渭区鑫源电子科技服务部",
                        "value": "9"
                    }, {
                        "name": "湖北金曜信息技术有限责任公司",
                        "value": "205"
                    }, {
                        "name": "潍坊兴亚汽车服务有限公司",
                        "value": "146"
                    }, {
                        "name": "潍坊小蝌蚪信息科技有限公司",
                        "value": "331"
                    }, {
                        "name": "烟台博泰智能科技有限公司",
                        "value": "431"
                    }, {
                        "name": "烟台鸣韵文化传媒有限公司",
                        "value": "8"
                    }, {
                        "name": "熊猫森昊",
                        "value": "205"
                    }, {
                        "name": "牛牛云吉林网络科技有限公司",
                        "value": "9"
                    }, {
                        "name": "瓜子",
                        "value": "333"
                    }, {
                        "name": "百度移动品专分期位",
                        "value": "1"
                    }, {
                        "name": "百度移动搜索分期位",
                        "value": "1"
                    }, {
                        "name": "盐城云飞汽车俱乐部有限公司",
                        "value": "295"
                    }, {
                        "name": "直接流量",
                        "value": "40704"
                    }, {
                        "name": "直营APP分期产品位",
                        "value": "1702"
                    }, {
                        "name": "直营APP标准产品位",
                        "value": "15705"
                    }, {
                        "name": "直营广告官网标准位",
                        "value": "3"
                    }, {
                        "name": "直营广告手网分期位",
                        "value": "1289"
                    }, {
                        "name": "直营广告手网标准位",
                        "value": "919"
                    }, {
                        "name": "石家庄合信汽车服务有限公司",
                        "value": "355"
                    }, {
                        "name": "石家庄柏星网络科技有限公司",
                        "value": "2035"
                    }, {
                        "name": "福建皮皮车电子商务有限公司",
                        "value": "847"
                    }, {
                        "name": "网新新云联金融信息服务浙江有限公司",
                        "value": "109"
                    }, {
                        "name": "聊城市汇米网络科技有限公司",
                        "value": "97"
                    }, {
                        "name": "腾晟科技有限公司",
                        "value": "10"
                    }, {
                        "name": "腾讯征信",
                        "value": "2439"
                    }, {
                        "name": "苏州恩能信息科技有限公司",
                        "value": "80"
                    }, {
                        "name": "苏州萨普软件科技有限公司",
                        "value": "29"
                    }, {
                        "name": "莱西市芹杰商务信息服务部",
                        "value": "245"
                    }, {
                        "name": "蚌埠合辰汽车销售有限公司",
                        "value": "28"
                    }, {
                        "name": "许昌宇泽汽车服务咨询有限公司",
                        "value": "14"
                    }, {
                        "name": "赣州茶语文化有限公司",
                        "value": "1358"
                    }, {
                        "name": "车保通",
                        "value": "21"
                    }, {
                        "name": "车征",
                        "value": "190"
                    }, {
                        "name": "辉县市尚翰商贸有限公司",
                        "value": "10"
                    }, {
                        "name": "迁西县红森科技有限公司",
                        "value": "576"
                    }, {
                        "name": "远盟分期",
                        "value": "1256"
                    }, {
                        "name": "迪迪",
                        "value": "6"
                    }, {
                        "name": "途虎",
                        "value": "6327"
                    }, {
                        "name": "速保",
                        "value": "9"
                    }, {
                        "name": "郑州市凯硕企业管理咨询有限公司",
                        "value": "13691"
                    }, {
                        "name": "重庆凡驰科技有限公司",
                        "value": "323"
                    }, {
                        "name": "重庆创新谷网络科技有限公司",
                        "value": "16"
                    }, {
                        "name": "重庆和瑞汽车经纪服务有限公司",
                        "value": "184"
                    }, {
                        "name": "重庆圣亚汽车经纪有限公司",
                        "value": "229"
                    }, {
                        "name": "重庆沃盛汽车租赁有限公司",
                        "value": "23"
                    }, {
                        "name": "重庆聚保通网络科技有限公司",
                        "value": "15"
                    }, {
                        "name": "重庆蓝方慧行科技有限公司",
                        "value": "18"
                    }, {
                        "name": "重庆车网宝汽车销售有限公司",
                        "value": "159"
                    }, {
                        "name": "长安车联分期",
                        "value": "610"
                    }, {
                        "name": "陈天芬保险工作室",
                        "value": "55"
                    }, {
                        "name": "陕西万联电子商务有限公司",
                        "value": "13"
                    }, {
                        "name": "陕西真格广告文化传播有限公司",
                        "value": "7"
                    }, {
                        "name": "陕西蒲城孝华车驾咨询有限公司",
                        "value": "723"
                    }, {
                        "name": "陕西重旭实业有限责任公司",
                        "value": "9"
                    }, {
                        "name": "青岛东城汽车服务有限公司",
                        "value": "136"
                    }, {
                        "name": "青岛中汇投资管理有限公司",
                        "value": "293"
                    }, {
                        "name": "青岛云之翼电子商务有限公司",
                        "value": "3"
                    }, {
                        "name": "青岛凤泉网络技术信息服务有限责任公司",
                        "value": "40"
                    }, {
                        "name": "青岛彬彬网络技术信息服务有限责任公司",
                        "value": "481"
                    }, {
                        "name": "青岛德奥之星汽车服务有限公司",
                        "value": "31"
                    }, {
                        "name": "青岛易翔科技发展有限公司",
                        "value": "2608"
                    }, {
                        "name": "青岛艾特家家网络科技有限公司",
                        "value": "33"
                    }, {
                        "name": "青岛迪迪网络科技有限公司",
                        "value": "13"
                    }, {
                        "name": "青岛鲁西南文化传媒有限公司",
                        "value": "60"
                    }, {
                        "name": "驾图地推",
                        "value": "8"
                    }, {
                        "name": "高县川浙汽车贸易有限责任公司",
                        "value": "3"
                    }, {
                        "name": "黄山市上美汽贸有限公司",
                        "value": "5"
                    }, {
                        "name": '其它',
                        "value": "121320"
                    }]
                }]
            };

            const chart = echarts.init(document.querySelector('#main0'));
            chart.setOption(option);

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

            const gui = new dat.GUI();
            const config = {
                labelLine: {
                    length: 15,
                    length2: 15,
                    smooth: 0.3,
                    minTurnAngle: 110
                },
                label: {
                    edgeDistance: 25,
                    bleedMargin: 10,
                    alignTo: 'none',
                    overflow: 'truncate'
                }
            };

            function update() {
                chart.setOption({
                    series: {
                        label: Object.assign({}, config.label, {
                            edgeDistance: config.label.edgeDistance + '%'
                        }),
                        labelLine: config.labelLine
                    }
                });
            }

            const labelFolder = gui.addFolder('label');
            const labelLineFolder = gui.addFolder('labelLine');
            labelFolder.open();
            labelLineFolder.open();
            labelFolder.add(config.label, 'alignTo', ['none', 'edge', 'labelLine']).onChange(update);
            labelFolder.add(config.label, 'overflow', ['truncate', 'break', 'breakAll']).onChange(update);
            labelFolder.add(config.label, 'edgeDistance', 0, 50).onChange(update);
            labelFolder.add(config.label, 'bleedMargin', 0, 500).onChange(update);
            labelLineFolder.add(config.labelLine, 'length', 0, 500).onChange(update);
            labelLineFolder.add(config.labelLine, 'length2', 0, 500).onChange(update);
            labelLineFolder.add(config.labelLine, 'minTurnAngle', 0, 180).onChange(update);
            labelLineFolder.add(config.labelLine, 'smooth', 0, 1).onChange(update);
        });

        </script>


    </body>
</html>