以下是一个基本的HTML5 K线走势图代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>K线走势图</title>
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts-en.js"></script>
</head>
<body>
<div id="chart" style="width:800px;height:600px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: 'K线走势图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['K线']
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
},
yAxis: {
scale: true
},
series: [{
name: 'K线',
type: 'candlestick',
data: [
[20, 30, 10, 35],
[40, 35, 30, 55],
[33, 38, 33, 40],
[38, 40, 34, 42],
[40, 35, 30, 55],
[33, 38, 33, 40],
[38, 40, 34, 42],
[20, 30, 10, 35],
[33, 38, 33, 40],
[38, 40, 34, 42]
],
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
}]
};
chart.setOption(option);
</script>
</body>
</html>
HTML5 K线走势图代码
最新推荐文章于 2024-07-03 23:09:21 发布