114 lines
3.8 KiB
HTML
Generated
114 lines
3.8 KiB
HTML
Generated
|
||
<!--
|
||
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">
|
||
<script src="lib/simpleRequire.js"></script>
|
||
<script src="lib/config.js"></script>
|
||
<script src="lib/jquery.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<style>
|
||
html, body, #main {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
<div id="main"></div>
|
||
<script>
|
||
|
||
require([
|
||
'echarts',
|
||
'theme/vintage'
|
||
], function (echarts) {
|
||
|
||
var chart = echarts.init(document.getElementById('main'), 'vintage');
|
||
|
||
|
||
var axisData = ['周一','周二','周三','很长很长的周四','应为系列色边框（auto）的周五','周六','周日'];
|
||
var data = axisData.map(function (item, i) {
|
||
var val = Math.round(Math.random() * 1000 * (i + 1))
|
||
return i !== 4
|
||
? val
|
||
: {
|
||
value: val,
|
||
label: {
|
||
normal: {
|
||
borderColor: 'inherit',
|
||
borderWidth: 1,
|
||
padding: 5,
|
||
position: 'top'
|
||
}
|
||
}
|
||
};
|
||
});
|
||
var links = data.map(function (item, i) {
|
||
return {
|
||
source: i,
|
||
target: i + 1
|
||
};
|
||
});
|
||
links.pop();
|
||
var option = {
|
||
tooltip: {},
|
||
xAxis: {
|
||
type : 'category',
|
||
boundaryGap : false,
|
||
data : axisData
|
||
},
|
||
yAxis: {
|
||
type : 'value'
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataZoom: {
|
||
yAxisIndex: false
|
||
}
|
||
}
|
||
},
|
||
dataZoom: {
|
||
type: 'inside'
|
||
},
|
||
series: [
|
||
{
|
||
type: 'graph',
|
||
layout: 'none',
|
||
coordinateSystem: 'cartesian2d',
|
||
symbolSize: 40,
|
||
label: {
|
||
normal: {
|
||
show: true
|
||
}
|
||
},
|
||
edgeSymbol: ['circle', 'arrow'],
|
||
edgeSymbolSize: [4, 10],
|
||
data: data,
|
||
links: links
|
||
}
|
||
]
|
||
};
|
||
|
||
chart.setOption(option);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |