slides/custom/asset/ec-demo/cycle-plot.html (289 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/jquery.min.js"></script>
<script src="../common/echarts.min.js"></script>
<script src="../common/prettify/prettify.js"></script>
<script src="../common/showCode.js"></script>
<link rel="stylesheet" href="../common/reset.css">
<link rel="stylesheet" href="../common/prettify/prettify.css">
<script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script>
<link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css">
</head>
<body>
<div id="main">
<pre class="prettyprint">
function renderTrendItem(param, api) {
...
return {
type: 'polyline',
shape: {
points: ...
},
...
}
}
function renderTrendItem(param, api) {
...
return {
type: 'line',
shape: {
x1: ...,
y1: ...,
x2: ...,
y2: ...
},
...
}
}
</pre>
<div id="chart"></div>
</div>
<script>
var rawData = [
[2002, 14, 21, 25, 21, 26, 32, 27, 20, 10, 11, 5, 5],
[2003, 18, 24, 28, 24, 33, 37, 30, 25, 13, 14, 6, 6],
[2004, 22, 31, 36, 28, 37, 43, 35, 30, 13, 13, 7, 7],
[2005, 25, 32, 38, 34, 39, 48, 38, 29, 14, 14, 8, 8],
[2006, 29, 38, 47, 33, 44, 57, 41, 39, 16, 16, 9, 8],
[2007, 29, 35, 49, 34, 43, 57, 41, 37, 20, 17, 9, 10],
[2008, 22, 32, 37, 30, 35, 44, 38, 31, 16, 17, 8, 7],
[2009, 25, 34, 41, 33, 39, 47, 44, 32, 17, 17, 9, 8],
[2010, 26, 35, 46, 40, 47, 61, 47, 41, 20, 18, 9, 10],
[2011, 29, 39, 55, 38, 55, 67, 53, 41, 19, 20, 11, 11],
[2012, 38, 48, 60, 49, 57, 79, 62, 54, 26, 26, 13, 11]
];
var dataByMonth = [];
var dataByTime = [];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
echarts.util.each(rawData, function (entry, yearIndex) {
var year = entry[0];
echarts.util.each(entry, function (value, index) {
if (index) {
dataByTime.push([year + '-' + index, value]);
var monthIndex = index - 1;
var monthItem = dataByMonth[monthIndex] = dataByMonth[monthIndex] || [];
monthItem[0] = monthIndex;
monthItem[yearIndex + 1] = value;
}
});
});
var averageByMonth = [];
echarts.util.each(dataByMonth, function (entry, index) {
var sum = 0;
echarts.util.each(entry, function (value, index) {
index && (sum += value);
});
averageByMonth.push([index, +(sum / (entry.length - 1)).toFixed(2)]);
});
function renderTrendItem(params, api) {
var categoryIndex = api.value(0);
var unitBandWidth = api.size([0, 0])[0] * 0.85 / (rawData.length - 1);
var points = echarts.util.map(rawData, function (entry, index) {
var value = api.value(index + 1);
var point = api.coord([categoryIndex, value]);
point[0] += unitBandWidth * (index - rawData.length / 2);
return point;
});
return {
type: 'polyline',
shape: {
points: points
},
style: api.style({
fill: null,
stroke: api.visual('color'),
lineWidth: 2
})
};
}
function renderAverageItem(param, api) {
var categoryIndex = api.value(0);
var bandWidth = api.size([0, 0])[0] * 0.85;
var point = api.coord([api.value(0), api.value(1)]);
return {
type: 'line',
shape: {
x1: point[0] - bandWidth / 2,
x2: point[0] + bandWidth / 2,
y1: point[1],
y2: point[1]
},
style: api.style({
fill: null,
stroke: api.visual('color'),
lineWidth: 2
})
};
}
var names = {
trendInMonth: 'Trend in the same month (2002 - 2012)',
average: 'Average',
trendInTime: 'Trend in time line'
};
var optLegendSeleted = {};
optLegendSeleted[names.trendInMonth] = true;
optLegendSeleted[names.average] = true;
optLegendSeleted[names.trendInTime] = false;
option = {
backgroundColor: '#eee',
tooltip: {
trigger: 'axis'
},
title: {
text: 'Sales Trends by Year within Each Month',
subtext: 'Sample of Cycle Plot',
left: 'center'
},
legend: {
top: 70,
data: [names.trendInMonth, names.average, names.trendInTime],
selected: optLegendSeleted
},
dataZoom: [{
type: 'slider',
showDataShadow: false,
xAxisIndex: [0, 1],
bottom: 10,
height: 20,
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
},
labelFormatter: ''
}, {
type: 'inside'
}],
grid: [{
bottom: 70,
top: 120,
}, {
bottom: 70,
top: 120
}],
xAxis: [{
id: 'a',
splitLine: {show: false},
data: months,
axisPointer: {
type: 'shadow'
}
}, {
type: 'time',
splitLine: {show: false},
gridIndex: 1,
axisLabel: {
formatter: function (timestamp) {
return echarts.format.formatTime('yyyy-MM', timestamp);
}
},
axisPointer: {
type: 'line'
}
}],
yAxis: [{
id: 'a',
splitLine: {show: true},
boundaryGap: [0, '20%']
}, {
splitLine: {show: true},
gridIndex: 1
}],
series: [{
type: 'custom',
name: 'Average',
renderItem: renderAverageItem,
encode: {
x: 0,
y: 1
},
data: averageByMonth
}, {
type: 'custom',
name: 'Trend in the same month (2002 - 2012)',
renderItem: renderTrendItem,
encode: {
x: 0,
y: echarts.util.map(rawData, function (entry, index) {
return index + 1;
})
},
data: dataByMonth
}, {
type: 'line',
name: 'Trend in time line',
renderItem: renderTrendItem,
showSymbol: false,
xAxisIndex: 1,
yAxisIndex: 1,
data: dataByTime
}]
};
var myChart = initShowCode(option);
myChart.on('legendselectchanged', function (params) {
var selected = params.selected;
var optLegendSeleted;
var optXAxis;
var optYAxis;
if (params.name !== names.trendInTime) {
if (selected[names.trendInTime]) {
optLegendSeleted = {};
optLegendSeleted[names.trendInMonth] = selected[names.trendInMonth];
optLegendSeleted[names.average] = selected[names.average];
optLegendSeleted[names.trendInTime] = false;
optXAxis = {
id: 'a',
axisPointer: {show: true},
axisLabel: {show: true},
axisTick: {show: true},
axisLine: {show: true}
};
optYAxis = {
id: 'a',
axisLabel: {show: true},
axisTick: {show: true},
axisLine: {show: true},
splitLine: {show: true}
}
}
}
else {
if (selected[names.trendInMonth] || selected[names.average]) {
optLegendSeleted = {};
optLegendSeleted[names.trendInMonth] = false;
optLegendSeleted[names.average] = false;
optLegendSeleted[names.trendInTime] = selected[names.average];
optXAxis = {
id: 'a',
axisPointer: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
axisLine: {show: false}
};
optYAxis = {
id: 'a',
axisLabel: {show: false},
axisTick: {show: false},
axisLine: {show: false},
splitLine: {show: false}
}
}
}
if (optLegendSeleted) {
var option2 = {
legend: {selected: optLegendSeleted},
xAxis: optXAxis,
yAxis: optYAxis
};
myChart.setOption(option2);
}
});
</script>
</body>
</html>