Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 0ab7a4cf 编写于 作者: P pah100
浏览文件
操作

parallel support smooth, progressive

上级 43165d25
隐藏空白更改
内联 并排
Showing with 280 addition and 91 deletion
src/chart/parallel/ParallelSeries.js
浏览文件 @ 0ab7a4cf
......@@ -32,6 +32,9 @@ define(function(require) {
translateCategoryValue(axisModel, dim, rawData);
return {name: dim, type: 'ordinal'};
}
else if (modelDimsIndex < 0) {
return {name: dim, type: 'unknown'};
}
else {
return dim;
}
......@@ -40,6 +43,11 @@ define(function(require) {
var list = new List(dataDimsInfo, this);
list.initData(rawData);
// Anication is forbiden in large data mode.
if (this.option.large) {
this.option.animation = false;
}
return list;
},
......@@ -90,7 +98,8 @@ define(function(require) {
type: 'solid'
}
},
// smooth: false
progressive: false, // 100
smooth: false,
animationEasing: 'linear'
}
......
src/chart/parallel/ParallelView.js
浏览文件 @ 0ab7a4cf
......@@ -2,6 +2,9 @@ define(function (require) {
var graphic = require('../../util/graphic');
var zrUtil = require('zrender/core/util');
var polyHelper = require('../line/poly');
var SMOOTH = 0.3;
var ParallelView = require('../../view/Chart').extend({
......@@ -31,6 +34,9 @@ define(function (require) {
var oldData = this._data;
var coordSys = seriesModel.coordinateSystem;
var dimensions = coordSys.dimensions;
var option = seriesModel.option;
var progressive = option.progressive;
var smooth = option.smooth ? SMOOTH : null;
data.diff(oldData)
.add(add)
......@@ -39,19 +45,18 @@ define(function (require) {
.execute();
// Update style
data.eachItemGraphicEl(function (elGroup, idx) {
data.eachItemGraphicEl(function (line, idx) {
var itemModel = data.getItemModel(idx);
var lineStyleModel = itemModel.getModel('lineStyle.normal');
elGroup.eachChild(function (child) {
child.useStyle(zrUtil.extend(
lineStyleModel.getLineStyle(),
{
fill: null,
stroke: data.getItemVisual(idx, 'color'),
opacity: data.getItemVisual(idx, 'opacity')
}
));
});
line.useStyle(zrUtil.extend(
lineStyleModel.getLineStyle(),
{
fill: null,
stroke: data.getItemVisual(idx, 'color'),
opacity: data.getItemVisual(idx, 'opacity')
}
));
});
// First create
......@@ -66,64 +71,23 @@ define(function (require) {
this._data = data;
function add(newDataIndex) {
var values = data.getValues(dimensions, newDataIndex);
var elGroup = new graphic.Group();
dataGroup.add(elGroup);
eachAxisPair(
values, dimensions, coordSys,
function (pointPair, pairIndex) {
// FIXME
// init animation
if (pointPair) {
elGroup.add(createEl(pointPair));
}
}
);
data.setItemGraphicEl(newDataIndex, elGroup);
var points = createLinePoints(data, newDataIndex, dimensions, coordSys);
var line = createPoly(points, newDataIndex, progressive, smooth);
dataGroup.add(line);
data.setItemGraphicEl(newDataIndex, line);
}
function update(newDataIndex, oldDataIndex) {
var values = data.getValues(dimensions, newDataIndex);
var elGroup = oldData.getItemGraphicEl(oldDataIndex);
var newEls = [];
var elGroupIndex = 0;
eachAxisPair(
values, dimensions, coordSys,
function (pointPair, pairIndex) {
var el = elGroup.childAt(elGroupIndex++);
if (pointPair && !el) {
newEls.push(createEl(pointPair));
}
else if (pointPair) {
graphic.updateProps(el, {
shape: {
points: pointPair
}
}, seriesModel, newDataIndex);
}
}
);
// Remove redundent els
for (var i = elGroup.childCount() - 1; i >= elGroupIndex; i--) {
elGroup.remove(elGroup.childAt(i));
}
// Add new els
for (var i = 0, len = newEls.length; i < len; i++) {
elGroup.add(newEls[i]);
}
data.setItemGraphicEl(newDataIndex, elGroup);
var line = oldData.getItemGraphicEl(oldDataIndex);
var points = createLinePoints(data, newDataIndex, dimensions, coordSys);
line.shape.points = points;
line.dirty();
data.setItemGraphicEl(newDataIndex, line);
}
function remove(oldDataIndex) {
var elGroup = oldData.getItemGraphicEl(oldDataIndex);
dataGroup.remove(elGroup);
var line = oldData.getItemGraphicEl(oldDataIndex);
dataGroup.remove(line);
}
},
......@@ -158,35 +122,29 @@ define(function (require) {
return rectEl;
}
function eachAxisPair(values, dimensions, coordSys, cb) {
for (var i = 0, len = dimensions.length - 1; i < len; i++) {
var dimA = dimensions[i];
var dimB = dimensions[i + 1];
var valueA = values[i];
var valueB = values[i + 1];
cb(
(isEmptyValue(valueA, coordSys.getAxis(dimA).type)
|| isEmptyValue(valueB, coordSys.getAxis(dimB).type)
)
? null
: [
coordSys.dataToPoint(valueA, dimA),
coordSys.dataToPoint(valueB, dimB)
],
i
);
}
function createPoly(points, dataIndex, progressive, smooth) {
return new polyHelper.Polyline({
shape: {
points: points,
smooth: smooth
},
silent: true,
progressive: progressive ? Math.round(dataIndex / progressive) : 0,
z2: 10
});
}
function createEl(pointPair) {
return new graphic.Polyline({
shape: {points: pointPair},
silent: true
function createLinePoints(data, dataIndex, dimensions, coordSys) {
var points = [];
zrUtil.each(dimensions, function (dimName) {
var value = data.get(dimName, dataIndex);
if (!isEmptyValue(value, coordSys.getAxis(dimName).type)) {
points.push(coordSys.dataToPoint(value, dimName));
}
});
return points;
}
// FIXME
// 公用方法?
function isEmptyValue(val, axisType) {
......
src/component/tooltip/TooltipView.js
浏览文件 @ 0ab7a4cf
......@@ -1104,7 +1104,9 @@ define(function (require) {
});
}
else {
this.group.hide();
if (this.group.children().length) {
this.group.hide();
}
}
},
......
src/data/List.js
浏览文件 @ 0ab7a4cf
......@@ -17,7 +17,8 @@ define(function (require) {
// Ordinal data type can be string or int
'ordinal': Array,
'number': Array,
'time': Array
'time': Array,
'unknown': Array
};
var Model = require('../model/Model');
......
src/util/model.js
浏览文件 @ 0ab7a4cf
......@@ -195,7 +195,7 @@ define(function(require) {
modelUtil.converDataValue = function (value, dimInfo) {
// Performance sensitive.
var dimType = dimInfo && dimInfo.type;
if (dimType === 'ordinal') {
if (dimType === 'ordinal' || dimType === 'unknown') {
return value;
}
......
test/parallel-nutrients.html 0 → 100644
浏览文件 @ 0ab7a4cf
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="reset.css">
</head>
<body>
<style>
body {
background: #333;
}
#main {
height: 400px;
}
</style>
<div id="main"></div>
<script>
var echarts;
var colorTool;
var chart;
var myChart;
var groupCategories = [];
var groupColors = [];
require([
'echarts',
'zrender/tool/color',
'echarts/chart/parallel',
'echarts/component/legend',
'echarts/component/tooltip',
'echarts/component/toolbox',
'echarts/component/visualMap',
], function (ec, ct) {
$.getJSON('./data/nutrients.json', function (data) {
echarts = ec;
colorTool = ct;
normalizeData(data);
chart = myChart = echarts.init(document.getElementById('main'));
chart.setOption(getOption(data));
});
var indices = {
name: 0,
group: 1,
id: 16
};
var schema = [
{name: 'name', index: 0},
{name: 'group', index: 1},
{name: 'protein', index: 2},
{name: 'calcium', index: 3},
{name: 'sodium', index: 4},
{name: 'fiber', index: 5},
{name: 'vitaminc', index: 6},
{name: 'potassium', index: 7},
{name: 'carbohydrate', index: 8},
{name: 'sugars', index: 9},
{name: 'fat', index: 10},
{name: 'water', index: 11},
{name: 'calories', index: 12},
{name: 'saturated', index: 13},
{name: 'monounsat', index: 14},
{name: 'polyunsat', index: 15},
{name: 'id', index: 16}
];
function normalizeData(originData) {
var groupMap = {};
originData.forEach(row => {
var groupName = row[indices.group];
if (!groupMap.hasOwnProperty(groupName)) {
groupMap[groupName] = 1;
}
});
originData.forEach(row => {
row.forEach((item, index) => {
if (index !== indices.name
&& index !== indices.group
&& index !== indices.id
) {
// Convert null to zero, as all of them under unit "g".
row[index] = parseFloat(item) || 0;
}
});
});
for (var groupName in groupMap) {
if (groupMap.hasOwnProperty(groupName)) {
groupCategories.push(groupName);
}
}
var hStep = Math.round(300 / (groupCategories.length - 1));
for (var i = 0; i < groupCategories.length; i++) {
groupColors.push(colorTool.modifyHSL('#5A94DF', hStep * i));
}
}
function getOption(data) {
var lineStyle = {
normal: {
width: 1,
opacity: 0.01
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
return {
backgroundColor: '#333',
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj[0].value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ schema[1].name + '：' + value[1] + '<br>'
+ schema[2].name + '：' + value[2] + '<br>'
+ schema[3].name + '：' + value[3] + '<br>'
+ schema[4].name + '：' + value[4] + '<br>'
+ schema[5].name + '：' + value[5] + '<br>'
+ schema[6].name + '：' + value[6] + '<br>';
}
},
visualMap: {
show: true,
type: 'piecewise',
categories: groupCategories,
dimension: indices.group,
inRange: {
color: groupColors //['#d94e5d','#eac736','#50a3ba']
},
outOfRange: {
color: groupColors //['#d94e5d','#eac736','#50a3ba']
}
},
parallelAxis: [
{dim: 2, name: schema[2].name},
{dim: 4, name: schema[4].name},
{dim: 3, name: schema[3].name},
{dim: 5, name: schema[5].name},
{dim: 6, name: schema[6].name},
{dim: 7, name: schema[7].name},
{dim: 8, name: schema[8].name},
{dim: 9, name: schema[9].name},
{dim: 10, name: schema[10].name},
{dim: 11, name: schema[11].name},
{dim: 12, name: schema[12].name},
{dim: 13, name: schema[13].name},
{dim: 14, name: schema[14].name},
{dim: 15, name: schema[15].name},
{dim: 16, name: schema[16].name, scale: true}
],
parallel: {
bottom: 100,
parallelAxisDefault: {
type: 'value',
name: 'nutrients',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#fff',
fontSize: 14
},
axisLine: {
lineStyle: {
color: '#aaa'
}
},
axisTick: {
lineStyle: {
color: '#777'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'
}
}
}
},
animation: false,
series: [
{
name: 'nutrients',
type: 'parallel',
lineStyle: lineStyle,
inactiveOpacity: 0,
activeOpacity: 0.01,
progressive: 100,
smooth: true,
data: data
}
]
};
}
});
</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.
先完成此消息的编辑！
想要评论请 注册 或