This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/label-enhancement by this push:
new f1dd46d enhance(labelLine): optimize smooth in labelLine
f1dd46d is described below
commit f1dd46d531afc1475de4c3b2f42f30d80b32a2a9
Author: pissang <bm2736...@gmail.com>
AuthorDate: Mon Jun 22 14:44:55 2020 +0800
enhance(labelLine): optimize smooth in labelLine
---
src/chart/helper/Symbol.ts | 1 -
src/chart/pie/labelLayout.ts | 14 +-
src/label/labelGuideHelper.ts | 35 +-
src/util/types.ts | 2 +-
test/pie-label-extreme.html | 721 ++++++++++++++++++++++++++++++++++++++++++
5 files changed, 766 insertions(+), 7 deletions(-)
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index b67240a..8689d63 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -231,7 +231,6 @@ class Symbol extends graphic.Group {
cursorStyle && symbolPath.attr('cursor', cursorStyle);
- // PENDING setColor before setStyle!!!
const symbolStyle = data.getItemVisual(idx, 'style');
const visualColor = symbolStyle.fill;
if (symbolPath.__isEmptyBrush) {
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index 470119a..3458873 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -22,7 +22,7 @@ import {parsePercent} from '../../util/number';
import PieSeriesModel, { PieSeriesOption, PieDataItemOption } from
'./PieSeries';
import { VectorArray } from 'zrender/src/core/vector';
import { HorizontalAlign, ZRTextAlign } from '../../util/types';
-import { Sector, Polyline } from '../../util/graphic';
+import { Sector, Polyline, Point } from '../../util/graphic';
import ZRText from 'zrender/src/graphic/Text';
import BoundingRect, {RectLike} from 'zrender/src/core/BoundingRect';
import { each } from 'zrender/src/core/util';
@@ -413,13 +413,19 @@ export default function (
}
}
if (labelLine) {
- if (notShowLabel || !layout.linePoints) {
+ const linePoints = layout.linePoints;
+ if (notShowLabel || !linePoints) {
each(labelLine.states, setNotShow);
labelLine.ignore = true;
}
else {
- limitTurnAngle(layout.linePoints, layout.minTurnAngle);
- labelLine.setShape({ points: layout.linePoints });
+ limitTurnAngle(linePoints, layout.minTurnAngle);
+ labelLine.setShape({ points: linePoints });
+
+ // Set the anchor to the midpoint of sector
+ label.__hostTarget.textGuideLineConfig = {
+ anchor: new Point(linePoints[0][0], linePoints[0][1])
+ };
}
}
}
diff --git a/src/label/labelGuideHelper.ts b/src/label/labelGuideHelper.ts
index 3ea413f..0d872e0 100644
--- a/src/label/labelGuideHelper.ts
+++ b/src/label/labelGuideHelper.ts
@@ -31,6 +31,7 @@ import { defaults, retrieve2 } from 'zrender/src/core/util';
import { LabelLineOption } from '../util/types';
import Model from '../model/Model';
import { invert } from 'zrender/src/core/matrix';
+import * as vector from 'zrender/src/core/vector';
const PI2 = Math.PI * 2;
const CMD = PathProxy.CMD;
@@ -470,7 +471,7 @@ function setLabelLineState(
// Set smooth
let smooth = stateModel.get('smooth');
if (smooth && smooth === true) {
- smooth = 0.4;
+ smooth = 0.3;
}
stateObj.shape = stateObj.shape || {};
(stateObj.shape as Polyline['shape']).smooth = smooth as number;
@@ -478,6 +479,35 @@ function setLabelLineState(
const styleObj = stateModel.getModel('lineStyle').getLineStyle();
isNormal ? labelLine.useStyle(styleObj) : stateObj.style = styleObj;
}
+
+function buildLabelLinePath(path: CanvasRenderingContext2D, shape:
Polyline['shape']) {
+ const smooth = shape.smooth as number;
+ const points = shape.points;
+ path.moveTo(points[0][0], points[0][1]);
+ if (smooth > 0) {
+ const len1 = vector.dist(points[0], points[1]);
+ const len2 = vector.dist(points[1], points[2]);
+ if (!len1 || !len2) {
+ path.lineTo(points[1][0], points[1][1]);
+ path.lineTo(points[2][0], points[2][1]);
+ return;
+ }
+
+ const moveLen = Math.min(len1, len2) * smooth;
+
+ const midPoint0 = vector.lerp([], points[1], points[0], moveLen /
len1);
+ const midPoint2 = vector.lerp([], points[1], points[2], moveLen /
len2);
+
+ const midPoint1 = vector.lerp([], midPoint0, midPoint2, 0.5);
+ path.bezierCurveTo(midPoint0[0], midPoint0[1], midPoint0[0],
midPoint0[1], midPoint1[0], midPoint1[1]);
+ path.bezierCurveTo(midPoint2[0], midPoint2[1], midPoint2[0],
midPoint2[1], points[2][0], points[2][1]);
+ }
+ else {
+ path.lineTo(points[1][0], points[1][1]);
+ path.lineTo(points[2][0], points[2][1]);
+ }
+}
+
/**
* Create a label line if necessary and set it's style.
*/
@@ -538,5 +568,8 @@ export function setLabelLineStyle(
defaults(labelLine.style, defaultStyle);
// Not fill.
labelLine.style.fill = null;
+
+ // Custom the buildPath.
+ labelLine.buildPath = buildLabelLinePath;
}
}
diff --git a/src/util/types.ts b/src/util/types.ts
index 94cf6d4..e4f508e 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1153,7 +1153,7 @@ export interface SeriesOption extends
labelLine?: LabelLineOption
/**
- * Global label layout option in label layout stage.
+ * Overall label layout option in label layout stage.
*/
labelLayout?: LabelLayoutOption | LabelLayoutOptionCallback
diff --git a/test/pie-label-extreme.html b/test/pie-label-extreme.html
new file mode 100644
index 0000000..1fcee55
--- /dev/null
+++ b/test/pie-label-extreme.html
@@ -0,0 +1,721 @@
+<!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": {
+ "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"
+ }]
+ }],
+ animation: false
+ };
+
+ 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
+ },
+ label: {
+ margin: 25,
+ bleedMargin: 10,
+ alignTo: 'none'
+ }
+ };
+
+ function update() {
+ chart.setOption({
+ series: {
+ label: Object.assign({}, config.label, {
+ margin: config.label.margin + '%'
+ }),
+ 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, 'margin', 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, 'smooth', 0,
1).onChange(update);
+ });
+
+ </script>
+
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
