天津投入产出系统后端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

281 lines
8.6 KiB

/**
* 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;
});