/** * echarts图表类:字符云 * @desc * @author clmtulip(车丽美, clmtulip@gmail.com) liyong(liyong1239@163.com) */ define(function (require) { var ChartBase = require('./base'); var TextShape = require('zrender/shape/Text'); var CloudLayout = require('../layout/WordCloud'); require('../component/grid'); require('../component/dataRange'); var ecConfig = require('../config'); var ecData = require('../util/ecData'); var zrUtil = require('zrender/tool/util'); var zrColor = require('zrender/tool/color'); ecConfig.wordCloud = { zlevel: 0, z: 2, clickable: true, center: ['50%', '50%'], size: ['40%', '40%'], // 字体旋转角度, 随机从指定数组中取 textRotation: [0, 90], // 字体之间的间隙 单位px 默认为0 textPadding: 0, // 字体大小 是否自动缩放,使得尽可能的 字体能够显示 autoSize: { enable: true, // 字体缩放后的最小大小 minSize: 12 }, itemStyle: { normal: { textStyle: { // 默认字体大小跟 data.value 一样 fontSize: function (data) { return data.value; } } } } }; function Cloud(ecTheme, messageCenter, zr, option, myChart) { ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart); this.refresh(option); } Cloud.prototype = { type: ecConfig.CHART_TYPE_WORDCLOUD, /** * 刷新 */ refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; } //init data this._init(); }, /** * 初始化数据 * @private */ _init: function () { var series = this.series; this.backupShapeList(); var legend = this.component.legend; for (var i = 0; i < series.length; i++) { if (series[i].type === ecConfig.CHART_TYPE_WORDCLOUD) { series[i] = this.reformOption(series[i]); var serieName = series[i].name || ''; this.selectedMap[serieName] = legend ? legend.isSelected(serieName) : true; if (! this.selectedMap[serieName]) { continue; } this.buildMark(i); this._initSerie(series[i]); } } }, _initSerie: function (serie) { var textStyle = serie.itemStyle.normal.textStyle; var size = [ this.parsePercent(serie.size[0], this.zr.getWidth()) || 200, this.parsePercent(serie.size[1], this.zr.getHeight()) || 200 ] var center = this.parseCenter(this.zr, serie.center); var layoutConfig = { size: size, wordletype: { autoSizeCal: serie.autoSize, }, center: center, rotate: serie.textRotation, padding: serie.textPadding, font: textStyle.fontFamily, fontSize: textStyle.fontSize, fontWeight: textStyle.fontWeight, fontStyle: textStyle.fontStyle, text: function (d) { return d.name; }, data: serie.data }; // 字符云的布局方法 var clouds = new CloudLayout(layoutConfig); var self = this; // 字符位置确定后 执行 以下函数 clouds.end(function (d) { self._buildShapes(d); }); // 布局算法 开始执行 clouds.start(); }, /** * 通过 data 绘制图形 * @param data * @private */ _buildShapes: function (data) { //数据的 再度初始化,使得最终 text 是以自己的坐标为中心。。。 var len = data.length; for (var i = 0; i < len; i++) { this._buildTextShape(data[i], 0, i); } this.addShapeList(); }, /** * 绘制 每个 text * @param oneText {Object} * @param seriesIndex {int} * @param dataIndex {int} * @private */ _buildTextShape: function (oneText, seriesIndex, dataIndex) { var series = this.series; var serie = series[seriesIndex]; var serieName = serie.name || ''; var data = serie.data[dataIndex]; var queryTarget = [ data, serie ]; // dataRange 选择结束 var legend = this.component.legend; var defaultColor = legend ? legend.getColor(serieName) : this.zr.getColor(seriesIndex); // 多级控制 var normal = this.deepMerge(queryTarget, 'itemStyle.normal') || {}; var emphasis = this.deepMerge(queryTarget, 'itemStyle.emphasis') || {}; var normalColor = this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data) || defaultColor; var emphasisColor = this.getItemStyleColor( emphasis.color, seriesIndex, dataIndex, data ) || (typeof normalColor === 'string' ? zrColor.lift(normalColor, -0.2) : normalColor ); var textShape = new TextShape({ zlevel: serie.zlevel, z: serie.z, hoverable: true, clickable: this.deepQuery(queryTarget, 'clickable'), style: { x: 0, y: 0, text: oneText.text, color: normalColor, textFont: [oneText.style, oneText.weight, oneText.size + 'px', oneText.font].join(' '), textBaseline: 'alphabetic', textAlign: 'center' }, highlightStyle: { brushType: emphasis.borderWidth ? 'both' : 'fill', color: emphasisColor, lineWidth: emphasis.borderWidth || 0, strokeColor: emphasis.borderColor }, position: [ oneText.x, oneText.y ], rotation: [ -oneText.rotate / 180 * Math.PI, 0, 0 ] }); ecData.pack( textShape, serie, seriesIndex, data, dataIndex, data.name ); this.shapeList.push(textShape); } }; zrUtil.inherits(Cloud, ChartBase); // 图表注册 require('../chart').define('wordCloud', Cloud); return Cloud; });