提交 f543c474 编写于 作者: P pah100

datarange remove -1 index when category

上级 103a8c93
......@@ -7,7 +7,10 @@ define(function(require) {
var env = require('zrender/core/env');
var echarts = require('../../echarts');
var modelUtil = require('../../util/model');
var visualDefault = require('../../visual/visualDefault');
var VisualMapping = require('../../visual/VisualMapping');
var mapVisual = VisualMapping.mapVisual;
var eachVisual = VisualMapping.eachVisual;
var numberUtil = require('../../util/number');
var isArray = zrUtil.isArray;
var each = zrUtil.each;
......@@ -327,8 +330,6 @@ define(function(require) {
zrUtil.merge(controller, base); // Do not override
var isCategory = this.isCategory();
var makeDefault = VisualMapping.makeDefault;
var eachVisual = VisualMapping.eachVisual;
completeSingle.call(this, target);
completeSingle.call(this, controller);
......@@ -353,7 +354,7 @@ define(function(require) {
var visualType = base[state];
if (zrUtil.isString(visualType)) {
var defa = VisualMapping.getDefault(visualType, 'active', isCategory);
var defa = visualDefault.get(visualType, 'active', isCategory);
if (defa) {
base[state] = {};
base[state][visualType] = defa;
......@@ -369,10 +370,11 @@ define(function(require) {
function completeInactive(base, stateExist, stateAbsent) {
var optExist = base[stateExist];
var optAbsent = base[stateAbsent];
if (optExist && !optAbsent) {
optAbsent = base[stateAbsent] = {};
each(optExist, function (visualData, visualType) {
var defa = VisualMapping.getDefault(visualType, 'inactive', isCategory);
var defa = visualDefault.get(visualType, 'inactive', isCategory);
if (VisualMapping.isValidType(visualType) && defa) {
optAbsent[visualType] = defa;
}
......@@ -385,6 +387,7 @@ define(function(require) {
|| (controller.outOfRange || {}).symbol;
var symbolSizeExists = (controller.inRange || {}).symbolSize
|| (controller.outOfRange || {}).symbolSize;
var inactiveColor = this.get('inactiveColor');
each(this.stateList, function (state) {
......@@ -394,7 +397,7 @@ define(function(require) {
// Set inactive color for controller if no other color attr (like colorA) specified.
if (!visuals) {
visuals = controller[state] = {
color: makeDefault([this.get('inactiveColor')], isCategory)
color: isCategory ? inactiveColor : [inactiveColor]
};
}
......@@ -402,18 +405,17 @@ define(function(require) {
if (!visuals.symbol) {
visuals.symbol = symbolExists
&& zrUtil.clone(symbolExists, true)
|| makeDefault(['roundRect'], isCategory);
|| (isCategory ? 'roundRect' : ['roundRect']);
}
if (!visuals.symbolSize) {
visuals.symbolSize = symbolSizeExists
&& zrUtil.clone(symbolSizeExists, true)
|| makeDefault([itemSize[0], itemSize[0]], isCategory);
|| (isCategory ? itemSize[0] : [itemSize[0], itemSize[0]]);
}
// Filter square and none.
eachVisual(visuals.symbol, function (symbol, i) {
visuals.symbol[i] = (symbol === 'none' || symbol === 'square')
? 'roundRect' : symbol;
visuals.symbol = mapVisual(visuals.symbol, function (symbol) {
return (symbol === 'none' || symbol === 'square') ? 'roundRect' : symbol;
});
// Normalize symbolSize
......@@ -422,13 +424,11 @@ define(function(require) {
if (symbolSize) {
var max = -Infinity;
// symbolSize can be object when categories defined.
eachVisual(symbolSize, function (value, i) {
eachVisual(symbolSize, function (value) {
value > max && (max = value);
});
eachVisual(symbolSize, function (value, i) {
symbolSize[i] = linearMap(
value, [0, max], [0, itemSize[0]], true
);
visuals.symbolSize = mapVisual(symbolSize, function (value) {
return linearMap(value, [0, max], [0, itemSize[0]], true);
});
}
......
......@@ -87,15 +87,15 @@ define(function (require) {
* @protected
* @param {(number|Array)} targetValue
* @param {string=} forceState Specify state, instead of using getValueState method.
* @param {string=} visualCategory Specify visual type, defualt all available visualCategorys.
* @param {string=} visualCluster Specify visual type, defualt all available visualClusters.
*/
getControllerVisual: function (targetValue, forceState, visualCategory) {
getControllerVisual: function (targetValue, forceState, visualCluster) {
var dataRangeModel = this.dataRangeModel;
var targetIsArray = zrUtil.isArray(targetValue);
// targetValue is array when caculate gradient color,
// where forceState is required.
if (targetIsArray && (!forceState || visualCategory !== 'color')) {
if (targetIsArray && (!forceState || visualCluster !== 'color')) {
throw new Error(targetValue);
}
......@@ -122,11 +122,9 @@ define(function (require) {
zrUtil.each(visualTypes, function (type) {
var visualMapping = mappings[type];
(!visualCategory || VisualMapping.isInVisualCategory(type, visualCategory))
&& visualMapping
&& visualMapping.applyVisual(
targetValue, getter, setter
);
if (!visualCluster || VisualMapping.isInVisualCluster(type, visualCluster)) {
visualMapping && visualMapping.applyVisual(targetValue, getter, setter);
}
});
return visualObj;
......
......@@ -9,6 +9,8 @@ define(function (require) {
var each = zrUtil.each;
var isObject = zrUtil.isObject;
var CATEGORY_DEFAULT_VISUAL_INDEX = -1;
/**
* @param {Object} option
* @param {string} [option.type] See visualHandlers.
......@@ -22,9 +24,14 @@ define(function (require) {
* @param {Array.<Object>=} [option.specifiedVisuals] [visuals1, visuals2, ...],
* specific visual of some interval, available
* when dataNormalizer is 'piecewise' or 'category'
* @param {(Array|Object)} [option.visual=] Visual data.
* object only when dataNormalizer is 'category',
* like: {cate1: '#222', none: '#fff'}
* @param {(Array|Object|*)} [option.visual=] Visual data.
* when dataNormalizer is 'category',
* visual data can be array or object
* (like: {cate1: '#222', none: '#fff'})
* or primary types (which represents
* defualt category visual), otherwise visual
* can only be array.
*
*/
var VisualMapping = function (option) {
var dataNormalizer = option.dataNormalizer;
......@@ -42,14 +49,11 @@ define(function (require) {
*/
this.dataNormalizer = dataNormalizer;
// FIXME
// 用 -1 做 key不太好。换种方式?至少参数初始化时候不要用-1。
/**
* @readOnly
* @type {Object}
*/
var thisOption = this.option = zrUtil.clone(option, true);
thisOption.visual = this.option.visual;
/**
* @private
......@@ -197,7 +201,6 @@ define(function (require) {
? visual[normalized]
: linearMap(normalized, [0, 1], visual, true);
}
return result;
}
}
......@@ -213,18 +216,24 @@ define(function (require) {
// Process visual map input.
var visual = thisOption.visual;
if (!zrUtil.isArray(visual)) { // Is object.
if (!zrUtil.isArray(visual)) {
var visualArr = [];
each(visual, function (v, cate) {
var index = categoryMap[cate];
// '-1' means default visaul.
visualArr[index != null ? index : '-1'] = v;
});
if (zrUtil.isObject(visual)) {
each(visual, function (v, cate) {
var index = categoryMap[cate];
visualArr[index != null ? index : CATEGORY_DEFAULT_VISUAL_INDEX] = v;
});
}
else { // Is primary type, represents default visual.
visualArr[CATEGORY_DEFAULT_VISUAL_INDEX] = visual;
}
visual = thisOption.visual = visualArr;
}
// Remove categories that has no visual,
// then we can mapping them to '-1' visual.
// then we can mapping them to CATEGORY_DEFAULT_VISUAL_INDEX.
for (var i = categories.length - 1; i >= 0; i--) {
if (visual[i] == null) {
delete categoryMap[categories[i]];
......@@ -306,7 +315,7 @@ define(function (require) {
category: function (value) {
var index = this.option.categoryMap[value];
return index == null ? -1 : index;
return index == null ? CATEGORY_DEFAULT_VISUAL_INDEX : index;
}
};
......@@ -356,50 +365,48 @@ define(function (require) {
};
/**
* Convinent method.
* Visual can be Object or Array or primary type.
*
* @public
*/
VisualMapping.getDefault = function (visualType, key, isCategory) {
var value = (defaultOption[visualType] || {})[key];
return VisualMapping.makeDefault(
value != null ? zrUtil.clone(value, true) : null,
isCategory
);
};
/**
* @public
*/
VisualMapping.makeDefault = function (value, isCategory) {
if (isCategory && zrUtil.isArray(value) && value.length) {
var def = [];
def[-1] = value[value.length - 1];
return def;
VisualMapping.eachVisual = function (visual, callback, context) {
if (zrUtil.isObject(visual)) {
zrUtil.each(visual, callback, context);
}
else {
return value;
callback.call(context, visual);
}
};
/**
* @public
*/
VisualMapping.eachVisual = function (visual, callback, context) {
for (var i in visual) { // jshint ignore:line
// visual can be Object or Array, Considering key: -1.
callback.call(context, visual[i], i);
}
VisualMapping.mapVisual = function (visual, callback, context) {
var isPrimary;
var newVisual = zrUtil.isArray(visual)
? []
: zrUtil.isObject(visual)
? {}
: (isPrimary = true, null);
VisualMapping.eachVisual(visual, function (v, key) {
var newVal = callback.call(context, v, key);
isPrimary ? (newVisual = newVal) : (newVisual[key] = newVal);
});
return newVisual;
};
/**
* 'color', 'colorS', 'colorA', ... are in the same visualCluster named 'color'.
* Other visuals are in the cluster named as the same as theirselves.
*
* @public
* @param {string} visualType
* @param {string} visualCluster
* @return {boolean}
*/
VisualMapping.isInVisualCategory = function (visualType, visualCategory) {
return visualCategory === 'color'
? !!(visualType && visualType.indexOf(visualCategory) === 0)
: visualType === visualCategory;
VisualMapping.isInVisualCluster = function (visualType, visualCluster) {
return visualCluster === 'color'
? !!(visualType && visualType.indexOf(visualCluster) === 0)
: visualType === visualCluster;
};
/**
......@@ -452,39 +459,6 @@ define(function (require) {
return visualTypes;
};
var defaultOption = {
color: {
active: ['#006edd', '#e0ffff'],
inactive: ['rgba(0,0,0,0)']
},
colorS: {
active: [0.3, 1],
inactive: [0, 0]
},
colorL: {
active: [0.9, 0.5],
inactive: [0, 0]
},
colorA: {
active: [0.3, 1],
inactive: [0, 0]
},
symbol: {
active: ['circle', 'roundRect', 'diamond'],
inactive: ['none']
},
symbolSize: {
active: [10, 50],
inactive: [0, 0]
}
};
return VisualMapping;
});
/**
* @file Visual mapping.
*/
define(function (require) {
var zrUtil = require('zrender/core/util');
var visualDefault = {
/**
* @public
*/
get: function (visualType, key, isCategory) {
var value = zrUtil.clone(
(defaultOption[visualType] || {})[key],
true
);
return isCategory
? (zrUtil.isArray(value) ? value[value.length - 1] : value)
: value;
}
};
var defaultOption = {
color: {
active: ['#006edd', '#e0ffff'],
inactive: ['rgba(0,0,0,0)']
},
colorS: {
active: [0.3, 1],
inactive: [0, 0]
},
colorL: {
active: [0.9, 0.5],
inactive: [0, 0]
},
colorA: {
active: [0.3, 1],
inactive: [0, 0]
},
symbol: {
active: ['circle', 'roundRect', 'diamond'],
inactive: ['none']
},
symbolSize: {
active: [10, 50],
inactive: [0, 0]
}
};
return visualDefault;
});
require.config({
paths: {
'geoJson': '../geoData/geoJson',
'theme': '../theme'
'theme': '../theme',
'data': './data'
},
packages: [
{
......
此差异已折叠。
<html>
<head>
<meta charset="utf-8">
<script src="./esl.js"></script>
<script src="./config.js"></script>
</head>
<body>
<style>
html,
body,
#main {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="main"></div>
<script>
require([
'data/rainfall.json',
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/tooltip',
'echarts/component/grid',
'echarts/component/axis',
'echarts/component/dataZoom'
], function (data, echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 20; i++) {
xAxisData.push('类目' + i);
data1.push(Math.random() * 2);
data2.push(Math.random() * 2);
data3.push(Math.random() * 2);
}
chart.setOption({
tooltip: {
trigger: 'axis',
},
legend: {
data: ['降水量', '流量']
},
grid: {
x2: '15%'
},
xAxis: [
{
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
// data: xAxisData,
type: 'category',
boundaryGap: true,
// splitLine: {show: false},
axisLabel: {show: true},
axisLine: {show: true},
data: data.category
}
],
yAxis: [
{
// scale: true
boundaryGap: false,
splitLine: {show: false},
axisLabel: {
},
axisLine: {
lineStyle: {
color: '#666'
}
}
},
{
// scale: true
boundaryGap: false,
splitLine: {show: false},
position: 'right',
axisLabel: {
textStyle: {
color: '#eee'
}
},
axisLine: {
lineStyle: {
color: '#666'
}
}
}
],
series: [
{
name: '降水量',
type: 'line',
data: data.rainfall,
// itemStyle: {
// normal: {
// areaStyle: {}
// }
// }
},
{
name: '流量',
type: 'line',
data: data.flow,
yAxisIndex: 1,
// itemStyle: {
// normal: {
// areaStyle: {}
// }
// }
},
// {
// name: 'bar3',
// type: 'line',
// data: data3
// }
],
dataZoom: [
{
show: true,
orient: 'vertical',
yAxisIndex: [0]
},
{
show: true,
xAxisIndex: [0],
// realtime: false,
},
{
show: true,
orient: 'vertical',
yAxisIndex: [1],
x: '90%'
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册