提交 b93bd09d 编写于 作者: L lang

Two category axis bug fix

上级 24ee6345
......@@ -156,8 +156,7 @@ define(function (require) {
fill: legendModel.get('backgroundColor'),
lineWidth: legendModel.get('borderWidth')
},
// Behind item elements
z2: -1
silent: true
});
graphic.subPixelOptimizeRect(rect);
......
......@@ -178,8 +178,7 @@ define(function(require) {
fill: titleModel.get('backgroundColor'),
lineWidth: titleModel.get('borderWidth')
},
// Behind item elements
z2: -1
silent: true
});
graphic.subPixelOptimizeRect(rect);
......
......@@ -26,8 +26,7 @@ define(function (require) {
var isObject = zrUtil.isObject;
var IMMUTABLE_PROPERTIES = [
'stackedOn', '_nameList',
'_rawValueDims', '_optionModels'
'stackedOn', '_nameList', '_rawData', '_optionModels'
];
var transferImmuProperties = function (a, b) {
......@@ -95,12 +94,6 @@ define(function (require) {
*/
this.indices = [];
/**
* Dimensions hint for regenerating the raw value
* @type {Array.<string>}
*/
this._rawValueDims = ['x'];
/**
* Data storage
* @type {Object.<key, TypedArray|Array>}
......@@ -151,6 +144,11 @@ define(function (require) {
* @private
*/
this._graphicEls = [];
/**
* Raw data
*/
this._rawData = [];
}
var listProto = List.prototype;
......@@ -170,6 +168,9 @@ define(function (require) {
* @param {Array.<string>} [nameList]
*/
listProto.initData = function (data, nameList) {
this._rawData = data;
// Clear
var optionModels = this._optionModels = [];
var storage = this._storage = {};
......@@ -202,7 +203,10 @@ define(function (require) {
);
for (var idx = 0; idx < data.length; idx++) {
var value = data[idx];
// Each data item contains value and option
// Each data item contains value and other option
// {
// value: []
// }
if (data[idx] != null && data[idx].hasOwnProperty('value')) {
value = data[idx].value;
var model = new Model(data[idx], this.hostModel);
......@@ -253,8 +257,6 @@ define(function (require) {
indices.push(idx);
}
this._rawValueDims = rawValueTo1D ? dimensions.slice(1, 2) : dimensions.slice();
// Use the name in option as data id in two value axis case
for (var i = 0; i < optionModelIndices.length; i++) {
if (!nameList[i]) {
......@@ -336,24 +338,16 @@ define(function (require) {
var min = Infinity;
var max = -Infinity;
var value;
var dimInfo = this._dimensionInfos[dim];
// var dimInfo = this._dimensionInfos[dim];
if (dimData) {
var count = this.count();
if (dimInfo.type === 'ordinal') {
// Ordinal data must be incremental
var first = this.get(dim, 0);
var last = this.get(dim, count - 1);
var indexOf = zrUtil.indexOf;
if (isNaN(first)) { // Is string
first = indexOf(dimData, first);
}
if (isNaN(last)) { // Is string
last = indexOf(dimData, last);
}
return [first, last];
}
for (var i = 0, len = count; i < len; i++) {
// var isOrdinal = dimInfo.type === 'ordinal';
for (var i = 0, len = this.count(); i < len; i++) {
value = this.get(dim, i, stack);
// FIXME
// if (isOrdinal && typeof value === 'string') {
// value = zrUtil.indexOf(dimData, value);
// console.log(value);
// }
value < min && (min = value);
value > max && (max = value);
}
......@@ -385,19 +379,11 @@ define(function (require) {
* @return {number}
*/
listProto.getRawValue = function (idx) {
var rawValueDims = this._rawValueDims;
var storage = this._storage;
if (rawValueDims.length === 1) {
var dimData = storage[rawValueDims[0]];
return dimData && dimData[idx];
}
else {
var value = [];
for (var i = 0; i < rawValueDims.length; i++) {
value[i] = this.get(rawValueDims[i], idx);
}
return value;
var itemOpt = this._rawData[idx];
if (itemOpt && itemOpt.hasOwnProperty('value')) {
return itemOpt.value;
}
return itemOpt;
};
/**
......
......@@ -153,7 +153,7 @@ define(function (require) {
var labels = [];
var ticks = this.getTicks();
for (var i = 0; i < ticks.length; i++) {
labels.push(ticks[i].toString());
labels.push(this.getLabel(ticks[i]));
}
return labels;
},
......@@ -164,7 +164,7 @@ define(function (require) {
*/
// FIXME addCommas
getLabel: function (data) {
return data;
return data + '';
},
/**
......
......@@ -20,6 +20,7 @@
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/title',
'echarts/component/dataZoom'
], function (echarts) {
......@@ -127,13 +128,13 @@
{
name : '流量(m^3/s)',
type : 'value',
max : 500,
inverse: true
max : 500
},
{
name : '降雨量(mm)',
type : 'value',
position: 'right'
position: 'right',
inverse: true
}
],
series : [
......
<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%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/pie',
'echarts/component/title',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var labelTop = {
normal : {
label : {
show : true,
position : 'center',
formatter : '{b}',
textStyle: {
baseline : 'bottom'
}
},
labelLine : {
show : false
}
}
};
var labelFromatter = {
normal : {
label : {
formatter : function (params){
return 100 - params.value + '%'
},
textStyle: {
baseline : 'top'
}
}
},
}
var labelBottom = {
normal : {
color: '#ccc',
label : {
show : true,
position : 'center'
},
labelLine : {
show : false
}
}
};
var radius = [40, 55];
chart.setOption({
legend: {
x : 'center',
y : 'center',
data:[
'GoogleMaps','Facebook','Youtube','Google+','Weixin',
'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'
]
},
title : {
text: 'The App World',
subtext: 'from global web index',
x: 'center'
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
width: '20%',
height: '30%',
itemStyle : {
normal : {
label : {
formatter : function (params){
return 'other\n' + params.value + '%\n'
},
textStyle: {
baseline : 'middle'
}
}
},
}
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
type : 'pie',
center : ['10%', '30%'],
radius : radius,
x: '0%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:46, itemStyle : labelBottom},
{name:'GoogleMaps', value:54,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['30%', '30%'],
radius : radius,
x:'20%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:56, itemStyle : labelBottom},
{name:'Facebook', value:44,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['50%', '30%'],
radius : radius,
x:'40%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:65, itemStyle : labelBottom},
{name:'Youtube', value:35,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['70%', '30%'],
radius : radius,
x:'60%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:70, itemStyle : labelBottom},
{name:'Google+', value:30,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['90%', '30%'],
radius : radius,
x:'80%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:73, itemStyle : labelBottom},
{name:'Weixin', value:27,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['10%', '70%'],
radius : radius,
y: '55%', // for funnel
x: '0%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:78, itemStyle : labelBottom},
{name:'Twitter', value:22,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['30%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'20%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:78, itemStyle : labelBottom},
{name:'Skype', value:22,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['50%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'40%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:78, itemStyle : labelBottom},
{name:'Messenger', value:22,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['70%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'60%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:83, itemStyle : labelBottom},
{name:'Whatsapp', value:17,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['90%', '70%'],
radius : radius,
y: '55%', // for funnel
x:'80%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:89, itemStyle : labelBottom},
{name:'Instagram', value:11,itemStyle : labelTop}
]
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
......@@ -26,30 +26,65 @@
renderer: 'canvas'
});
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var usedMap = {};
var data = [];
for (var i = 0; i < 100; i++) {
do {
var x = Math.round(Math.random() * (hours.length - 1));
var y = Math.round(Math.random() * (days.length - 1));
var key = y * 100 + x;
} while(usedMap[key])
usedMap[key] = true;
data.push([
x, y,
Math.random()
])
}
chart.setOption({
legend: {
data: ['Chart coord']
},
xAxis: {
type: 'category',
data: ['Line', 'Bar', 'Scatter']
data: hours,
splitLine: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
type: 'category',
data: ['Cartesian', 'Polar', 'Geo']
data: days,
axisLine: {
show: false
}
},
series: [{
name: 'Chart coord',
type: 'scatter',
symbolSize: 100,
data: [
['Line', 'Cartesian'],
['Line', 'Polar'],
['Bar', 'Cartesian'],
['Scatter', 'Cartesian'],
['Scatter', 'Polar'],
['Scatter', 'Geo']
]
itemStyle: {
normal: {
color: '#d14a61'
}
},
symbolSize: function (val) {
return val[2] * 30;
},
data: data
}]
});
})
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册