如何使用echarts画一个简单k线图
前言
现在需要用到画各种报表图的地方是越来越多了，现在时下流行的画报表和雷达图的插件是echarts。本人就来简单说说如何用echarts画k线图吧
原创地址：https://www.cnblogs.com/caominjie/p/11460363.html
快速实现
根据需求下载或者配置echarts插件
下载配置地址：echarts 这里有案例包，也有js文件，也有npm，更有定制化下载
案例上手
选择它的官方案例 可以找到你需要的各种样式需求，
选中其中你需要的进入，左侧是代码，右侧是图形，但最好先看看它的 5分钟快速上手.
基本的使用还是要靠它的
api配置查询
在配置它图片的时候有许多配置可能没看懂，可以结合的api文档查看. 查看方法是把关键字在左上侧黏贴进去会有提示出来，选中你要的。如： xAxis.type
基本看看文档就能解决大多数问题了
实现代码
现在到了重头戏了，说了那么多就是想看看实现，下面就提供代码：
代码中各种配置属性是我辛苦查询的，方便以后快速配置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用echarts画一个简单的k线图</title>
<!-- 导入的js自己下去,在官网：https://echarts.apache.org/examples/zh/index.htm -->
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var rawData = [['2015/12/31','3570.47','3539.18','-33.69','-0.94%','3538.35','3580.6','176963664','25403106','-'],['2015/12/30','3566.73','3572.88','9.14','0.26%','3538.11','3573.68','187889600','26778766','-'],['2015/12/29','3528.4','3563.74','29.96','0.85%','3515.52','3564.17','182551920','25093890','-'],['2015/12/28','3635.77','3533.78','-94.13','-2.59%','3533.78','3641.59','269983264','36904280','-'],['2015/12/25','3614.05','3627.91','15.43','0.43%','3601.74','3635.26','198451120','27466004','-'],['2015/12/24','3631.31','3612.49','-23.6','-0.65%','3572.28','3640.22','227785216','31542126','-'],['2015/12/23','3653.28','3636.09','-15.68','-0.43%','3633.03','3684.57','298201792','41990292','-'],['2015/12/22','3645.99','3651.77','9.3','0.26%','3616.87','3652.63','261178752','36084604','-'],['2015/12/21','3568.58','3642.47','63.51','1.77%','3565.75','3651.06','299849280','39831696','-'],['2015/12/18','3574.94','3578.96','-1.03','-0.03%','3568.16','3614.7','273707904','36538580','-'],['2015/12/17','3533.63','3580','63.81','1.81%','3533.63','3583.41','283856480','38143960','-'],['2015/12/16','3522.09','3516.19','5.83','0.17%','3506.29','3538.69','193482304','26528864','-'],['2015/12/15','3518.13','3510.35','-10.31','-0.29%','3496.85','3529.96','200471344','27627494','-'],['2015/12/14','3403.51','3520.67','86.09','2.51%','3399.28','3521.78','215374624','27921354','-'],['2015/12/11','3441.6','3434.58','-20.91','-0.61%','3410.92','3455.55','182908880','24507642','-'],['2015/12/10','3469.81','3455.5','-16.94','-0.49%','3446.27','3503.65','200427520','27949970','-'],['2015/12/9','3462.58','3472.44','2.37','0.07%','3454.88','3495.7','195698848','26785488','-']].reverse();
// 计算各种日线图
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
var dates = rawData.map(function (item) {
return item[0];
});
var data = rawData.map(function (item) {
return [+item[1], +item[2], +item[5], +item[6]];
});
// 指定图表的配置项和数据
var option = {
backgroundColor: '#21202D',// 背景色
legend: {// 要画的线
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
inactiveColor: '#777',//图例关闭时的颜色。
textStyle: {//图例的公用文本样式。
color: '#fff'
}
},
tooltip: {//提示框组件
trigger: 'axis',
axisPointer: {//坐标轴指示器配置项。
animation: false,// 过渡动画
type: 'cross',// 类型:'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器,'cross' 十字准星指示器。
lineStyle: {// 线的样式
color: '#376df4',// 鼠标放到图上会出来一个竖立的坐标线
width: 2,
opacity: 1
}
}
},
xAxis: {//x轴设置
type: 'category',// 坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据.'time' 时间轴，适用于连续的时序数据.'log' 对数轴。适用于对数数据。
data: dates,// x轴数据循环方法返回结果
axisLine: { lineStyle: { color: '#8392A5' } }// 底部x轴颜色
},
yAxis: {// y轴设置
scale: true,//是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
axisLine: { lineStyle: { color: '#8392A5' } },//y轴线的颜色
splitLine: { show: false }//是否显示分隔线。默认数值轴显示，类目轴不显示。
},
grid: {//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
bottom:60//grid 组件离容器下侧的距离。单位像素
},
dataZoom: [{//组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。就是滚轴上下滚的缩放
textStyle: {
color: '#8392A5'
},
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.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.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',// 鼠标放在柱上会出来的图标,默认小手
handleSize: '80%',//控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
dataBackground: {//数据阴影的样式。
areaStyle: {//阴影的填充样式
color: '#8392A5'
},
lineStyle: {//阴影的线条样式
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {//手柄的样式配置
color: '#fff',
shadowBlur: 3,//图形阴影的模糊大小
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside'
}],
animation: false,// 翻页动画
// 这里开始设置日k线,如单日,5日,10日,20日,30日
series: [//系列列表。每个系列通过 type 决定自己的图表类型
{
type: 'candlestick',// 显示种类,如线性等
name: '日K',
data: data,// 日k线每日的数据
itemStyle: {// 对象样式
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
},
{
name: 'MA5',// 5日k线
type: 'line',
data: calculateMA(5, data),// 使用它返回数据方法(几天，数据)
smooth: true,//平滑曲线显示(好看丝滑)
showSymbol: true,//是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
lineStyle: {
normal: {
width: 1// 5日k线粗细
}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
}
]
};
//option.title = {text:"new"}
console.log(option)
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
希望我写的案例能帮助到需要的人！！！
注意原创，不要盗用
