/* * 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. */ var zrUtil = require("zrender/lib/core/util"); var echarts = require("../echarts"); var graphic = require("../util/graphic"); var _layout = require("../util/layout"); var getLayoutRect = _layout.getLayoutRect; var _format = require("../util/format"); var windowOpen = _format.windowOpen; /* * 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. */ // Model echarts.extendComponentModel({ type: 'title', layoutMode: { type: 'box', ignoreSize: true }, defaultOption: { // 涓€绾у眰鍙� zlevel: 0, // 浜岀骇灞傚彔 z: 6, show: true, text: '', // 瓒呴摼鎺ヨ烦杞� // link: null, // 浠呮敮鎸乻elf | blank target: 'blank', subtext: '', // 瓒呴摼鎺ヨ烦杞� // sublink: null, // 浠呮敮鎸乻elf | blank subtarget: 'blank', // 'center' 娄 'left' 娄 'right' // 娄 {number}锛坸鍧愭爣锛屽崟浣峱x锛� left: 0, // 'top' 娄 'bottom' 娄 'center' // 娄 {number}锛坹鍧愭爣锛屽崟浣峱x锛� top: 0, // 姘村钩瀵归綈 // 'auto' | 'left' | 'right' | 'center' // 榛樿鏍规嵁 left 鐨勪綅缃垽鏂槸宸﹀榻愯繕鏄彸瀵归綈 // textAlign: null // // 鍨傜洿瀵归綈 // 'auto' | 'top' | 'bottom' | 'middle' // 榛樿鏍规嵁 top 浣嶇疆鍒ゆ柇鏄笂瀵归綈杩樻槸涓嬪榻� // textVerticalAlign: null // textBaseline: null // The same as textVerticalAlign. backgroundColor: 'rgba(0,0,0,0)', // 鏍囬杈规棰滆壊 borderColor: '#ccc', // 鏍囬杈规绾垮锛屽崟浣峱x锛岄粯璁や负0锛堟棤杈规锛� borderWidth: 0, // 鏍囬鍐呰竟璺濓紝鍗曚綅px锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛� // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css padding: 5, // 涓诲壇鏍囬绾靛悜闂撮殧锛屽崟浣峱x锛岄粯璁や负10锛� itemGap: 10, textStyle: { fontSize: 18, fontWeight: 'bolder', color: '#333' }, subtextStyle: { color: '#aaa' } } }); // View echarts.extendComponentView({ type: 'title', render: function (titleModel, ecModel, api) { this.group.removeAll(); if (!titleModel.get('show')) { return; } var group = this.group; var textStyleModel = titleModel.getModel('textStyle'); var subtextStyleModel = titleModel.getModel('subtextStyle'); var textAlign = titleModel.get('textAlign'); var textVerticalAlign = zrUtil.retrieve2(titleModel.get('textBaseline'), titleModel.get('textVerticalAlign')); var textEl = new graphic.Text({ style: graphic.setTextStyle({}, textStyleModel, { text: titleModel.get('text'), textFill: textStyleModel.getTextColor() }, { disableBox: true }), z2: 10 }); var textRect = textEl.getBoundingRect(); var subText = titleModel.get('subtext'); var subTextEl = new graphic.Text({ style: graphic.setTextStyle({}, subtextStyleModel, { text: subText, textFill: subtextStyleModel.getTextColor(), y: textRect.height + titleModel.get('itemGap'), textVerticalAlign: 'top' }, { disableBox: true }), z2: 10 }); var link = titleModel.get('link'); var sublink = titleModel.get('sublink'); var triggerEvent = titleModel.get('triggerEvent', true); textEl.silent = !link && !triggerEvent; subTextEl.silent = !sublink && !triggerEvent; if (link) { textEl.on('click', function () { windowOpen(link, '_' + titleModel.get('target')); }); } if (sublink) { subTextEl.on('click', function () { windowOpen(sublink, '_' + titleModel.get('subtarget')); }); } textEl.eventData = subTextEl.eventData = triggerEvent ? { componentType: 'title', componentIndex: titleModel.componentIndex } : null; group.add(textEl); subText && group.add(subTextEl); // If no subText, but add subTextEl, there will be an empty line. var groupRect = group.getBoundingRect(); var layoutOption = titleModel.getBoxLayoutParams(); layoutOption.width = groupRect.width; layoutOption.height = groupRect.height; var layoutRect = getLayoutRect(layoutOption, { width: api.getWidth(), height: api.getHeight() }, titleModel.get('padding')); // Adjust text align based on position if (!textAlign) { // Align left if title is on the left. center and right is same textAlign = titleModel.get('left') || titleModel.get('right'); if (textAlign === 'middle') { textAlign = 'center'; } // Adjust layout by text align if (textAlign === 'right') { layoutRect.x += layoutRect.width; } else if (textAlign === 'center') { layoutRect.x += layoutRect.width / 2; } } if (!textVerticalAlign) { textVerticalAlign = titleModel.get('top') || titleModel.get('bottom'); if (textVerticalAlign === 'center') { textVerticalAlign = 'middle'; } if (textVerticalAlign === 'bottom') { layoutRect.y += layoutRect.height; } else if (textVerticalAlign === 'middle') { layoutRect.y += layoutRect.height / 2; } textVerticalAlign = textVerticalAlign || 'top'; } group.attr('position', [layoutRect.x, layoutRect.y]); var alignStyle = { textAlign: textAlign, textVerticalAlign: textVerticalAlign }; textEl.setStyle(alignStyle); subTextEl.setStyle(alignStyle); // Render background // Get groupRect again because textAlign has been changed groupRect = group.getBoundingRect(); var padding = layoutRect.margin; var style = titleModel.getItemStyle(['color', 'opacity']); style.fill = titleModel.get('backgroundColor'); var rect = new graphic.Rect({ shape: { x: groupRect.x - padding[3], y: groupRect.y - padding[0], width: groupRect.width + padding[1] + padding[3], height: groupRect.height + padding[0] + padding[2], r: titleModel.get('borderRadius') }, style: style, subPixelOptimize: true, silent: true }); group.add(rect); } });