From 5fc5500ed97641e4e6ef67a21220effec13814f3 Mon Sep 17 00:00:00 2001 From: lang Date: Wed, 18 Nov 2015 21:46:21 +0800 Subject: [PATCH] Add radar chart --- src/chart/radar.js | 15 ++++ src/chart/radar/RadarSeries.js | 45 ++++++++++ src/chart/radar/RadarView.js | 103 ++++++++++++++++++++++ src/component/dataRange/DataRangeModel.js | 1 + src/coord/polar/Polar.js | 5 ++ src/echarts.js | 5 ++ src/model/globalDefault.js | 11 ++- 7 files changed, 183 insertions(+), 2 deletions(-) create mode 100644 src/chart/radar.js create mode 100644 src/chart/radar/RadarSeries.js create mode 100644 src/chart/radar/RadarView.js diff --git a/src/chart/radar.js b/src/chart/radar.js new file mode 100644 index 000000000..4c883442d --- /dev/null +++ b/src/chart/radar.js @@ -0,0 +1,15 @@ +define(function (require) { + + var zrUtil = require('zrender/core/util'); + var echarts = require('../echarts'); + + require('./radar/RadarSeries'); + require('./radar/RadarView'); + + echarts.registerVisualCoding('chart', zrUtil.curry( + require('../visual/symbol'), 'radar', 'circle', null + )); + echarts.registerLayout(zrUtil.curry( + require('../layout/points'), 'radar' + )); +}); \ No newline at end of file diff --git a/src/chart/radar/RadarSeries.js b/src/chart/radar/RadarSeries.js new file mode 100644 index 000000000..72c33873e --- /dev/null +++ b/src/chart/radar/RadarSeries.js @@ -0,0 +1,45 @@ +define(function(require) { + + 'use strict'; + + var createListFromArray = require('../helper/createListFromArray'); + var SeriesModel = require('../../model/Series'); + + // Must have polar coordinate system + require('../../component/polar'); + + return SeriesModel.extend({ + + type: 'series.radar', + + dependencies: ['polar'], + + getInitialData: function (option, ecModel) { + return createListFromArray(option.data, this, ecModel); + }, + + defaultOption: { + zlevel: 0, // 一级层叠 + z: 2, // 二级层叠 + coordinateSystem: 'polar', + legendHoverLink: true, + polarIndex: 0, + lineStyle: { + normal: { + width: 2, + type: 'solid' + } + }, + // areaStyle: { + // }, + // 拐点图形类型 + symbol: 'emptyCircle', + // 拐点图形大小 + symbolSize: 4, + // 拐点图形旋转控制 + // symbolRotate: null, + // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略） + showAllSymbol: false + } + }); +}); \ No newline at end of file diff --git a/src/chart/radar/RadarView.js b/src/chart/radar/RadarView.js new file mode 100644 index 000000000..2f7255228 --- /dev/null +++ b/src/chart/radar/RadarView.js @@ -0,0 +1,103 @@ +define(function (require) { + + var SymbolDraw = require('../helper/SymbolDraw'); + var graphic = require('../../util/graphic'); + var zrUtil = require('zrender/core/util'); + + return require('../../echarts').extendChartView({ + type: 'radar', + + init: function () { + this._symbolDraw = new SymbolDraw(); + }, + + render: function (seriesModel, ecModel, api) { + var polar = seriesModel.coordinateSystem; + var group = this.group; + + var data = seriesModel.getData(); + + var points = data.mapArray(data.getItemLayout, true); + if (points.length < 1) { + return; + } + points.push(points[0].slice()); + + var polygon = this._polygon || (this._polygon = new graphic.Polygon({ + shape: { + points: [] + } + })); + var polyline = this._polyline || (this._polyline = new graphic.Polyline({ + shape: { + points: [] + }, + z2: 10 + })); + + var polylineShape = polyline.shape; + var polygonShape = polygon.shape; + function getInitialPoints() { + return zrUtil.map(points, function (pt) { + return [polar.cx, polar.cy]; + }); + } + var target = { + shape: { + points: points + } + }; + // Initialize or data changed + if (polylineShape.points.length !== points.length) { + polygonShape.points = getInitialPoints(); + polylineShape.points = getInitialPoints(); + api.initGraphicEl(polyline, target); + api.initGraphicEl(polygon, target); + } + else { + api.updateGraphicEl(polyline, target); + api.updateGraphicEl(polygon, target); + } + + this._symbolDraw.updateData(data, api); + + polyline.setStyle( + zrUtil.extend( + seriesModel.getModel('lineStyle.normal').getLineStyle(), + { + stroke: data.getVisual('color') + } + ) + ); + + var areaStyleModel = seriesModel.getModel('areaStyle.normal'); + polygon.ignore = areaStyleModel.isEmpty(); + graphic.setHoverStyle( + polyline, + seriesModel.getModel('lineStyle.emphasis').getLineStyle() + ); + + if (!polygon.ignore) { + polygon.setStyle( + zrUtil.defaults( + areaStyleModel.getAreaStyle(), + { + fill: data.getVisual('color'), + opacity: 0.7 + } + ) + ); + graphic.setHoverStyle( + polygon, + seriesModel.getModel('areaStyle.emphasis').getLineStyle() + ); + } + + group.add(polyline); + group.add(polygon); + group.add(this._symbolDraw.group); + + this._data = data; + } + }); +}); \ No newline at end of file diff --git a/src/component/dataRange/DataRangeModel.js b/src/component/dataRange/DataRangeModel.js index d600e0222..e6f86dae5 100644 --- a/src/component/dataRange/DataRangeModel.js +++ b/src/component/dataRange/DataRangeModel.js @@ -79,6 +79,7 @@ define(function(require) { itemWidth: null, // 值域图形宽度 itemHeight: null, // 值域图形高度 precision: 0, // 小数精度，默认为0，无小数点 + // color: ['#bf444c', '#d88273', '#f6efa6'],//颜色（deprecated，兼容ec2，对应数值由高到低） color: ['#006edd', '#e0ffff'],//颜色（deprecated，兼容ec2，对应数值由高到低） // formatter: null, diff --git a/src/coord/polar/Polar.js b/src/coord/polar/Polar.js index fc4ee7f24..d588ad5d2 100644 --- a/src/coord/polar/Polar.js +++ b/src/coord/polar/Polar.js @@ -188,6 +188,11 @@ define(function(require) { var extent = angleAxis.getExtent(); var minAngle = Math.min(extent[0], extent[1]); var maxAngle = Math.max(extent[0], extent[1]); + // Fix fixed extent in polarCreator + // FIXME + angleAxis.inverse + ? (minAngle = maxAngle - 360) + : (maxAngle = minAngle + 360); var radius = Math.sqrt(dx * dx + dy * dy); dx /= radius; diff --git a/src/echarts.js b/src/echarts.js index 6c1bef821..f1ab1a7b9 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -34,6 +34,11 @@ define(function (require) { function ECharts (dom, theme, opts) { opts = opts || {}; + if (theme) { + each(optionPreprocessorFuncs, function (preProcess) { + preProcess(theme); + }); + } /** * @type {string} */ diff --git a/src/model/globalDefault.js b/src/model/globalDefault.js index 434734de6..e0897694a 100644 --- a/src/model/globalDefault.js +++ b/src/model/globalDefault.js @@ -11,8 +11,15 @@ define(function () { // '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'], // https://dribbble.com/shots/1065960-Infographic-Pie-chart-visualization - color: ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', - '#dd4444', '#d4df5a', '#cd4870'], + // color: ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', + // '#dd4444', '#d4df5a', '#cd4870'], + // color: ['#928ea8', '#63869e', '#76b8d1', '#eab9b9', '#ebe4af'], + // color: ['#bcd3bb', '#e88f70', '#e9b7a6', '#e1e8c8', '#bda29a', '#7b7c68', '#fbeabf', '#edc1a5'], + // 浅色 + // color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'], + // 深色 + color: ['#314656', '#61a0a8', '#c23531', '#dd8668', '#91c7ae', '#6e7074', '#61a0a8', '#bda29a', '#44525d', '#c4ccd3'], + // color: ['#0088bb', '#a4d2aa', '#ea9695', '#eddf93', '#9bd6ec', '#f7c753', '#c78682', '#6bc3bc', '#e5362d', '#fbeabf'], // 默认需要 Grid 配置项 grid: {}, -- GitLab