625 lines
35 KiB
HTML
Generated
625 lines
35 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src='lib/jquery.min.js'></script>
|
|
<script src="../dist/echarts.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
<div id="main0"></div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
function initRawData(count) {
|
|
var M_TAG_LIST = ['MA', 'MB', 'MC', 'MD'];
|
|
var Z_TAG_LIST = ['ZA', 'ZB', 'ZC', 'ZD', 'ZE'];
|
|
var data = [];
|
|
var currDate = +new Date(2015, 2, 1);
|
|
var ONE_DAY = 3600 * 24 * 1000;
|
|
for (var i = 0; i < count; i++, currDate += ONE_DAY) {
|
|
data.push([
|
|
currDate,
|
|
makeRandomValue([10, 40], 0),
|
|
makeRandomValue([0.01, 0.99], 2),
|
|
makeRandomValue([1, 10], 1),
|
|
// makeRandomValue([1000, 9000], 0),
|
|
// makeRandomValue([1000, 9000], 0),
|
|
// makeRandomValue([10, 90], 0),
|
|
M_TAG_LIST[makeRandomValue([0, M_TAG_LIST.length - 1], 0)],
|
|
Z_TAG_LIST[makeRandomValue([0, Z_TAG_LIST.length - 1], 0)],
|
|
'P' + i,
|
|
]);
|
|
}
|
|
|
|
function makeRandomValue(range, precision) {
|
|
return +(
|
|
Math.random() * (range[1] - range[0]) + range[0]
|
|
).toFixed(precision);
|
|
}
|
|
|
|
return data;
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts', 'ecStat', 'ecSimpleTransform', 'ecSimpleOptionPlayer'
|
|
], function (echarts, ecStat, ecSimpleTransform, ecSimpleOptionPlayer) {
|
|
|
|
echarts.registerTransform(ecSimpleTransform.aggregate);
|
|
echarts.registerTransform(ecStat.transform.clustering);
|
|
|
|
|
|
const PIE_COLORS = [
|
|
'#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
|
|
];
|
|
const CLUSTER_COLORS = [
|
|
'#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686', '#a48dc1', '#5da6bc', '#b9dcae'
|
|
];
|
|
const Z_TAG_COLORS = [
|
|
'#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
|
|
'#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
|
|
];
|
|
const Z_TAG_COLORS_2 = [
|
|
'#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090',
|
|
'#91c4c5', '#6890ba'
|
|
];
|
|
const SYMBOL_PATHS = [
|
|
'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85 -27.42,-157.96 0,-88.85z',
|
|
'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
|
|
'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM22 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.192-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.050 0.301-0.311 0.522-0.616 0.522-0 0 0 0-0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM10 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.193-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.051 0.301-0.311 0.522-0.616 0.522 0 0 0 0 0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM6 18h6v7.745c-3.44-0.894-6-4.035-6-7.745zM14 26v-8h4v8h-4zM20 25.745v-7.745h6c0 3.71-2.559 6.851-6 7.745z',
|
|
'path://M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999 21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401 1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4 1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z',
|
|
'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z',
|
|
'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z'
|
|
];
|
|
var CONTENT_COLOR = '#37A2DA';
|
|
var ANIMATION_DURATION_UPDATE = 1500;
|
|
|
|
|
|
// var rawData = initRawData(COUNT);
|
|
// console.log(JSON.stringify(rawData));
|
|
var rawData = [[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[1426089600000,18,0.28,2.5,"MA","ZC","P11"],[1426176000000,20,0.62,6,"MB","ZD","P12"],[1426262400000,32,0.79,1.7,"MB","ZA","P13"],[1426348800000,17,0.58,4.4,"MD","ZB","P14"],[1426435200000,23,0.77,3,"MB","ZA","P15"],[1426521600000,39,0.87,4.6,"MC","ZA","P16"],[1426608000000,15,0.7,6,"MB","ZC","P17"],[1426694400000,21,0.94,2.7,"MB","ZD","P18"],[1426780800000,28,0.48,4.5,"MC","ZC","P19"],[1426867200000,31,0.49,9.8,"MA","ZC","P20"],[1426953600000,27,0.87,7.7,"MB","ZB","P21"],[1427040000000,27,0.82,5.5,"MC","ZB","P22"],[1427126400000,11,0.53,2.7,"MD","ZC","P23"],[1427212800000,13,0.7,7.6,"MB","ZD","P24"],[1427299200000,39,0.99,4.8,"MB","ZD","P25"],[1427385600000,32,0.91,2.1,"MB","ZE","P26"],[1427472000000,20,0.97,5,"MB","ZA","P27"],[1427558400000,36,0.01,8.9,"MB","ZD","P28"],[1427644800000,22,0.08,9.2,"MB","ZE","P29"],[1427731200000,21,0.36,3.1,"MD","ZC","P30"],[1427817600000,11,0.15,5.8,"MD","ZB","P31"],[1427904000000,39,0.02,1.4,"MC","ZD","P32"],[1427990400000,20,0.86,8.7,"MB","ZD","P33"],[1428076800000,23,0.24,7.2,"MD","ZB","P34"],[1428163200000,12,0.06,2,"MD","ZB","P35"],[1428249600000,36,0.42,8.2,"MA","ZB","P36"],[1428336000000,17,0.48,7.5,"MB","ZC","P37"],[1428422400000,19,0.12,6.6,"MB","ZB","P38"],[1428508800000,39,0.58,3.1,"MC","ZE","P39"],[1428595200000,10,0.18,6.6,"MC","ZD","P40"],[1428681600000,22,0.28,2.1,"MB","ZE","P41"],[1428768000000,27,0.33,1.9,"MC","ZB","P42"],[1428854400000,37,0.46,9.4,"MD","ZE","P43"],[1428940800000,18,0.96,5.5,"MB","ZA","P44"],[1429027200000,11,0.61,8.2,"MD","ZC","P45"],[1429113600000,15,0.88,4.6,"MD","ZA","P46"],[1429200000000,38,0.89,7.2,"MD","ZC","P47"],[1429286400000,20,0.39,5.4,"MB","ZB","P48"],[1429372800000,30,0.71,5.5,"MA","ZA","P49"]];
|
|
|
|
var RAW_DATA_DIMENSIONS = ['DATE', 'ATA', 'STE', 'CTZ', 'M_TAG', 'Z_TAG', 'ID'];
|
|
var M_TAG_SUM_DIMENSIONS = ['ATA', 'STE', 'CTZ', 'M_TAG'];
|
|
var RAW_CLUSTER_DIMENSIONS = ['DATE', 'ATA', 'STE', 'CTZ', 'M_TAG', 'Z_TAG', 'ID', 'CLUSTER_IDX', 'CLUSTER_CENTER_ATA', 'CLUSTER_CENTER_STE'];
|
|
var RAW_CLUSTER_CENTERS_DIMENSIONS = ['COUNT', 'CLUSTER_IDX', 'CLUSTER_CENTER_ATA', 'CLUSTER_CENTER_STE'];
|
|
|
|
|
|
function getFromPalette(value, palette) {
|
|
if (!palette.__colorMap) {
|
|
palette.__colorMap = {};
|
|
}
|
|
if (palette.__colorIdx == null) {
|
|
palette.__colorIdx = 0;
|
|
}
|
|
if (!palette.__colorMap[value]) {
|
|
palette.__colorMap[value] = palette[palette.__colorIdx];
|
|
palette.__colorIdx++;
|
|
if (palette.__colorIdx >= palette.length) {
|
|
palette.__colorIdx = 0;
|
|
}
|
|
}
|
|
return palette.__colorMap[value];
|
|
}
|
|
|
|
|
|
|
|
var baseOption = {
|
|
dataset: [{
|
|
id: 'raw',
|
|
dimensions: RAW_DATA_DIMENSIONS,
|
|
source: rawData
|
|
}, {
|
|
id: 'mTagSum',
|
|
fromDatasetId: 'raw',
|
|
transform: {
|
|
type: 'ecSimpleTransform:aggregate',
|
|
config: {
|
|
resultDimensions: [
|
|
{ from: 'ATA', method: 'sum' },
|
|
{ from: 'STE', method: 'sum' },
|
|
{ from: 'CTZ', method: 'sum' },
|
|
{ from: 'M_TAG' }
|
|
],
|
|
groupBy: 'M_TAG'
|
|
}
|
|
}
|
|
}, {
|
|
id: 'rawClusters',
|
|
fromDatasetId: 'raw',
|
|
transform: {
|
|
type: 'ecStat:clustering',
|
|
print: true,
|
|
config: {
|
|
clusterCount: 4,
|
|
dimensions: ['ATA', 'STE'],
|
|
outputClusterIndexDimension: {
|
|
index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_IDX'),
|
|
name: 'CLUSTER_IDX'
|
|
},
|
|
outputCentroidDimensions: [{
|
|
index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_ATA'),
|
|
name: 'CLUSTER_CENTER_ATA'
|
|
}, {
|
|
index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_STE'),
|
|
name: 'CLUSTER_CENTER_STE'
|
|
}]
|
|
}
|
|
}
|
|
}, {
|
|
id: 'rawClusterCenters',
|
|
fromDatasetId: 'rawClusters',
|
|
transform: {
|
|
type: 'ecSimpleTransform:aggregate',
|
|
print: true,
|
|
config: {
|
|
resultDimensions: [
|
|
{ name: 'COUNT', from: 'ATA', method: 'count' },
|
|
{ from: 'CLUSTER_CENTER_ATA' },
|
|
{ from: 'CLUSTER_CENTER_STE' },
|
|
{ from: 'CLUSTER_IDX' }
|
|
],
|
|
groupBy: 'CLUSTER_IDX'
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {}
|
|
};
|
|
|
|
|
|
var AXIS_STYLE = {
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#333'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#777'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#999',
|
|
fontSize: 20,
|
|
fontFamily: 'Lato'
|
|
}
|
|
};
|
|
var BG_COLOR = '#000';
|
|
|
|
|
|
|
|
function makeScatterOptionCreator(renderItem) {
|
|
return function () {
|
|
var datasetId = 'rawClusters';
|
|
return {
|
|
datasetId: datasetId,
|
|
option: {
|
|
backgroundColor: BG_COLOR,
|
|
grid: {
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
name: 'STE',
|
|
...AXIS_STYLE
|
|
},
|
|
yAxis: {
|
|
name: 'ATA',
|
|
...AXIS_STYLE
|
|
},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'cartesian2d',
|
|
animationDurationUpdate: ANIMATION_DURATION_UPDATE,
|
|
datasetId: datasetId,
|
|
universalTransition: {
|
|
enabled: true
|
|
},
|
|
encode: {
|
|
itemName: 'ID',
|
|
x: 'STE',
|
|
y: 'ATA',
|
|
tooltip: ['STE', 'ATA']
|
|
},
|
|
renderItem: renderItem
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
|
|
var optionCreators = {
|
|
|
|
'Scatter_circle_ATA_STE': makeScatterOptionCreator(
|
|
function (params, api) {
|
|
var pos = api.coord([
|
|
api.value('STE'),
|
|
api.value('ATA')
|
|
]);
|
|
var zTagVal = api.value('Z_TAG');
|
|
var color = getFromPalette(zTagVal, Z_TAG_COLORS);
|
|
var symbolPath = getFromPalette(zTagVal, SYMBOL_PATHS);
|
|
return {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: pos[0],
|
|
cy: pos[1],
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: color
|
|
},
|
|
transition: ['shape', 'style']
|
|
};
|
|
}
|
|
),
|
|
|
|
'Scatter_singleSVG_ATA_STE': makeScatterOptionCreator(
|
|
function (params, api) {
|
|
var pos = api.coord([
|
|
api.value('STE'),
|
|
api.value('ATA')
|
|
]);
|
|
var zTagVal = api.value('Z_TAG');
|
|
var color = getFromPalette(zTagVal, Z_TAG_COLORS);
|
|
var symbolPath = getFromPalette(zTagVal, SYMBOL_PATHS);
|
|
return {
|
|
type: 'path',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
shape: {
|
|
pathData: symbolPath,
|
|
width: 40,
|
|
height: 40
|
|
},
|
|
style: {
|
|
fill: color
|
|
},
|
|
transition: ['style']
|
|
};
|
|
}
|
|
),
|
|
|
|
'Scatter_groupShape_ATA_STE': makeScatterOptionCreator(
|
|
function (params, api) {
|
|
var pos = api.coord([
|
|
api.value('STE'),
|
|
api.value('ATA')
|
|
]);
|
|
var zTagVal = api.value('Z_TAG');
|
|
var color1 = getFromPalette(zTagVal, Z_TAG_COLORS);
|
|
var color2 = getFromPalette(zTagVal, Z_TAG_COLORS_2);
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
children: [{
|
|
type: 'polygon',
|
|
shape: {
|
|
points: [
|
|
[-40, -2],
|
|
[40, -2],
|
|
[0, -35]
|
|
]
|
|
},
|
|
style: {
|
|
fill: color1,
|
|
stroke: '#333',
|
|
lineWidth: 1
|
|
},
|
|
transition: ['shape', 'style']
|
|
}, {
|
|
type: 'rect',
|
|
shape: {
|
|
x: -20,
|
|
y: 0,
|
|
width: 40,
|
|
height: 30
|
|
},
|
|
style: {
|
|
fill: color2,
|
|
stroke: '#333',
|
|
lineWidth: 1
|
|
},
|
|
transition: ['shape', 'style']
|
|
}]
|
|
};
|
|
}
|
|
),
|
|
|
|
'Bar_mSum_ATA': function () {
|
|
var datasetId = 'mTagSum'
|
|
return {
|
|
datasetId: datasetId,
|
|
option: {
|
|
backgroundColor: BG_COLOR,
|
|
grid: {
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
...AXIS_STYLE
|
|
},
|
|
yAxis: {
|
|
...AXIS_STYLE
|
|
},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'cartesian2d',
|
|
animationDurationUpdate: ANIMATION_DURATION_UPDATE,
|
|
datasetId: datasetId,
|
|
universalTransition: {
|
|
enabled: true
|
|
},
|
|
encode: {
|
|
x: 'M_TAG',
|
|
y: 'ATA',
|
|
itemGroupId: 'M_TAG',
|
|
tooltip: ['M_TAG', 'ATA']
|
|
},
|
|
renderItem: function (params, api) {
|
|
var mTagVal = api.value('M_TAG');
|
|
var ataVal = api.value('ATA');
|
|
var tarPos = api.coord([mTagVal, ataVal]);
|
|
var zeroPos = api.coord([mTagVal, 0]);
|
|
var size = api.size([mTagVal, ataVal]);
|
|
var width = size[0] * 0.4;
|
|
return {
|
|
type: 'rect',
|
|
shape: {
|
|
x: tarPos[0] - width / 2,
|
|
y: tarPos[1],
|
|
height: zeroPos[1] - tarPos[1],
|
|
width: width,
|
|
},
|
|
style: {
|
|
fill: CONTENT_COLOR,
|
|
stroke: '#555',
|
|
lineWidth: 0
|
|
},
|
|
transition: ['shape', 'style']
|
|
};
|
|
}
|
|
}
|
|
}
|
|
};
|
|
},
|
|
|
|
'Pie_mSum_ATA': function () {
|
|
var datasetId = 'mTagSum';
|
|
return {
|
|
datasetId: datasetId,
|
|
option: {
|
|
backgroundColor: BG_COLOR,
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'none',
|
|
animationDurationUpdate: ANIMATION_DURATION_UPDATE,
|
|
datasetId: datasetId,
|
|
encode: {
|
|
itemName: 'M_TAG',
|
|
value: 'ATA',
|
|
tooltip: 'ATA'
|
|
},
|
|
universalTransition: {
|
|
enabled: true
|
|
},
|
|
renderItem: function (params, api) {
|
|
var context = params.context;
|
|
if (!context.layout) {
|
|
context.layout = true;
|
|
var totalValue = 0;
|
|
for (var i = 0; i < params.dataInsideLength; i++) {
|
|
totalValue += api.value('ATA', i);
|
|
}
|
|
var angles = [];
|
|
var colors = [];
|
|
var currentAngle = -Math.PI / 2;
|
|
for (var i = 0; i < params.dataInsideLength; i++) {
|
|
colors.push(PIE_COLORS[i]);
|
|
var angle = api.value('ATA', i) / totalValue * Math.PI * 2;
|
|
angles.push([currentAngle, angle + currentAngle - 0.01]);
|
|
currentAngle += angle;
|
|
}
|
|
context.angles = angles;
|
|
context.colors = colors;
|
|
}
|
|
|
|
var width = chart.getWidth();
|
|
var height = chart.getHeight();
|
|
return {
|
|
type: 'sector',
|
|
shape: {
|
|
cx: width / 2,
|
|
cy: height / 2,
|
|
r: Math.min(width, height) / 3,
|
|
r0: Math.min(width, height) / 5,
|
|
startAngle: context.angles[params.dataIndex][0],
|
|
endAngle: context.angles[params.dataIndex][1],
|
|
clockwise: true
|
|
},
|
|
style: {
|
|
// fill: CONTENT_COLOR,
|
|
fill: context.colors[params.dataIndex],
|
|
stroke: '#555',
|
|
lineWidth: 0,
|
|
strokeNoScale: true
|
|
},
|
|
transition: ['shape', 'style']
|
|
};
|
|
}
|
|
}
|
|
}
|
|
};
|
|
},
|
|
|
|
'Scatter_ATA_STE_Cluster_Center': function () {
|
|
var datasetId = 'rawClusterCenters';
|
|
return {
|
|
datasetId: datasetId,
|
|
option: {
|
|
backgroundColor: BG_COLOR,
|
|
grid: {
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
name: 'STE',
|
|
...AXIS_STYLE
|
|
},
|
|
yAxis: {
|
|
name: 'ATA',
|
|
...AXIS_STYLE
|
|
},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'cartesian2d',
|
|
animationDurationUpdate: ANIMATION_DURATION_UPDATE,
|
|
datasetId: datasetId,
|
|
universalTransition: {
|
|
enabled: true
|
|
},
|
|
encode: {
|
|
x: 'CLUSTER_CENTER_STE',
|
|
y: 'CLUSTER_CENTER_ATA',
|
|
itemGroupId: 'CLUSTER_IDX',
|
|
tooltip: ['CLUSTER_CENTER_STE', 'CLUSTER_CENTER_ATA']
|
|
},
|
|
renderItem: function (params, api) {
|
|
var context = params.context;
|
|
if (!context.layout) {
|
|
context.layout = true;
|
|
context.totalCount = 0;
|
|
for (var i = 0; i < params.dataInsideLength; i++) {
|
|
context.totalCount += api.value('COUNT', i);
|
|
}
|
|
}
|
|
|
|
var pos = api.coord([
|
|
api.value('CLUSTER_CENTER_STE'),
|
|
api.value('CLUSTER_CENTER_ATA')
|
|
]);
|
|
var count = api.value('COUNT');
|
|
var radius = count / context.totalCount * 100 + 10;
|
|
return {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: pos[0],
|
|
cy: pos[1],
|
|
r: radius,
|
|
},
|
|
style: {
|
|
// fill: CONTENT_COLOR,
|
|
fill: CLUSTER_COLORS[params.dataIndex],
|
|
stroke: '#555',
|
|
lineWidth: 0
|
|
},
|
|
transition: ['shape', 'style']
|
|
};
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
};
|
|
|
|
|
|
|
|
var options = {};
|
|
var buttons = [];
|
|
|
|
echarts.util.each(optionCreators, function (creator, key) {
|
|
var optionWrap = creator();
|
|
options[key] = Object.assign({}, baseOption, optionWrap.option);
|
|
buttons.push({
|
|
text: key,
|
|
onclick: function () {
|
|
chart.setOption(options[key], true);
|
|
}
|
|
});
|
|
});
|
|
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'Test: buttons, should morph animation combine/separate.',
|
|
'Test: click buttons **before animation finished**, should no blink.',
|
|
'Test: click buttons **twice**, should no blink.',
|
|
'Test: use dataZoom, the "update animation" should exist'
|
|
],
|
|
option: options['Scatter_singleSVG_ATA_STE'],
|
|
lazyUpdate: true,
|
|
height: 600,
|
|
buttons: buttons.concat([{
|
|
text: 'resizeToSmall',
|
|
onclick: function () {
|
|
chart.resize({
|
|
width: 300,
|
|
height: 400
|
|
});
|
|
}
|
|
}, {
|
|
text: 'resizeToNormal',
|
|
onclick: function () {
|
|
chart.resize({
|
|
width: 'auto',
|
|
height: 600
|
|
});
|
|
}
|
|
}])
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |