| <!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/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> |
| <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> |
| |
