149 lines
4.2 KiB
HTML
149 lines
4.2 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 = 1;
|
|
|
|
var xAxisData = ["All"];
|
|
var customData = [];
|
|
var legendData = ["trend", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020"];
|
|
var dataList = [];
|
|
|
|
dataList.push([97])
|
|
dataList.push([158])
|
|
dataList.push([146])
|
|
dataList.push([159])
|
|
dataList.push([131])
|
|
dataList.push([144])
|
|
dataList.push([141])
|
|
dataList.push([113])
|
|
dataList.push([122])
|
|
dataList.push([83])
|
|
|
|
customData.push(['All', 97, 158, 146, 159, 131, 144, 141, 113, 122, 83])
|
|
|
|
var encodeY = [1,2,3,4,5,6,7,8,9,10];
|
|
|
|
|
|
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: {
|
|
data: xAxisData
|
|
},
|
|
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>
|
|
|