/** * echarts图表类:维恩图 * * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。 * @author Loutongbing (娄同兵, loutongbing@126.com) */ define(function (require) { var ChartBase = require('./base'); // 图形依赖 var toolArea = require('zrender/tool/area'); // 图形依赖 var RectangleShape = require('zrender/shape/Rectangle'); var TextShape = require('zrender/shape/Text'); // 布局依赖 var TreeMapLayout = require('../layout/TreeMap'); var ecConfig = require('../config'); // 维恩图默认参数 ecConfig.treemap = { zlevel: 0, // 一级层叠 z: 1, // 二级层叠 calculable: false, clickable: true }; var ecData = require('../util/ecData'); var zrUtil = require('zrender/tool/util'); /** * 构造函数 * @param {Object} messageCenter echart消息中心 * @param {ZRender} zr zrender实例 * @param {Object} series 数据 * @param {Object} component 组件 * @constructor * @exports Treemap */ function Treemap(ecTheme, messageCenter, zr, option, myChart) { // 图表基类 ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart); this.refresh(option); } Treemap.prototype = { type : ecConfig.CHART_TYPE_TREEMAP, /** * 绘制图形 */ _buildShape : function () { var series = this.series; // this.data = series[0].data; this.data = series[0].data; this.x0 = 100; this.y0 = 50; this.width0 = 500; this.height0 = 300; this._buildTreemap(this.data); this.addShapeList(); }, /** * 构建单个 * * @param {Object} data 数据 */ _buildTreemap : function (data) { var area0 = this.width0 * this.height0; // 计算总面积 // 遍历数组,通过value与area0计算实际面积area var sum = 0; var areaArr = []; for (var i = 0; i < data.length; i++) { sum += data[i].value; } for (var j = 0; j < data.length; j++) { // data[j].area = data[j].value * sum / area0; areaArr.push(data[j].value * area0 / sum); } var treeMapLayout = new TreeMapLayout( { areas: areaArr, x0: this.x0, y0: this.y0, width0: this.width0, height0: this.height0 } ); var locationArr = treeMapLayout.rectangleList; for (var k = 0; k < locationArr.length; k++) { var item = locationArr[k]; // var color = this.data[k].color || this.zr.getColor(k); this._buildItem( item.x, item.y, item.width, item.height, k ); } }, /** * 构建单个item */ _buildItem : function ( x, y, width, height, index ) { var series = this.series; var rectangle = this.getRectangle( x, y, width, height, this.data[index].name, index ); // todo ecData.pack( rectangle, series[0], 0, series[0].data[index], 0, series[0].data[index].name ); this.shapeList.push(rectangle); }, /** * 构建矩形 * @param {number} x 矩形横坐标 * @param {number} y 矩形横坐标 * @param {number} width 矩形宽 * @param {number} height 矩形高 * @param {String} color 颜色 * @return {Object} 返回一个矩形 */ getRectangle : function ( x, y, width, height, text, index ) { var serie = this.series[0]; var data = this.data[index]; var queryTarget = [data, serie]; var normal = this.deepMerge( queryTarget, 'itemStyle.normal' ) || {}; var emphasis = this.deepMerge( queryTarget, 'itemStyle.emphasis' ) || {}; var color = normal.color || this.zr.getColor(index); var emphasisColor = emphasis.color || this.zr.getColor(index); var borderWidth = normal.borderWidth || 0; var borderColor = normal.borderColor || '#ccc'; var textShape = this.getLabel( x, y, width, height, this.data[index].name, index ); var rectangleShape = { zlevel: this.getZlevelBase(), z: this.getZBase(), hoverable: true, clickable: true, style: $.extend({ x: x, y: y, width: width, height: height, brushType: 'both', color: color, lineWidth: borderWidth, strokeColor: borderColor }, textShape.style), highlightStyle: $.extend({ color: emphasisColor, lineWidth: emphasis.borderWidth, strokeColor: emphasis.borderColor }, textShape.highlightStyle) }; return new RectangleShape(rectangleShape); }, getLabel: function ( rectangleX, rectangleY, rectangleWidth, rectangleHeight, text, index ) { if (!this.series[0].itemStyle.normal.label.show) { return {}; } var marginY = 12; var marginX = 5; var fontSize = 13; var textFont = fontSize + 'px Arial'; var textWidth = toolArea.getTextWidth(text, textFont); var textHeight = toolArea.getTextHeight(text, textFont); if (marginX + textWidth > rectangleWidth || marginY + textHeight > rectangleHeight) { return {}; } var data = this.data[index]; // 用label方法写title var textShape = { zlevel: this.getZlevelBase() + 1, z: this.getZBase() + 1, hoverable: false, style: { x: rectangleX + marginX, y: rectangleY + marginY, text: text, textColor: '#777', textFont: textFont }, highlightStyle: { text: text } }; textShape = { style: { text: text }, highlightStyle: { text: text } }; textShape = this.addLabel( textShape, this.series[0], data, text ); textShape.style.textPosition = 'specific'; textShape.style.textX = rectangleX + marginX; textShape.style.textY = rectangleY + marginY; textShape.style.textColor = textShape.style.textColor || '#000'; textShape.highlightStyle.textPosition = 'specific'; textShape.highlightStyle.textX = rectangleX + marginX; textShape.highlightStyle.textY = rectangleY + marginY; textShape.highlightStyle.textColor = textShape.highlightStyle.textColor || '#000'; return textShape; }, /** * 刷新 */ refresh : function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; } this._buildShape(); } }; zrUtil.inherits(Treemap, ChartBase); // 图表注册 require('../chart').define('treemap', Treemap); return Treemap; });