160 lines
5.4 KiB
HTML
160 lines
5.4 KiB
HTML
<!--
|
|
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=custom-bar-trend
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html style="height: 100%">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
<body style="height: 100%; margin: 0">
|
|
<div id="container" style="height: 100%"></div>
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
|
|
<!-- Uncomment this line if you want to dataTool extension
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
|
|
-->
|
|
<!-- Uncomment this line if you want to use gl extension
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
|
|
-->
|
|
<!-- Uncomment this line if you want to echarts-stat extension
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
|
|
-->
|
|
<!-- Uncomment this line if you want to use map
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
|
|
-->
|
|
<!-- Uncomment these two lines if you want to use bmap extension
|
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
|
|
-->
|
|
|
|
<script type="text/javascript">
|
|
var dom = document.getElementById("container");
|
|
var myChart = echarts.init(dom);
|
|
var app = {};
|
|
|
|
var option;
|
|
|
|
|
|
|
|
var yearCount = 10;
|
|
var categoryCount = 10;
|
|
|
|
var xAxisData = ["clone detection technique", "clone analysis", "clone evolution", "clone refactoring", "other fields", "survey and tutorial", "clone visualization", "clone evaluation", "benchmark", "clone management"];
|
|
var customData = [];
|
|
var legendData = ["trend", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020"];
|
|
var encodeY = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
|
var dataList = [];
|
|
|
|
dataList.push([46, 23, 13, 8, 7, 4, 5, 0, 0, 2])
|
|
dataList.push([90, 27, 23, 10, 15, 6, 6, 0, 1, 1])
|
|
dataList.push([80, 20, 23, 21, 12, 7, 3, 3, 1, 2])
|
|
dataList.push([82, 26, 20, 20, 8, 13, 7, 4, 4, 2])
|
|
dataList.push([89, 13, 8, 11, 9, 11, 7, 5, 3, 2])
|
|
dataList.push([82, 19, 11, 13, 17, 14, 2, 5, 2, 1])
|
|
dataList.push([79, 25, 20, 9, 8, 5, 6, 1, 3, 1])
|
|
dataList.push([74, 17, 12, 8, 8, 8, 2, 2, 3, 1])
|
|
dataList.push([78, 14, 12, 5, 7, 11, 7, 6, 2, 0])
|
|
dataList.push([52, 12, 5, 5, 2, 8, 7, 2, 2, 2])
|
|
|
|
customData.push(['clone detection technique', 46, 90, 80, 82, 89, 82, 79, 74, 78, 52])
|
|
customData.push(['clone analysis', 23, 27, 20, 26, 13, 19, 25, 17, 14, 12])
|
|
customData.push(['clone evolution', 13, 23, 23, 20, 8, 11, 20, 12, 12, 5])
|
|
customData.push(['clone refactoring', 8, 10, 21, 20, 11, 13, 9, 8, 5, 5])
|
|
customData.push(['other fields', 7, 15, 12, 8, 9, 17, 8, 8, 7, 2])
|
|
customData.push(['survey and tutorial', 4, 6, 7, 13, 11, 14, 5, 8, 11, 8])
|
|
customData.push(['clone visualization', 5, 6, 3, 7, 7, 2, 6, 2, 7, 7])
|
|
customData.push(['clone evaluation', 0, 0, 3, 4, 5, 5, 1, 2, 6, 2])
|
|
customData.push(['benchmark', 0, 1, 1, 4, 3, 2, 3, 3, 2, 2])
|
|
customData.push(['clone management', 2, 1, 2, 2, 2, 1, 1, 1, 0, 2])
|
|
|
|
function renderItem(params, api) {
|
|
var xValue = api.value(0);
|
|
var currentSeriesIndices = api.currentSeriesIndices();
|
|
var barLayout = api.barLayout({
|
|
barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
|
|
});
|
|
|
|
var points = [];
|
|
for (var i = 0; i < currentSeriesIndices.length; i++) {
|
|
var seriesIndex = currentSeriesIndices[i];
|
|
if (seriesIndex !== params.seriesIndex) {
|
|
var point = api.coord([xValue, api.value(seriesIndex)]);
|
|
point[0] += barLayout[i - 1].offsetCenter;
|
|
point[1] -= 20;
|
|
points.push(point);
|
|
}
|
|
}
|
|
var style = api.style({
|
|
stroke: api.visual('color'),
|
|
fill: null
|
|
});
|
|
|
|
return {
|
|
type: 'polyline',
|
|
shape: {
|
|
points: points
|
|
},
|
|
style: style
|
|
};
|
|
}
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: legendData
|
|
},
|
|
dataZoom: [{
|
|
show: false,
|
|
type: 'slider',
|
|
start: 50,
|
|
end: 70
|
|
}, {
|
|
type: 'inside',
|
|
start: 50,
|
|
end: 70
|
|
}],
|
|
xAxis: {
|
|
show: true,
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
interval: 0
|
|
},
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
type: 'custom',
|
|
name: 'trend',
|
|
renderItem: renderItem,
|
|
itemStyle: {
|
|
borderWidth: 2
|
|
},
|
|
encode: {
|
|
x: 0,
|
|
y: encodeY
|
|
},
|
|
data: customData,
|
|
z: 100
|
|
}].concat(dataList.map(function (data, index) {
|
|
return {
|
|
type: 'bar',
|
|
animation: false,
|
|
name: legendData[index + 1],
|
|
itemStyle: {
|
|
opacity: 0.5
|
|
},
|
|
data: data
|
|
};
|
|
}))
|
|
};
|
|
|
|
if (option && typeof option === 'object') {
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|